Kotlin Android: первый экран без перегруза

В этом уроке мы сделаем первый Android-экран на Kotlin без попытки изучить всю Android-архитектуру за один присест. Создадим Empty Activity, найдем MainActivity.kt, поменяем текст, добавим кнопку в Compose Preview и разберем, где заканчивается Kotlin и начинается Android SDK

Цель не в том, чтобы сразу собрать полноценное приложение. Цель — пройти первый безопасный маршрут: проект открылся, Gradle Sync прошел, экран виден в Preview или эмуляторе, код Kotlin не путается с настройками Android Studio

Что получится в конце

В MainActivity.kt будет composable-функция:

@Composable
fun GreetingScreen(name: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(24.dp)) {
        Text(text = "Hello, $name")
        Button(onClick = {}) {
            Text("Continue")
        }
    }
}

И preview:

@Preview(showBackground = true)
@Composable
fun GreetingScreenPreview() {
    GreetingScreen("Kotlin")
}

В Android Studio вы увидите экран с текстом и кнопкой. Это маленький, но настоящий UI-сценарий

Что нужно заранее

Нужен Android Studio с установленным Android SDK. Ставьте Android Studio с официального сайта Android Developers. IntelliJ IDEA хорош для Kotlin/JVM, но для Android новичку нужен именно Android Studio: там SDK, эмулятор, шаблоны, Preview и Gradle-интеграция под Android

Также нужен базовый Kotlin: fun, параметры, строки, nullable-типы. Если fun main еще не знаком, лучше сначала открыть урок Kotlin с нуля: первая программа и println

Создаем проект

1. New Project
2. Minimum SDK оставьте разумным значением из шаблона
3. Finish

После создания проекта дождитесь Gradle Sync. Это важно. Пока синхронизация не завершилась, IDE может подсвечивать нормальный код красным просто потому, что зависимости еще не подтянулись

Если Android Studio предлагает обновить Gradle plugin прямо в первом уроке, не спешите нажимать все подряд. Для новичка лучше сначала запустить проект в состоянии, которое создал шаблон

Где находится Kotlin-код

Основной файл обычно называется MainActivity.kt. В Android-представлении проекта он лежит внутри app-модуля и package вашего приложения

В обычной Kotlin-программе точка входа — fun main. В Android-приложении старт связан с Activity. В MainActivity есть onCreate, где вызывается setContent

Упрощенно:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GreetingScreen("Kotlin")
        }
    }
}

setContent говорит Android: UI будет описан через Compose-функции

Composable-функция

Функция UI помечается @Composable:

@Composable
fun GreetingScreen(name: String, modifier: Modifier = Modifier) {
    Text(text = "Hello, $name", modifier = modifier)
}

Composable-функция описывает, что должно быть на экране. Она не похожа на обычную функцию println: она не печатает в терминал, а участвует в построении UI

Имена composable-функций обычно пишут с большой буквы, если они представляют элемент UI. Это не случайность, а стиль Compose

Добавляем Column и Button

Чтобы разместить текст и кнопку вертикально:

@Composable
fun GreetingScreen(name: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(24.dp)) {
        Text(text = "Hello, $name")
        Button(onClick = {}) {
            Text("Continue")
        }
    }
}

Понадобятся импорты:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Если Android Studio подсвечивает Column или Button, используйте подсказку импорта. Часто проблема не в Kotlin, а в отсутствующем import

Preview: проверить без эмулятора

Preview позволяет увидеть UI без полного запуска приложения:

@Preview(showBackground = true)
@Composable
fun GreetingScreenPreview() {
    GreetingScreen("Kotlin")
}

Если Preview пустой, попробуйте Build & Refresh. Если ошибка связана с Gradle Sync, сначала чините Sync, а не сам composable-код

Preview особенно полезен новичку: вы меняете текст, padding, кнопку и видите результат быстрее, чем через запуск эмулятора

Запуск на эмуляторе

Когда Preview работает, можно запускать эмулятор. В Android Studio выберите устройство и нажмите Run

Первый запуск может быть долгим: создается или стартует emulator, собирается app, устанавливается APK. Это нормально

Проверка результата:

