Mobile Compose
2.99K subscribers
152 photos
3 videos
336 links
Твой главный путеводитель в мир Jetpack Compose и Compose Multiplatform.

Android XR: @android_xr
Личный блог: @grigorievdy_blog

Автор: @grigorievdy

Поддержать канал: https://t.me/mobile_compose?boost
Download Telegram
#Article #Habr #UI #Animation #Multiplatform #Compose

🎨 Анимация смены темы в Compose Multiplatform

Врываемся в 2026 с полезным контентом.
Все вы видели анимацию смены темы в Telegram.
А видели ли вы такую же реализацию в Compose Multiplatform? Теперь — видели.

📖 Читать статью

😼 Ссылка на библиотеку в Github

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥65❤‍🔥1
#Release #Compose #Changelog

😇 Релиз Compose библиотек (14.01.2026)

🔵 Animation 1.10.1/1.11.0-alpha03
🔵 Foundation 1.10.1/1.11.0-alpha03
🔵 Material 1.10.1/1.11.0-alpha03
🔵 Runtime 1.10.1/1.11.0-alpha03
🔵 UI 1.10.1/1.11.0-alpha03

▫️Remote 1.0.0-alpha02
▫️Material 3 1.5.0-alpha12
Material3 Adaptive 1.3.0-alpha06
▫️Wear Compose 1.6.0-alpha08

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍92🔥11
Forwarded from Android Live 🤖
Styles API в Jetpack Compose 🚀

Интересного завезли. В Compose появился экспериментальный API для работы со стилями, который делает их изменение гораздо удобнее.

Сейчас работа с динамическими стилями требует немало ручного труда. И хотя InteractionSource неплохо приспособлен для этих задач, Styles API упрощает процесс в разы.

Ниже приведён пример кнопки, которая меняет цвет при состояниях hovered и pressed.


@Composable
fun InteractiveButton(onClick: () -> Unit) {
ClickableStyleableBox(
onClick = onClick,
style = {
background(Color.Green)
size(150.dp)
hovered { animate { background(Color.Yellow) } }
pressed { animate { background(Color.Red) } }
}
)
}


Выглядит неплохо, посмотрим, что будет дальше. Детали тут.
8👍4🔥4🤣21
#Release #Compose #Changelog

😇 Релиз Compose библиотек (28.01.2026)

🔵 Animation 1.10.2/1.11.0-alpha04
🔵 Foundation 1.10.2/1.11.0-alpha04
🔵 Material 1.10.2/1.11.0-alpha04
🔵 Runtime 1.10.2/1.11.0-alpha04
🔵 UI 1.10.2/1.11.0-alpha04

▫️Remote 1.0.0-alpha03
▫️Material 3 1.5.0-alpha13
Material3 Adaptive 1.3.0-alpha07
▫️Wear Compose 1.6.0-alpha09
▫️XR Compose 1.0.0-alpha10

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍43
#Release #Compose #Changelog

😇 Релиз Compose библиотек (11.02.2026)

🔵 Animation 1.10.3/1.11.0-alpha05
🔵 Foundation 1.10.3/1.11.0-alpha05
🔵 Material 1.10.3/1.11.0-alpha05
🔵 Runtime 1.10.3/1.11.0-alpha05
🔵 UI 1.10.3/1.11.0-alpha05

▫️Remote 1.0.0-alpha04
▫️Material 3 1.5.0-alpha14
Material3 Adaptive 1.3.0-alpha08
▫️Wear Compose 1.6.0-alpha10
Navigation3 1.0.1 / 1.1.0-alpha04

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62🔥1
🎨 Master Compose Shared Element Transitions: A Smooth UI Journey

В статье разобрана реализация Shared element transitions в Compose с использованием SharedTransitionScope и Modifier.sharedElement. Ключевое требование — согласованные и стабильные ключи на обоих экранах, иначе переход работать не будет.

Также рассмотрены типичные ошибки:
▫️нестабильные идентификаторы
▫️некорректная организация scope’ов
▫️порядок навигации

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

🌐 Читать статью

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍102🔥21
#Release #Compose #Changelog

😇 Релиз Compose библиотек (25.02.2026)

🔵 Animation 1.10.4/1.11.0-alpha06
🔵 Foundation 1.10.4/1.11.0-alpha06
🔵 Material 1.10.4/1.11.0-alpha06
🔵 Runtime 1.10.4/1.11.0-alpha06
🔵 UI 1.10.4/1.11.0-alpha06

▫️Remote 1.0.0-alpha05
▫️Material 3 1.5.0-alpha15
Material3 Adaptive 1.3.0-alpha09
▫️Wear Compose 1.6.0-beta01
Navigation3 1.1.0-alpha05
XR Compose 1.0.0-alpha11
XR Material3 Compose 1.0.0-alpha15

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍3🔥1
Forwarded from In AsyncTask We Trust
😁403👍2
#Release #Compose #Changelog

