Шаги для включения Jetpack Compose и создания первого экрана
В Android Studio включить Jetpack Compose можно в модуле app: в android { buildFeatures { compose = true } } добавить kotlinCompilerExtensionVersion, зависимости Compose и заменить Activity на ComponentActivity с setContent { ... } — ниже пошагово с кодом и советами.
Быстрая подготовка проекта
- Новый проект: File → New → New Project → Empty Compose Activity (если доступно).
- Для существующего проекта внесите изменения в модульный build.gradle(.kts):
Пример build.gradle.kts (Module: app):
android {
compileSdk = 34
defaultConfig {
minSdk = 24
targetSdk = 34
}
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.17"
}
}
dependencies {
implementation("androidx.core:core-ktx:1.11.0")
implementation("androidx.activity:activity-compose:1.9.2")
implementation("androidx.compose.ui:ui:1.7.0")
implementation("androidx.compose.ui:ui-tooling-preview:1.7.0")
implementation("androidx.compose.material3:material3:1.3.0")
// Добавьте navigation-compose при необходимости
}
Поставьте minSdk ≥24 для стабильной работы библиотек и ускоренной сборки. Синхронизируйте Gradle после изменений.
Создание и запуск первого экрана (MainActivity и Composable)
Замените Activity на ComponentActivity и используйте setContent. Простой рабочий пример:
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.*
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 {
MaterialTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
FirstScreen()
}
}
}
}
}
@Composable
fun FirstScreen() {
var count by remember { mutableStateOf(0) }
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Привет, Jetpack Compose!", style = MaterialTheme.typography.headlineMedium)
Spacer(Modifier.height(16.dp))
Button(onClick = { count++ }) {
Text("Нажали: $count")
}
}
}
Добавьте превью для быстрой проверки в Android Studio:
@Preview(showBackground = true)
@Composable
fun FirstScreenPreview() {
FirstScreen()
}
Запустите на эмуляторе API 34+ или реальном устройстве — экран отрисуется мгновенно.
Проверка, сборка и полезные расширения
- Preview: откройте вкладку Design → Preview; редактор покажет @Preview автоматически.
- Hot Reload / Apply Changes: используйте для быстрых правок UI без полной сборки.
- Навигация: добавьте dependency "androidx.navigation:navigation-compose:2.8.0" для мульти-экранного приложения.
- Сборка релиза: Build → Build Bundle(s) / APK(s) → Build APK(s).
Compose требует Kotlin. Если проект на Java — переведите модуль на Kotlin или создайте новый Kotlin-модуль; Compose не поддерживает Java напрямую.
Частые ошибки
- buildFeatures { compose = true } не добавлен — компиляция падает с ошибками про неизвестные аннотации.
- Неверная версия kotlinCompilerExtensionVersion — проверьте совместимость с версиями Compose.
- Использование Android View-специфичных API внутри @Composable без адаптации — UI не будет реактировать.
- Отсутствует activity-compose в зависимостях — setContent не доступен.
FAQ
- Нужно ли отключать XML? Нет — можно сочетать Compose и XML через ComposeView или AndroidView, но для новых экранов предпочтителен Compose.
- Как отлаживать состояние? Используйте remember/rememberSaveable и инструменты Layout Inspector.
- Как добавить Material 3? Подключите material3 в зависимостях и оберните UI в MaterialTheme (как в примере).
Теперь у вас есть готовая рабочая конфигурация и минимальный экран. Экспериментируйте с состоянием, навигацией и анимациями — Compose позволяет быстро прототипировать и улучшать интерфейсы.