​​🚀 Вышел 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