Играемся с формами M3 Expressive в Android приложении на View

Источник изображения: <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fm3.material.io%2Fstyles%2Fshape%2Foverview-principles&postId=4506733" rel="nofollow noreferrer noopener" target="_blank">m3.material.io</a>

В обновлении Material Design 3 Expressive была проведена работа над оживлением пользовательского интерфейса. Одним из нововведений стало добавление 35-ти новых форм, а также поддержка shape morphing между ними.

В Compose всё делается не сложно. Google подготовил подробную документацию, следуя которой можно делать разные забавные вещи.

Однако если Вам нравится работать с View больше, чем с Compose – реализовать подобное будет проблематично. Поэтому я решил попытаться упростить эту задачу и написать свою небольшую библиотеку для этого: ShapeMorphView.

Библиотека опубликована в Maven Central. Добавьте зависимость в build.gradle.kts:

dependencies { implementation("io.github.dertefter:shapemorphview:0.0.4") }

Добавьте ShapeMorphView в Ваш лайаут:

<com.dertefter.shapemorphview.ShapeMorphView android:id="@+id/smv" app:animationDuration="500" app:bgColor="?attr/colorPrimaryContainer" app:imageResource="@drawable/your_drawable" app:shape="SLANTED_SQUARE" />

animationDuration - длительность анимации морфинга между формами в миллисекундах
bgColor - цвет заливки фона фигуры
imageResource - позволяет установить изображение внутрь фигуры
shape - позволяет установить форму фигуры

Сейчас библиотека поддерживает все 35 форм из Material 3 Expressive: CIRCLE, SQUARE, SLANTED_SQUARE, ARCH, FAN, ARROW, SEMI_CIRCLE, OVAL, PILL, TRIANGLE, DIAMOND, CLAM_SHELL, PENTAGON, GEM, SUNNY, VERY_SUNNY, COOKIE_4, COOKIE_6, COOKIE_7, COOKIE_9, COOKIE_12, GHOSTISH, CLOVER_4, CLOVER_8, BURST, SOFT_BURST, BOOM, SOFT_BOOM, FLOWER, PUFFY, PUFFY_DIAMOND, PIXEL_CIRCLE, PIXEL_TRIANGLE, BUN, HEART

Сменить форму программно можно с помощью метода morphToShape:

shapeMorphView.morphToShape( newShape = Shape.ARCH, animate = true // c анимацией или без, по умолчанию true )

Установить случайную форму можно следующим образом:

shapeMorphView.morphToShape( newShape = shapeMorphView.getRandomShape(), animate = true )

Вы можете задавать скорость анимации программно:

shapeMorphView.animationDuration = 500

Вы можете выполнить смену изображения с морфингом до фигуры таким образом:

shapeMorphView.setDrawableResId( resId = R.drawable.your_drawable, newShape = shapeMorphView.getRandomShape(), animate = true )

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

На этом, собственно всё. Может быть моё творение кому-то пригодится.

Играемся с формами M3 Expressive в Android приложении на View

Подключение библиотеки

Использование

Формы

Морфинг форм

Скорость анимации морфинга

Изображения

Пример использования