Отрисовка экранов мобильного приложения под Android (Material Design)

При портировании макета из Figma в Jetpack Compose часто обнаруживаются несоответствия: отступы не кратны 4dp, цвета заданы HEX-значениями вместо цветовых ролей, а состояния элементов не прорисованы. Разработчику приходится доводить макет до ума, теряя время. Наши инженеры с общим опытом более 10 лет в Android-дизайне гарантируют, что каждый экран идеально ложится на M3 и Jetpack Compose. Это сокращает бюджет на разработку до 30% и ускоряет выход в релиз.

Почему динамические цвета обязательны для Android?

Material Design 3 строится вокруг цветовых ролей — не конкретных цветовых значений, а семантических слотов: primary, onPrimary, primaryContainer, onPrimaryContainer, и так по всей палитре из 29 ролей. Дизайнер задаёт Source Color, алгоритм HCT (Hue, Chroma, Tone) генерирует полную палитру автоматически. Dynamic Color — с Android 12+ система генерирует палитру из обоев рабочего стола. Макеты с жёстко прописанными HEX-значениями вместо цветовых ролей выглядят чужеродно на Pixel 8 и Galaxy S23. Для дизайна используем плагин Material Theme Builder в Figma: импортируем Brand Color → получаем полную M3-палитру → экспортируем как Color.kt для разработчика. Это исключает ручной перевод цветов и ошибки.

Как настроить M3 типографику в Figma?

M3 определяет 15 текстовых стилей в 5 группах: Display, Headline, Title, Body, Label. Размеры — не произвольные: Display Large = 57sp, Body Medium = 14sp. Использование sp вместо dp для текста — требование для корректного масштабирования при изменении системного размера шрифта (accessibility). Базовая сетка — 4dp. Все отступы, размеры компонентов, скругления — кратны 4. Отступ 12dp вместо 16dp — ошибка, которую разработчик исправит через padding(12.dp), но на устройстве с высокой плотностью пикселей разница будет заметна.

Компоненты и их состояния

Каждый M3-компонент имеет 5 состояний: enabled, hovered, focused, pressed, disabled. В Jetpack Compose это StateLayer с фиксированной opacity: pressed = 12% overlay, focused = 12%, hovered = 8%, disabled = 38% opacity контента. Макет без отрисованных состояний — незаконченный. Разработчик получает только «enabled» и начинает угадывать остальное. Критичные компоненты для отрисовки:

Выбор варианта — не эстетика, а семантика. Filled Button — основное действие, максимум одно на экране. Text Button — вторичное. Использовать два Filled Button рядом — нарушение иерархии.

Адаптация под размеры экрана

Android-устройства — телефоны (compact width), складные экраны (medium), планшеты (expanded). M3 определяет Canonical Layouts: List-Detail для expanded, Supporting Panel для medium. Макет только под compact — половина работы. Минимальный набор: отрисовать для compact (360–599dp) и expanded (840dp+). Medium (600–839dp) — промежуточный, часто наследует от одного из двух.

Как мы отрисовываем экраны: пошаговый процесс

1. Анализ требований и бренд-гайдлайнов.
2. Настройка цветовой палитры через Material Theme Builder (29 ролей, светлая и тёмная темы).
3. Создание типографической шкалы по M3-стандарту.
4. Отрисовка всех экранов в Figma с состояниями компонентов и аннотациями для разработчика (spacing tokens, цветовые роли, компонентные specs).
5. Адаптация под compact и expanded breakpoints.
6. Экспорт цветов и типографики в формате, готовом к импорту в Compose (Color.kt и Type.kt).
7. Финальное ревью и передача разработчику.

Что входит в работу

• Настройка цветовой системы через Material Theme Builder (все 29 ролей, светлая/тёмная тема)
• Типографическая шкала по M3-стандарту
• Отрисовка всех экранов в Figma с состояниями компонентов
• Адаптация под compact и expanded breakpoints
• Аннотации для разработчика: spacing tokens, цветовые роли (не HEX), компонентные specs
• Экспорт цветов и типографики в формате, готовом к импорту в Compose

Сроки и стоимость

3–5 дней в зависимости от количества экранов. Один экран с полным набором состояний и двумя breakpoints — около 0.5–1 дня. Стоимость рассчитывается индивидуально после анализа требований и количества уникальных экранов. Свяжитесь с нами для оценки вашего проекта — мы подберём оптимальный стек и сроки. Закажите разработку под ключ с полным сопровождением.

Почему нативная разработка Android на Kotlin — стандарт для production?

RecyclerView с DiffUtil.calculateDiff() на main thread, список из 500 элементов, средний Android-телефон прошлых лет — и пользователь получает 200–400 мс фриза при каждом обновлении данных. Переносишь расчёт diff в фоновый поток через AsyncListDiffer — проблема исчезает. Такие вещи не очевидны без профилировщика и понимания threading-модели Android. Мы каждый день сталкиваемся с подобными граблями, поэтому наша команда закладывает профилирование и оптимизацию в каждый спринт. Один день простоя из-за ANR обходится приложению с 100 000 DAU в среднем в 150 000 ₽ потерь — рефакторинг threading окупается за неделю.

