Быстрый старт с Jetpack Compose в Android Studio
Jetpack Compose — декларативный UI‑toolkit для Android. Коротко: обновите Android Studio до последней стабильной версии, поставьте JDK 17+, Kotlin 1.8+, включите buildFeatures.compose, добавьте Compose BOM и kotlinCompilerExtensionVersion, затем создайте Empty Compose Activity — экран появится сразу.
Требования и подготовка
- Android Studio: Hedgehog (2023.1.1) или новее; лучше — самая свежая стабильная версия.
- JDK 17+.
- Kotlin 1.8+ (связано с версией компилятора Compose).
- Минимальный SDK API 21+, желательно тестировать на нескольких API.
- В SDK Manager скачайте платформы и образ эмулятора нужных API.
Используйте Compose BOM (platform) для управления версиями зависимостей и следите за версией kotlinCompilerExtensionVersion — она должна соответствовать версии Kotlin.
Установка и настройка проекта
- Создайте проект: File > New > New Project > Empty Compose Activity.
- В module build.gradle.kts включите Compose и добавьте зависимости через BOM:
android {
compileSdk = 34
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.8" // проверьте актуальность
}
kotlinOptions {
jvmTarget = "17"
}
}
dependencies {
implementation(platform("androidx.compose:compose-bom:2024.06.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
implementation("androidx.activity:activity-compose:1.9.2")
debugImplementation("androidx.compose.ui:ui-tooling")
}
- Sync Now и сделайте Build > Make Project. Для legacy‑проектов: добавьте те же зависимости и замените setContentView на setContent { … } в Activity.
Первый экран — пример кода
Минимальный рабочий пример MainActivity и простого Composable:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent { MyApp() }
}
}
@Composable
fun MyApp() {
MaterialTheme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
Greeting("Android")
}
}
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Hello, $name!", style = MaterialTheme.typography.headlineMedium)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { /* действие */ }) {
Text("Кнопка")
}
}
}
Запустите на эмуляторе — вы увидите центрированный текст и кнопку.
Частые ошибки
- Неподходящая комбинация Kotlin / Compose Compiler — ошибка компиляции. Решение: синхронизируйте версии (Kotlin ↔ compiler extension).
- buildFeatures.compose = true пропущено — проект не собирается. Добавьте в android{}.
- Неправильный импорт Material (Material vs Material3) — элементы выглядят/ведут себя иначе. Проверьте зависимости.
- Вызываете State.value напрямую в теле Composable и изменяете его — возможен бесконечный recompose. Используйте LaunchedEffect / rememberUpdatedState или обработчики событий.
- @Preview не отображает экран — убедитесь, что у вас установлен plugin и в Preview указан правильный Device/Api, или перезапустите Android Studio.
Никогда не изменяйте State.value напрямую в теле Composable без эффекта (LaunchedEffect/SideEffect) — это часто приводит к бесконечной перерисовке.
FAQ
-
Можно ли смешивать XML и Compose в одном проекте? Да. Compose можно интегрировать по частям: добавьте ComposeView в XML или используйте setContent в Activity/Fragment рядом с существующими вью.
-
Как быстро увидеть изменения UI при разработке? Используйте @Preview для итераций и Live Edit/Apply Changes в Android Studio (если доступно).
-
Как мигрировать старые экраны на Compose? Начните с небольших компонентов: превратите отдельные виджеты в Composable, затем постепенно заменяйте Activity/Fragment setContent.
Если нужно — пришлю готовый checklist миграции или минимальный template для проекта с navigation и state management.