Быстрый старт с 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.

Установка и настройка проекта

  1. Создайте проект: File > New > New Project > Empty Compose Activity.
  2. В 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")
}
  1. 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.