Kotlin + Jetpack Compose + Coroutines — это текущий production-стандарт для нативной Android-разработки. XML и View system никуда не исчезли, но новые проекты мы начинаем только на Compose. Результат — меньше багов, быстрее итерации, на 30% меньше кода по сравнению с классическим подходом. Хотите оценить экономию на своём проекте? Напишите нам — сделаем бесплатный аудит текущего кода за полдня.

Как работает рекомпозиция в Jetpack Compose и почему это важно?

Compose — декларативный UI-фреймворк. Вместо TextView.setText() и adapter.notifyItemChanged() — функции-composable, которые описывают UI как функцию состояния. При изменении состояния Compose перевычисляет только затронутые части дерева. Это называется рекомпозиция.

Проблема: рекомпозиция может быть слишком частой. Если передать в composable лямбду, созданную на каждой рекомпозиции родителя — дочерний composable будет рекомпозироваться каждый раз, даже если видимые данные не изменились.

// Плохо — новая лямбда на каждой рекомпозиции, дочерний компонент
// считает, что параметр изменился
@Composable
fun ParentScreen(viewModel: MyViewModel = hiltViewModel()) {
    val items by viewModel.items.collectAsState()
    ItemList(
        items = items,
        onItemClick = { id -> viewModel.selectItem(id) } // создаётся заново каждый раз
    )
}

// Хорошо — remember стабилизирует лямбду
@Composable
fun ParentScreen(viewModel: MyViewModel = hiltViewModel()) {
    val items by viewModel.items.collectAsState()
    val onItemClick = remember { { id: String -> viewModel.selectItem(id) } }
    ItemList(items = items, onItemClick = onItemClick)
}

Stability и @Stable/@Immutable

Compose определяет, нужно ли рекомпозировать composable, проверяя стабильность параметров. Тип считается стабильным, если Compose может гарантировать: если два значения равны по equals(), их UI-представление одинаково.

Примитивы, String, data-классы с val-полями стабильных типов — стабильны автоматически. List<T> — нестабилен, потому что это интерфейс. MutableList может измениться без уведомления. Решение — ImmutableList из kotlinx.collections.immutable или @Immutable-аннотация на data-классе.

// List<Item> нестабилен — LazyColumn будет рекомпозироваться излишне
@Composable
fun ItemList(items: List<Item>) { ... }

// ImmutableList стабилен — Compose пропустит рекомпозицию если items не изменился
@Composable
fun ItemList(items: ImmutableList<Item>) { ... }

Для диагностики проблем рекомпозиции используем Compose Compiler Metrics. В build.gradle добавляем флаги -P plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=... и получаем отчёт: какие composable restartable, какие skippable, почему параметр нестабилен.

LazyColumn и производительность списков

LazyColumn — эквивалент RecyclerView в Compose. key в items { } — обязательный параметр для любого списка, где элементы могут перемещаться или удаляться. Без key Compose не может отличить перемещение элемента от удаления одного и добавления другого, что ломает анимации и может вызвать неожиданное сбрасывание состояния ячейки.

LazyColumn {
    items(
        items = messages,
        key = { message -> message.id } // стабильный идентификатор
    ) { message ->
        MessageItem(message = message)
    }
}

contentType — дополнительная оптимизация. При наличии нескольких типов ячеек Compose может переиспользовать composition для ячеек одного типа. Это аналог getItemViewType в RecyclerView.

Как избежать типичных ошибок при использовании Coroutines?

Coroutines — это структурированный concurrency с чётким scope и lifecycle.

viewModelScope — coroutine scope, привязанный к lifecycle ViewModel. Когда ViewModel очищается (onCleared()), все coroutines в scope автоматически отменяются. Это устраняет целый класс утечек, типичных для callback-based подхода.

@HiltViewModel
class OrderViewModel @Inject constructor(
    private val orderRepository: OrderRepository
) : ViewModel() {

    private val _uiState = MutableStateFlow<OrderUiState>(OrderUiState.Loading)
    val uiState: StateFlow<OrderUiState> = _uiState.asStateFlow()

    fun loadOrder(orderId: String) {
        viewModelScope.launch {
            _uiState.value = OrderUiState.Loading
            try {
                val order = orderRepository.getOrder(orderId) // suspend function
                _uiState.value = OrderUiState.Success(order)
            } catch (e: IOException) {
                _uiState.value = OrderUiState.Error(e.message)
            }
        }
    }
}

Что выбрать: StateFlow или LiveData?

StateFlow и SharedFlow — рекомендованная замена LiveData на Kotlin-проектах. LiveData lifecycle-aware, но привязан к Android-платформе. Flow — чистый Kotlin, тестируется без Android-зависимостей.

collectAsState() в Compose подписывается на StateFlow и триггерит рекомпозицию при новом значении. lifecycleScope.launch { flow.collect { } } — для сборки в Fragment или Activity с учётом lifecycle через repeatOnLifecycle(Lifecycle.State.STARTED).

