Morph is an Android library, written in Kotlin, built to work together with Jetpack Compose.

Overview

Morph

Morph is an Android library, written in Kotlin, built to work together with Jetpack Compose. It allows you to transition any view to another view by animating the size and the opacity, resulting in a crossfade animation.

This library is currently supported on Android 5.0 Lollipop (21) and higher.

Usage

Add it to your project:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

dependencies {
    implementation 'com.github.mennovogel:morph:${morph.version}'
}

Usage in your project:

// Morph a box into another box when it is clicked.
@Preview
@Composable
fun MorphingBox() {
    var boxState by remember { mutableStateOf(BoxState.LARGE) }

    Morph(
        targetState = boxState,
        contentAlignment = Alignment.Center,
        // It is recommended to turn off fadePreviousState when using the same shape for all states
        fadePreviousState = false
    ) { crossFadeState ->
        when (crossFadeState) {
            BoxState.LARGE -> {
                Box(modifier = Modifier
                    .size(300.dp)
                    .background(color = MaterialTheme.colors.primary)
                    .clickable {
                        boxState = BoxState.SMALL
                    }
                )
            }
            BoxState.SMALL -> {
                Box(modifier = Modifier
                    .size(100.dp)
                    .background(color = MaterialTheme.colors.secondary)
                    .clickable {
                        boxState = BoxState.LARGE
                    }
                )
            }
        }
    }
}

private enum class BoxState {
    LARGE, SMALL
}

Licence

Morph is available under the MIT license.

You might also like...
A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose
A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose

SlideTodo A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose you can find source code here Getting Started allprojects

A Sudoku game for Android & Desktop written with Jetpack Compose Multiplatform
A Sudoku game for Android & Desktop written with Jetpack Compose Multiplatform

🚀 Compose Arcade A sample Kotlin Multiplatform Compose Sudoku app for Android & Desktop. Most code is shared between Android & Desktop using Kotlin M

Android browser written by jetpack compose
Android browser written by jetpack compose

TS Browser Top secret Browser! Download Features ■ Secret Mode Secret mode is a unique mode in TS browser. The secret mode is designed for browsing se

An Android imageboard client with the focus on maximum performance, fully written with Jetpack Compose

This project is an experimental playground to try implementing an application entirely with Jetpack Compose without using the old Android UI framework.

Formula 1 app to show current Standings from a REST API.Built using jetpack compose and kotlin.
Formula 1 app to show current Standings from a REST API.Built using jetpack compose and kotlin.

Formula1 Formula 1 app to show Standings fetching data from REST API 📸 Screenshots Tech Stack. Kotlin - Kotlin is a programming language that can run

A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Yet another ToDo app, but the UI completely written in Jetpack Compose!
Yet another ToDo app, but the UI completely written in Jetpack Compose!

Yet another ToDo app, but the UI completely written in Jetpack Compose!

Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose
Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose

✏️📌 Dynamic Badge with customizable features as max number before displaying with +, color, shadow, border, corner radius, font properties and more written with Jetpack Compose. Displays numbers either in circle or rounded rectangle shape based on badge count and selected threshold to transform from circle to rounded rectangle.

SpotifyCompose - Spotify UI written on Jetpack Compose
SpotifyCompose - Spotify UI written on Jetpack Compose

SpotifyCompose - Spotify UI written on Jetpack Compose

Releases(1.0)
Owner
Menno Vogel
Menno Vogel
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.

Pokedex Compose Pokedex Compose is an independent re-write of a similar project by the name of Pokedex. I am recreating the UI but I am doing it using

Jose Patino 4 May 1, 2022
📱 WhatsApp clone project demonstrates modern Android development built with Jetpack Compose and Stream Chat SDK for Compose.

This is a WhatsApp clone app built with Jetpack Compose and Stream Chat SDK for Compose. The purpose of this repository is to demonstrate below: Imple

Stream 689 Dec 25, 2022
A library that you can use in 4 different types toast written with Jetpack Compose

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

Talha Fakıoğlu 67 Dec 19, 2022
A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose.

Composable Sweet Toast A library that you can use in 4 different types(Success, Error, Warning, Info) written with Jetpack Compose. You can use this t

Talha Fakıoğlu 67 Dec 19, 2022
FirebaseSignInWithGoogle app it's written in Kotlin and shows a simple solution for implementing Firebase Authentication with Google, using Jetpack Compose on Android.

FirebaseSignInWithGoogle It's an app built with Kotlin that shows how to authenticate users with Firebase using Android Architecture Components and th

Alex 28 Dec 25, 2022
It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

Alex 10 Dec 29, 2022
An android library to highlight different features of the app built using Jetpack Compose.

An android library to highlight different features of the app built using Jetpack Compose.

Canopas Software 230 Dec 23, 2022
A LibrePhotos android client written using Jetpack Compose and all the latest Android technologies

UhuruPhotos. A LibrePhotos client UhuruPhotos is an Android client for LibrePhotos written using the latest Android technologies, like Jetpack Compose

Savvas Dalkitsis 190 Jan 3, 2023
A fully functional Android app built entirely with Kotlin and Jetpack Compose

Now in Android App [Work in progress ?? ] Learn how this app was designed and built in the design case study, architecture learning journey and modula

Android 9.1k Dec 30, 2022