• приложение открылось
• текст виден
• кнопка видна
• нет crash в Logcat

Кнопка пока ничего не делает, потому что onClick = {} пустой. Это честный первый экран, а не недоделка

Домашка: счетчик на кнопке

Если хотите сделать экран живее, добавьте состояние:

@Composable
fun CounterScreen(modifier: Modifier = Modifier) {
    var count by remember { mutableStateOf(0) }

    Column(modifier = modifier.padding(24.dp)) {
        Text(text = "Clicks: $count")
        Button(onClick = { count++ }) {
            Text("Add")
        }
    }
}

Понадобятся импорты:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

Это уже шаг к Compose-состоянию. Не углубляйтесь пока в архитектуру. Просто проверьте, что кнопка меняет число на экране

Как понять структуру проекта

В Android-проекте новичка обычно пугает количество файлов. На первом уроке держите фокус на четырех местах:

app/build.gradle.kts
app/src/main/AndroidManifest.xml
app/src/main/java/.../MainActivity.kt
app/src/main/res/

build.gradle.kts отвечает за сборку app-модуля. AndroidManifest.xml описывает приложение для Android-системы. MainActivity.kt содержит Kotlin-код экрана. res хранит ресурсы, хотя в Compose часть UI может быть описана прямо в Kotlin

Не пытайтесь сразу понять каждую папку. Сначала добейтесь работающего экрана, затем постепенно открывайте смысл файлов

State hoisting простыми словами

Если вы сделали счетчик, следующим шагом будет вынести состояние наружу:

@Composable
fun CounterScreen(
    count: Int,
    onAdd: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier.padding(24.dp)) {
        Text(text = "Clicks: $count")
        Button(onClick = onAdd) {
            Text("Add")
        }
    }
}

Теперь экран не сам решает, где хранится count. Он получает значение и callback. Это называется state hoisting. Для первого урока достаточно понять идею: UI становится проще тестировать и переиспользовать, когда состояние можно поднять выше

Домашка: экран приветствия

Сделайте экран с тремя элементами:

• заголовок Kotlin Android
• текст First screen is ready
• кнопка Start

Дополнительная задача: добавьте счетчик кликов и проверьте, что Preview все еще работает

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

Что смотреть в Logcat

Если приложение упало, откройте Logcat и ищите строку с FATAL EXCEPTION. Ниже обычно есть stack trace. Для новичка главное — найти первую строку, которая указывает на ваш файл или понятную причину

Не меняйте код вслепую. Сначала прочитайте ошибку, затем проверьте Gradle Sync, imports, Preview и запуск на устройстве. Android часто кажется хаотичным именно потому, что ошибка может быть в разных слоях

Частые ошибки и порядок проверки

Gradle Sync failed Сначала откройте ошибку Sync. Пока Gradle не синхронизировался, код может подсвечиваться неверно

Unresolved reference: Button или Column Проверьте imports и зависимости Compose. В шаблоне Empty Activity они обычно уже есть

Preview не обновляется Нажмите Build & Refresh. Если не помогло, смотрите ошибку над Preview, а не меняйте код вслепую

Эмулятор не запускается Проверьте, создано ли устройство, хватает ли ресурсов и установлен ли нужный system image

Что может быть еще интересно по этой теме

Kotlin и Android — это одно и то же? Нет. Kotlin — язык. Android — платформа, SDK, компоненты, жизненный цикл, Gradle plugin и UI-инструменты

Нужно ли учить XML? С Compose можно начать без XML. Но в старых проектах XML встречается часто, поэтому позже полезно понимать оба подхода

Почему в Android нет fun main? Android-приложение запускается системой через Activity и lifecycle. onCreate выполняет роль стартовой точки для экрана

Что открыть после первого экрана? Дальше логично изучить состояние Compose, навигацию и загрузку данных. Но перед этим стоит уверенно пройти Kotlin-основы: null safety, data class, коллекции и coroutines

Что почитать дальше по Kotlin

• Kotlin с нуля: первая программа и println
• Как установить Kotlin: IntelliJ IDEA, Playground и Gradle
• Coroutines в Kotlin: первый async-пример
• Kotlin и Java: в чем разница для новичка