#Article #Habr #UI #Animation #Multiplatform #Compose
🎨 Анимация смены темы в Compose Multiplatform
Врываемся в 2026 с полезным контентом.
Все вы видели анимацию смены темы в Telegram.
А видели ли вы такую же реализацию в Compose Multiplatform? Теперь — видели.
📖 Читать статью
😼 Ссылка на библиотеку в Github
🎨 Mobile Compose 💬 Чат канала
♾
Врываемся в 2026 с полезным контентом.
Все вы видели анимацию смены темы в Telegram.
А видели ли вы такую же реализацию в Compose Multiplatform? Теперь — видели.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥6❤5❤🔥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
👍9❤2🔥1 1
Forwarded from Android Live 🤖
Styles API в Jetpack Compose 🚀
Интересного завезли. В Compose появился экспериментальный API для работы со стилями, который делает их изменение гораздо удобнее.
Сейчас работа с динамическими стилями требует немало ручного труда. И хотя
Ниже приведён пример кнопки, которая меняет цвет при состояниях
Выглядит неплохо, посмотрим, что будет дальше. Детали тут.
Интересного завезли. В 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) } }
}
)
}
Выглядит неплохо, посмотрим, что будет дальше. Детали тут.
Dove Letter
Jetpack Compose Style API: Reusable Styles for Composables
How the experimental Compose Style API lets you define reusable, typed style objects for composables. Examples, use cases, and tradeoffs inside.
❤8👍4🔥4🤣2 1
#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
👍4❤3
#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
👍6❤2🔥1
В статье разобрана реализация Shared element transitions в Compose с использованием SharedTransitionScope и Modifier.sharedElement. Ключевое требование — согласованные и стабильные ключи на обоих экранах, иначе переход работать не будет.
Также рассмотрены типичные ошибки:
Основной акцент сделан на архитектурной корректности — при правильной настройке переходы улучшают связность интерфейса без лишней сложности.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤2🔥2 1
#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
#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🔥4❤1
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 💬 Чат канала
♾
В документации Android появились подробности про 2D-скроллинг в Jetpack Compose. Если раньше для перемещения контента по обеим осям приходилось комбинировать verticalScroll и horizontalScroll (что не всегда работало гладко), то теперь есть нативные модификаторы scrollable2D и draggable2D.
Если коротко:
Важный нюанс: в отличие от высокоуровневых LazyColumn, эти модификаторы не двигают контент за вас «из коробки». Они лишь отдают дельту смещения, которую нужно вручную применять через graphicsLayer или offset.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19👍6❤🔥4
Maxимальные замедления
Судя по последним новостям, в ближайшее время Telegram в РФ может начать работать ещё хуже — либо перестать работать вовсе. Однако мы все взрослые и понимаем, что на любое действие рано или поздно находится противодействие.
Поэтому как оно появится — возвращайтесь, буду ждать вас тут с новой пачкой новостей о Compose.😉
Канал никуда переезжать не будет.
© Григорьев Дмитрий
#Offtop
Судя по последним новостям, в ближайшее время Telegram в РФ может начать работать ещё хуже — либо перестать работать вовсе. Однако мы все взрослые и понимаем, что на любое действие рано или поздно находится противодействие.
Поэтому как оно появится — возвращайтесь, буду ждать вас тут с новой пачкой новостей о Compose.😉
Канал никуда переезжать не будет.
© Григорьев Дмитрий
#Offtop
1👍84❤26🔥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
👍4❤3🔥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 💬 Чат канала
♾
Shared Elements анимации и работа с Modifier.animatedBounds стали прозрачнее благодаря инструменту LookaheadAnimationVisualDebugging.
Ключевые возможности:
Инструмент полезен в первую очередь для сложных UI-переходов, где раньше приходилось полагаться только на логи и интуицию.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥6❤3 1
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
}
}
}
👍5❤3🔥1
#Compose #UI #Tooling
🎨 Compose 1.11.0 — Preview wrappers
Compose 1.11.0 делает шаг навстречу ментальному здоровью разработчиков и добавляет PreviewWrappers. В чем суть: раньше для каждого превью приходилось вручную писать обертку вроде
Как это работает:
▫️ Реализуете интерфейс PreviewWrapper, где в методе Wrap описываете нужный контекст (тему, CompositionLocals и т.д.).
▫️ Вешаете аннотацию PreviewWrapperProvider на функцию превью.
Плюсы:
▫️ Чистый код: Превью-функции содержат только код самого компонента.
▫️ Масштабируемость: Отлично работает с MultiPreview. Можно один раз настроить обертку для темной/светлой темы или разных локалей.
▫️ Единообразие: Весь дизайн-код превью теперь живет в одном месте, а не размазан по проекту.
Важно — чтобы это заработало, помимо версии Compose, необходимо обновить и Android Studio до актуальной версии.
🎨 Mobile Compose 💬 Чат канала
♾
Compose 1.11.0 делает шаг навстречу ментальному здоровью разработчиков и добавляет PreviewWrappers. В чем суть: раньше для каждого превью приходилось вручную писать обертку вроде
AppTheme { ... }. Теперь можно создать один универсальный класс-обертку.Как это работает:
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")
}
}Плюсы:
Важно — чтобы это заработало, помимо версии Compose, необходимо обновить и Android Studio до актуальной версии.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥6❤3🤔2
📣 Розыгрыш 2 билетов на Mobius 🎨
😀 До старта весеннего Mobius 2026 осталось совсем немного, а значит пришло время по традиции разыграть 2 билета на конференцию.
Условия просты — необходимо быть подписанным на @mobile_compose и @grigorievdy_blog
Результаты подведем 8 мая в 10:00 (GMT+3)
Условия просты — необходимо быть подписанным на @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 и меньший расход ресурсов памяти
Как потестить?
На данный момент новая реализация выключена по умолчанию. Если вы готовы к экспериментам и хотите проверить профит на своем проекте, её можно активировать вручную через специальный флаг:
🎨 Mobile Compose 💬 Чат канала
♾
В Runtime Compose завезли новую экспериментальную реализацию SlotTable на базе LinkBuffer. Новая реализация теперь эффективнее обрабатывает точечные правки в дереве компонентов (random edits). Как итог — более шустрый динамический UI и меньший расход ресурсов памяти
Как потестить?
На данный момент новая реализация выключена по умолчанию. Если вы готовы к экспериментам и хотите проверить профит на своем проекте, её можно активировать вручную через специальный флаг:
ComposeRuntimeFlags.isLinkBufferComposerEnabled = true
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍6❤3 1
#Compose #Performance #UI
🎨 Compose 1.11.0 — MediaQuery API
Представлен новый экспериментальный MediaQuery API. Это попытка стандартизировать адаптивную верстку без нагромождения проверок WindowSizeClass.
Ключевые фичи:
▫️ Отслеживание не только размера окна, но и типа клавиатуры, точности указателя (перо vs палец) и положения складных устройств.
▫️ derivedMediaQuery: Специальный механизм для оптимизации обновлений при высокой частоте изменения сигналов.
До MediaQuery API:
С MediaQuery API:
🎨 Mobile Compose 💬 Чат канала
♾
Представлен новый экспериментальный MediaQuery API. Это попытка стандартизировать адаптивную верстку без нагромождения проверок WindowSizeClass.
Ключевые фичи:
До 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()
}
}
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍6❤4
Mobile Compose
📣 Розыгрыш 2 билетов на Mobius 🎨 😀 До старта весеннего Mobius 2026 осталось совсем немного, а значит пришло время по традиции разыграть 2 билета на конференцию. Условия просты — необходимо быть подписанным на @mobile_compose и @grigorievdy_blog Результаты…
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥2👍1