repeatOnLifecycle — это важно. Без него поток будет собираться даже когда приложение в фоне, что может приводить к обработке UI-событий, когда окно не активно.

Dispatcher и структурированный concurrency

Dispatchers.IO — для сетевых запросов и файловых операций. Dispatchers.Default — для CPU-intensive задач (парсинг, сортировка, шифрование). Dispatchers.Main — для UI.

withContext(Dispatchers.IO) переключает coroutine на нужный dispatcher без создания нового scope. Это эффективнее, чем launch(Dispatchers.IO) внутри другого launch.

// Правильный паттерн в Repository
suspend fun getOrders(): List<Order> = withContext(Dispatchers.IO) {
    orderDao.getAll() // Room автоматически suspend, но явный IO-dispatcher — хорошая практика
}

Hilt и dependency injection

Hilt — официальный DI-фреймворк для Android поверх Dagger 2. Устраняет boilerplate Dagger: не нужно писать Component и вручную связывать Module с Component.

@HiltViewModel + @Inject constructor — ViewModel с инъекцией зависимостей без фабрик. @Singleton, @ActivityScoped, @ViewModelScoped — правильный lifecycle для зависимостей.

Типичная ошибка: использовать @Singleton для репозитория, который держит контекст Activity. Это утечка Activity. Правило: @Singleton только для зависимостей, которым нужен Application context или которые не хранят Android-специфичное состояние.

Хотите внедрить DI без головной боли? Свяжитесь с нами — поможем настроить Hilt за час на любом существующем проекте.

WorkManager и фоновые задачи

WorkManager — для гарантированных фоновых задач, которые должны выполниться даже после перезапуска приложения или устройства. Синхронизация данных, отправка аналитики, загрузка файлов.

CoroutineWorker — suspend-версия Worker. Работает в Dispatchers.IO по умолчанию.

Android 14 ужесточил требования к фоновому выполнению. FOREGROUND_SERVICE_TYPE стал обязательным для foreground services. WorkManager правильно обрабатывает ограничения (сеть, зарядка) и не требует foreground service для большинства задач.

Инструменты

Android Studio Profiler. CPU profiler с System Trace — видно всё: coroutine suspension points, RenderThread, MainThread. Memory profiler — heap dump, allocation tracking. Network profiler — все HTTP-запросы с телами.

Compose Layout Inspector. Дерево composable с указанием recomposition count. Видно, какие composable рекомпозируются слишком часто — точнее любого логирования.

LeakCanary. Автоматическое обнаружение утечек памяти в development-сборке. Показывает reference chain до утечки. Добавляется одной зависимостью, работает без конфигурации.

Firebase Crashlytics + Performance Monitoring. Crash-free rate по версиям, Network request traces, Custom traces для критичных операций.

Что входит в нативную разработку Android: наш процесс

1. Аудит требований и проектирование архитектуры — диаграммы, выбор стека, прототип.
2. Реализация на Kotlin + Jetpack Compose — StateFlow, Hilt, Coroutines, Navigation.
3. Интеграция с бэкендом — REST/GraphQL, WebSocket, push-уведомления (FCM), Android App Links.
4. Тестирование — unit-тесты (JUnit, MockK), UI-тесты (Compose Test), нагрузочное тестирование.
5. CI/CD — GitHub Actions / GitLab CI с автоматической сборкой, линтером и публикацией в Google Play Console.
6. Документация — README, ADR (Architecture Decision Records), комментарии в коде.
7. Поддержка после релиза — мониторинг, crashlytics, горячие фиксы, обновления.
8. Гарантия на код — 3 месяца бесплатной поддержки после сдачи.

Типичные ошибки на проектах (наш опыт):

• Пропущен key в LazyColumn — анимации ломаются, биндинг сбрасывается.
• Singleton репозиторий с Context Activity — утечка памяти.
• Отсутствие repeatOnLifecycle — обработка событий в фоне.
• Dispatchers.Main для IO-операций — ANR.
• Нестабильные типы в Compose — лишняя рекомпозиция всего списка.
• Ручное управление кэшем без использования Room или DataStore — хаос.

После рефакторинга таких проблем клиенты сообщают о снижении crash rate на 40% за первый месяц, а время отклика API сокращается с 1200 мс до 400 мс за счёт правильной работы с диспетчерами и кэшированием.

Сроки и стоимость

Стоимость рассчитывается после анализа требований и ТЗ. Оценка — бесплатно. Получите консультацию — мы подготовим детальное коммерческое предложение с разбивкой по этапам.

Почему нам доверяют

5 лет на рынке, 70+ завершённых проектов для Android (от стартапов до enterprise). В команде — Lead Android Developer с опытом работы в Google и сертификацией Associate Android Developer. Все проекты проходят Code Review с Checkstyle и Detekt, что гарантирует качество кода. Для production-сборок используем ProGuard/R8 с кастомными правилами shrink, что уменьшает APK на 25–35% без потери функциональности.

References: Kotlin Coroutines официальная документация, Android Developers — Jetpack Compose, Wikipedia — Android (operating system).