​​🚀 Вышел Jetpack WindowManager 1.4 - библиотека с API для построения адаптивного UI в Material3 (можно применить и к другим UI Kit): WindowSizeClass, Activity embedding, WindowsInfoTracker и др.

Про изменения отдельными постами дальше

#jetpack #ui #material

🚀 Изменения в WindowSizeClass

Сделали рефакторинг API, чтобы оно позволило добавлять собственные значения в будущем (помимо NORMAL, LARGE, EXPANDED), а также отказались от WindowWidthSizeClass и WindowHeightSizeClass.

// Было. Теперь deprecated 

val sizeClass = WindowSizeClass.compute(widthDp, heightDp)
when (sizeClass.widthSizeClass) {
  COMPACT -> doCompact()
  MEDIUM -> doMedium()
  EXPANDED -> doExpanded()
  else -> doDefault()
}

// Стало в 1.4
val sizeClass = WindowSizeClass.BREAKPOINTS_V1
                               .computeWindowSizeClass(widthDp, heightDp)


// Проверяем от самого большого размера к наименьшему
when {
  sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND) -> {
    doExpanded()
  }
  sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND) -> {
    doMedium()
  }
  else -> {
    // Ветка по умолчанию должна быть для
    // самого маленького поддерживаемого UI
    doCompact() 
  }
}

#jetpack #material #adaptive #ui

🚀 Обновления Activity Embedding

👉 Изменение размера панелей теперь поддерживается из коробки

val splitAttributesBuilder: SplitAttributes.Builder = SplitAttributes.Builder()
   .setSplitType(SplitAttributes.SplitType.ratio(0.33f))
   .setLayoutDirection(SplitAttributes.LayoutDirection.LEFT_TO_RIGHT)

if (WindowSdkExtensions.getInstance().extensionVersion >= 6) {
   splitAttributesBuilder.setDividerAttributes(
       DividerAttributes.DraggableDividerAttributes.Builder()
           .setColor(getColor(context, R.color.divider_color))
           .setWidthDp(4)
           .setDragRange(
               DividerAttributes.DragRange.DRAG_RANGE_SYSTEM_DEFAULT)
           .build()
   )
}
val splitAttributes: SplitAttributes = splitAttributesBuilder.build()

👉 Управление затемнением интерфейса под диалогом диалога

👉 Возможность закрепить Activity Task (набор Activity) по id в части экрана

fun pinActivityStackExample(taskId: Int) {
 val splitAttributes: SplitAttributes = SplitAttributes.Builder()
   .setSplitType(SplitAttributes.SplitType.ratio(0.66f))
   .setLayoutDirection(SplitAttributes.LayoutDirection.LEFT_TO_RIGHT)
   .build()

 val pinSplitRule = SplitPinRule.Builder()
   .setDefaultSplitAttributes(splitAttributes)
   .build()

 SplitController.getInstance(applicationContext)
   .pinTopActivityStack(taskId, pinSplitRule)
}

#jetpack #ui #material #activity

🤖 Редизайн Android - Material 3 Expressive

В рамках The Android Show I/O Edition показали "самый большой редизайн Android за всё время" (со слов спикера). Нас ждет Material 3 Expressive - обновленная версия Material 3 на основе существующих токенов

Буду садиться разбираться и рассказывать на 🪙 Boosty про что будет в обновлении

#android #android16 #material #ui #material3expressive

🔨 Превью Compose можно будет изменять прямо в IDE

Google активно продвигает поддержку больших экранов и теперь тестировать UI на Compose в Android Studio будет проще. Изменять размер окна превью можно прямо в IDE и интерфейс будет подстраиваться под текущий размер.

Попробовать можно в свежей версии Android Studio Narhwall Feature Drop или новее. В Compose Preview надо переключить на режим "Focus"

#androidstudio #compose #ui

🚀 Отказываюсь от Списков в пользу Сеток в UI

Раньше для списков в Compose я по привычке использовал LazyColumn. Но чем больше работаю с адаптивными интерфейсами, тем очевиднее: это никуда не годиться и надо использовать доступное пространство, а не тупо растягивать интерфейс. Перехожу на Grid компоновку ✔️

LazyVerticalGrid позволяет задать фиксированную ширину колонки, и система сама рассчитает, сколько их поместится на экране.
В результате:
1️⃣ адаптивность «из коробки» на телефонах, планшетах и больших экранах
2️⃣ минимум дополнительного кода,
3️⃣единый компонент вместо костылей для разных форм-факторов.

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 120.dp),
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(8.dp)
) {
    items(100) { Item(...) }
}

Определение количества колонок происходит на основе политики GridCell:

// всегда N колонок
GridCells.Fixed(N)

// автоматический расчет на основе минимальной ширины колонки
GridCells.Adaptive(minSize = 120.dp)

// каждая ячейка шириной 100dp
GridCells.FixedSize(100.dp)

📱 На маленьком экране это будет 2–3 колонки, а на планшете — уже 5–6, и всё это без ручной логики.

Есть еще более гибкий вариант если элементы строк должны быть разной высоты - LazyVerticalStaggeredGrid (стиль как в Pinterest)

LazyVerticalStaggeredGrid(
    columns = Adaptive(minSize = 150.dp),
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(8.dp)
) {
    items(100) { Item(...) }
}

❗️ Теперь я придерживаюсь строго правила:

Если не могу явно сформулировать почему интерфейс должен быть в одну колонку, то вертикальный список брать не стоит!

🔗 Очень хорошо построение списков осветили в документации по Lazy Layout

