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

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

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

Источник изображения:developer.android.com

Однако если Вам нравится работать с 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
)

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

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

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