😇 Релиз Compose библиотек (11.03.2026)

🔵 Animation 1.10.5/1.11.0-beta01
🔵 Foundation 1.10.5/1.11.0-beta01
🔵 Material 1.10.5/1.11.0-beta01
🔵 Runtime 1.10.5/1.11.0-beta01
🔵 UI 1.10.5/1.11.0-beta01

▫️Remote 1.0.0-alpha06
▫️Wear Compose 1.6.0-rc01
Navigation3 1.1.0-beta01

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥41
This media is not supported in your browser
VIEW IN TELEGRAM
#Article #UI #Animation

😇 Two-dimensional scrolling: scrollable2D, draggable2D

В документации Android появились подробности про 2D-скроллинг в Jetpack Compose. Если раньше для перемещения контента по обеим осям приходилось комбинировать verticalScroll и horizontalScroll (что не всегда работало гладко), то теперь есть нативные модификаторы scrollable2D и draggable2D.

Если коротко:

▫️Modifier.scrollable2D: Идеален для контейнеров с контентом, который больше экрана (карты, таблицы, фото). Главная фишка — поддержка fling (инерции) и нативного вложенного скроллинга. То есть, если вы доскроллили до края карты, скролл может бесшовно передаться родителю.

▫️Modifier.draggable2D: Более легковесный вариант для перемещения конкретных UI-элементов. В отличие от первого, здесь нет инерции — элемент останавливается ровно там, где вы оторвали палец. Подойдет для кастомных drag-n-drop анимаций.

Важный нюанс: в отличие от высокоуровневых LazyColumn, эти модификаторы не двигают контент за вас «из коробки». Они лишь отдают дельту смещения, которую нужно вручную применять через graphicsLayer или offset.

😇 Читать статью

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
19👍6❤‍🔥4
Maxимальные замедления

Судя по последним новостям, в ближайшее время Telegram в РФ может начать работать ещё хуже — либо перестать работать вовсе. Однако мы все взрослые и понимаем, что на любое действие рано или поздно находится противодействие.

Поэтому как оно появится — возвращайтесь, буду ждать вас тут с новой пачкой новостей о Compose.😉
Канал никуда переезжать не будет.

© Григорьев Дмитрий

#Offtop
1👍8426🔥7💯4❤‍🔥1
#Release #Compose #Changelog

😇 Релиз Compose библиотек (25.03.2026)

🔵 Animation 1.10.6/1.11.0-beta02
🔵 Foundation 1.10.6/1.11.0-beta02
🔵 Material 1.10.6/1.11.0-beta02
🔵 Runtime 1.10.6/1.11.0-beta02
🔵 UI 1.10.6/1.11.0-beta02

▫️Remote 1.0.0-alpha07
Material 3 1.5.0-alpha16
▫️Wear Compose 1.6.0
Navigation3 1.1.0-rc01
XR Compose 1.0.0-alpha12
XR Material3 Compose 1.0.0-alpha16

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍2🔥2
#Release #Compose #Changelog

😇 Релиз Compose библиотек (08.04.2026)

🔵 Animation 1.11.0-rc01
🔵 Foundation 1.11.0-rc01
🔵 Material 1.11.0-rc01
🔵 Runtime 1.11.0-rc01
🔵 UI 1.11.0-rc01

Remote 1.0.0-alpha08
Material 3 1.5.0-alpha17
Material3 Adaptive 1.3.0-alpha10
Wear Compose 1.6.1/1.7.0-alpha01
Navigation3 1.1.0/1.2.0-alpha01

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍43🔥2
#Release #Compose #Changelog

😇 Релиз Compose библиотек (22.04.2026)

🔵 Animation 1.11.0/1.12.0-alpha01
🔵 Foundation 1.11.0/1.12.0-alpha01
🔵 Material 1.11.0/1.12.0-alpha01
🔵 Runtime 1.11.0/1.12.0-alpha01
🔵 UI 1.11.0/1.12.0-alpha01

Remote 1.0.0-alpha09
Material 3 1.5.0-alpha18
Navigation3 1.1.1/1.2.0-alpha02

🎨 Список всех изменений

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍3🔥3💯1
This media is not supported in your browser
VIEW IN TELEGRAM
#Compose #UI #Animation #Debugging

🎨 Compose 1.11.0 — Визуальная отладка анимаций

Shared Elements анимации и работа с Modifier.animatedBounds стали прозрачнее благодаря инструменту LookaheadAnimationVisualDebugging.

Ключевые возможности:

▫️Прямо в Runtime можно увидеть траектории движения объектов и их целевые границы (target bounds).
▫️Визуализация помогает понять, почему элемент «прыгает» или обрезается при переходе между экранами.

