Как сделать первое Android-приложение на Kotlin и Jetpack Compose

Jetpack Compose строит Android-интерфейс из Kotlin-функций: состояние меняется, а нужная часть экрана пересчитывается автоматически. Создадим Empty Activity, добавим поле имени, кнопку и приветствие. Проект заработает в Preview и на эмуляторе, а rememberSaveable сохранит введённые данные при повороте экрана.

Первый Android-проект пугает количеством файлов, хотя пользовательский сценарий маленький. Activity является точкой входа, setContent запускает Compose, а composable-функция описывает текущий вид экрана. Поле ввода не изменяет Text напрямую: оно обновляет переменную state. Compose замечает изменение и выполняет recomposition.

Как Activity, Compose и state связаны между собой

Android Studio создаёт проект из Empty Activity. В onCreate вызывается setContent, внутри темы запускается GreetingScreen. Два состояния хранят введённое name и готовую строку greeting. OutlinedTextField получает value и onValueChange, поэтому является контролируемым полем. Button по клику очищает пробелы и формирует приветствие или подсказку.

У проекта есть один главный маршрут: получить входные данные, проверить их, выполнить действие и показать результат. Если каждый этап можно проверить отдельно, ошибка перестаёт быть загадкой.

От входных данных до видимого результата. Событие меняет данные, Compose приводит UI в соответствие

Собираем экран с полем и кнопкой

Установите актуальную Android Studio, выберите New Project, затем Empty Activity, Kotlin и поддерживаемый minimum SDK. Дождитесь Gradle Sync. Откройте MainActivity.kt и замените содержимое экрана на пример ниже, сохранив package и тему своего проекта. Preview можно запустить из редактора, а для устройства создайте эмулятор в Device Manager.

@Composable
fun GreetingScreen(modifier: Modifier = Modifier) {
    var name by rememberSaveable { mutableStateOf("") }
    var greeting by rememberSaveable { mutableStateOf("Введите имя") }

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Первое приложение", style = MaterialTheme.typography.headlineMedium)
        OutlinedTextField(
            value = name,
            onValueChange = { name = it },
            label = { Text("Ваше имя") },
            singleLine = true
        )
        Button(onClick = {
            val cleanName = name.trim()
            greeting = if (cleanName.isEmpty()) "Сначала введите имя" else "Привет, $cleanName!"
        }) {
            Text("Поздороваться")
        }
        Text(greeting, style = MaterialTheme.typography.titleLarge)
    }
}

Экран является функцией от состояния. Мы не ищем Text по id и не присваиваем ему значение вручную. Меняется greeting, после чего Compose приводит интерфейс в соответствие.

Что отличает устойчивый проект от случайного успеха. Один источник состояния упрощает объяснение экрана

Почему интерфейс перерисовывается без ручного поиска View

mutableStateOf создаёт наблюдаемое состояние. Когда composable читает name или greeting, Compose запоминает зависимость. Изменение значения планирует recomposition затронутой части дерева. remember удерживает значение между recomposition, но может потерять его при пересоздании Activity.

Recomposition не обязана выполнять весь экран и не означает полную перерисовку пикселей. Compose может пропускать части, входы которых не изменились. Поэтому composable должна быть быстрой и без неожиданных побочных эффектов. Не запускайте сетевой запрос прямо в теле функции: при recomposition он повторится.

Проверяем Preview, поворот и пустой ввод

Запустите Preview и измените текст заголовка. Затем установите приложение на эмулятор, введите имя и поверните экран. Убедитесь, что оба значения сохранились. Замените rememberSaveable на remember, повторите поворот и сравните. Верните saveable. Добавьте счётчик приветствий как Int и вывод «Нажатий: N». После этого ограничьте имя 30 символами в onValueChange.

Первое приложение готово, когда вы можете предсказать, какая переменная изменится после каждого события и почему экран обновится. Кнопка и красивый Preview без понимания state дают слишком хрупкую основу.

Четыре проверки перед следующим шагом. Preview и эмулятор отвечают на разные вопросы

Готовим приложение к следующему экрану

Дальше вынесите state и обработчики в параметры GreetingScreen, чтобы composable было проще тестировать. Затем добавьте ViewModel и разделите UI-state от событий. Для второго экрана используйте Navigation Compose только после того, как первый экран не хранит бизнес-логику внутри кнопки.

Как изучить тему в Кодике

В Кодике сначала закрепите переменные, функции и классы Kotlin. Затем напишите чистую функцию, которая принимает name и возвращает greeting. Только после этого подключите её к state и кнопке Compose.

Не пытайтесь запомнить весь API. В тренажёре Кодика сначала воспроизведите чистую логику без библиотеки, затем восстановите подключение и обработку ошибок. Финальный тест: объяснить проект по памяти и добавить одну свою функцию.

Что получится в итоге

Первый Android-экран принимает имя, обновляет state по кнопке, переживает поворот и одинаково выглядит в Preview и на эмуляторе.