Аналогично можно проделать и с RecyclerView, использую вместо LinearLayoutManager вариант с сеткой - GridLayoutManager или StaggeredGridLayoutManager, только там не будет автоматического расчета колонок на основе доступного места. Это придется реализовывать самостоятельно.

✍️ Что думаете о таком подходе для UI? Ударит по производительности?

#ui #android #compose

🖌 Примеры адаптивного дизайна от команды Android в Figma

Команда Android Дизайна выкатила на своей странице в фигме дизайн 4 приложений, который адаптирован под разны размеры экрана: смартфоны, маленькие и большие планшеты, складные устройства, ноутбуки и телевизоры

Рекомендую всем посмотреть, чтобы посмотреть на подходы, а они на самом деле просты. Если хотите отдельный пост про техники адаптации дизайна - ставьте ❤️

#android #дизайн #adaptive #ui #material

🤖 Адаптивность UI в Android-приложениях

Android-приложения запускаются на экранах с разными размерами и ориентацией. Чтобы интерфейс выглядел хорошо в любых условиях, стоит учитывать несколько простых правил, которые я выработал за годы опыта 👇

1️⃣ Не привязывайтесь к фиксированным размерам
Фиче может быть выделен весь экран, часть окна или вообще маленький контейнер. Пусть она сама решает: занять всё пространство или только необходимое. Остальное — задача хоста, который через параметры (например, Modifier в Compose) подстроит отображение или сама правильно разместит (например, по центру).

2️⃣ Используйте адаптивные компоненты
Вместо LazyColumn — лучше LazyVerticalGrid, а для RecyclerView — GridLayoutManager. Они умеют подстраивать сетку под свободное место на экране.

3️⃣ Закладывайтесь на увеличение текста и элементов
Пользователь может менять скейл интерфейса: Google позволяет масштабировать всё, увеличивая DP → PX. Поэтому всегда предусмотрите скролл, если контента может стать больше.

4️⃣ UI фичи не должен знать, где он окажется
Фича отвечает только за свой UI. А вот приложение решает, как её показать: в одну панель или, например, в связке через ListDetailPaneScaffold, где на экране могут быть сразу несколько экранов.

Даже если дизайнер подготовил макет только под смартфон в вертикали — попробуйте включить воображение. Немного гибкости и масштабирования дадут пользователям куда более удобный опыт без больших трудозатрат.

📚 Что почитать:
- Практики по построению адаптивных приложений
- Compose Material 3 Adaptive
- Jetpack WindowManager
- Как строить адаптивный UI через layout

💬 Делитесь в комментариях своими советами и болями адаптивности UI

#android #ui #compose #adaptive #ux #material3

🚀 Вышла стабильная версия Jetpack Navigation 3 - бибилотека для UI навигации, заооченная под Compose

Стал доступен первый стабильный релиз навигации, разработанной специально для Compose. Библиотека предоставляет больше гибкости и контроля разработчикам, позволяя реализовать различные подходы. Google выложила свои примеры реализации популярных задач в репозитории на 🐱GitHub

Nav3 имеет поддержку Compose Multiplatform, а также JetBrains выпустила версию артефактов

👉 Документация по библиотеке

Всем кто использует Jetpack Navigation 2 с Compose нааооятельно рекомендуется миграция.
🔨Руководство по миграции
⭐️ Также Google сделала файл с контекстом для AI агента при миграции

Про возможности бибилотеки я рассказал в 📹 отдельном видео

#android #compose #kmp #cmp #jetpack #ui #nav3

🚀 Input MotionPrediction 1.0.0 — снижаем задержки ввода с предсказанием жестов

Google выпустила первую стабильную версию Input MotionPrediction — библиотеку для уменьшения задержек при вводе за счет предсказания будущих MotionEvents.

Что это решает?
👉 Уменьшает perceived latency (воспринимаемую задержку) при взаимодействии с UI
👉 Предсказывает будущие координаты касания для более плавного отклика
👉 Особенно полезно для рисования, игр и жестовой навигации

// Создаем предсказатель
val predictor = MotionEventPredictor()

// Записываем полученные события
predictor.record(motionEvent)

// Получаем предсказанные события на N миллисекунд вперед
val predictedEvents = predictor.predict(milliseconds)

Ключевые особенности:
👉 Автоматически использует системные API предсказания если доступны
👉 Встроенный алгоритм предсказания
👉 Поддерживает ориентацию и наклон стилуса
👉 Оптимизирован по памяти и производительности

‼️ Кому будет полезна:
- Приложения для рисования и скетчей
- Игры с тач-управлением
- Сложные жестовые интерфейсы
- Любой UI, где важна мгновенная реакция на касания

#Jetpack #Android #UI #Производительность

🚀 Вышла SwipeRefreshLayout 1.2.0 — важные исправления для "pull-to-refresh"

Google выпустил обновление библиотеки SwipeRefreshLayout до версии 1.2.0. В основном релиз содержит исправления багов, которые улучшают работу жеста обновления.

Исправление визуальных артефактов
- Иконка обновления теперь полностью убирается после сворачивания (исчезает её тень)
- Сброс всех свойств иконки после сворачивания, чтобы она корректно отображалась при следующем вызове

👍Корректная обработка Touch-событий. Метод requestDisallowInterceptTouchEvent() теперь работает как в обычных ViewGroup. Это важно для вложенных scroll-контейнеров.

Если новое поведение с обработкой touch-событий ломает ваше приложение, можно вернуть старое через:

swipeRefreshLayout.setLegacyRequestDisallowInterceptTouchEventEnabled(true)

#AndroidDev #Jetpack #UI