Инструмент полезен в первую очередь для сложных UI-переходов, где раньше приходилось полагаться только на логи и интуицию.

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥631
Mobile Compose
#Compose #UI #Animation #Debugging 🎨 Compose 1.11.0 — Визуальная отладка анимаций Shared Elements анимации и работа с Modifier.animatedBounds стали прозрачнее благодаря инструменту LookaheadAnimationVisualDebugging. Ключевые возможности: ▫️Прямо в Runtime…
Пример использования:
LookaheadAnimationVisualDebugging(
overlayColor = Color(0x4AE91E63),
isEnabled = true,
multipleMatchesColor = Color.Green,
isShowKeylabelEnabled = false,
unmatchedElementColor = Color.Red,
) {
SharedTransitionLayout {
CompositionLocalProvider(
LocalSharedTransitionScope provides this,
) {
// your content
}
}
}
👍53🔥1
#Compose #UI #Tooling

🎨 Compose 1.11.0 — Preview wrappers

Compose 1.11.0 делает шаг навстречу ментальному здоровью разработчиков и добавляет PreviewWrappers. В чем суть: раньше для каждого превью приходилось вручную писать обертку вроде AppTheme { ... }. Теперь можно создать один универсальный класс-обертку.

Как это работает:
▫️Реализуете интерфейс PreviewWrapper, где в методе Wrap описываете нужный контекст (тему, CompositionLocals и т.д.).
▫️Вешаете аннотацию PreviewWrapperProvider на функцию превью.

class ThemeWrapper: PreviewWrapper {
@Composable
override fun Wrap(content: @Composable (() -> Unit)) {
JetsnackTheme {
content()
}
}
}

@PreviewWrapperProvider(ThemeWrapper::class)
@Preview
@Composable
private fun ButtonPreview() {
Button(onClick = {}) {
Text(text = "Demo")
}
}


Плюсы:
▫️Чистый код: Превью-функции содержат только код самого компонента.
▫️Масштабируемость: Отлично работает с MultiPreview. Можно один раз настроить обертку для темной/светлой темы или разных локалей.
▫️Единообразие: Весь дизайн-код превью теперь живет в одном месте, а не размазан по проекту.

Важно — чтобы это заработало, помимо версии Compose, необходимо обновить и Android Studio до актуальной версии.

🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥63🤔2
📣 Розыгрыш 2 билетов на Mobius 🎨

😀 До старта весеннего Mobius 2026 осталось совсем немного, а значит пришло время по традиции разыграть 2 билета на конференцию.

Условия просты — необходимо быть подписанным на @mobile_compose и @grigorievdy_blog

Результаты подведем 8 мая в 10:00 (GMT+3)
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍3🔥1
#Compose #Performance #Recomposition

🎨 Compose 1.11.0 — Новая реализация SlotTable

В Runtime Compose завезли новую экспериментальную реализацию SlotTable на базе LinkBuffer. Новая реализация теперь эффективнее обрабатывает точечные правки в дереве компонентов (random edits). Как итог — более шустрый динамический UI и меньший расход ресурсов памяти

Как потестить?

На данный момент новая реализация выключена по умолчанию. Если вы готовы к экспериментам и хотите проверить профит на своем проекте, её можно активировать вручную через специальный флаг:
ComposeRuntimeFlags.isLinkBufferComposerEnabled = true


🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍631
#Compose #Performance #UI

🎨 Compose 1.11.0 — MediaQuery API

Представлен новый экспериментальный MediaQuery API. Это попытка стандартизировать адаптивную верстку без нагромождения проверок WindowSizeClass.

Ключевые фичи:
▫️Отслеживание не только размера окна, но и типа клавиатуры, точности указателя (перо vs палец) и положения складных устройств.
▫️derivedMediaQuery: Специальный механизм для оптимизации обновлений при высокой частоте изменения сигналов.

До MediaQuery API:
@Composable
fun isTabletopPosture(
context: Context = LocalContext.current
): Boolean {
val windowLayoutInfo by
WindowInfoTracker
.getOrCreate(context)
.windowLayoutInfo(context)
.collectAsStateWithLifecycle(null)

return windowLayoutInfo.displayFeatures.any { displayFeature ->
displayFeature is FoldingFeature &&
displayFeature.state == FoldingFeature.State.HALF_OPENED &&
displayFeature.orientation == FoldingFeature.Orientation.HORIZONTAL
}
}

@Composable
fun VideoPlayer() {
if(isTabletopPosture()) {
TabletopLayout()
} else {
FlatLayout()
}
}


С MediaQuery API:

@OptIn(ExperimentalMediaQueryApi::class)
@Composable
fun VideoPlayer() {
if (mediaQuery { windowPosture == UiMediaScope.Posture.Tabletop }) {
TabletopLayout()
} else {
FlatLayout()
}
}


🎨 Mobile Compose 💬 Чат канала
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍64