Material Motion Core¶

Material Motion Core is a Jetpack Compose library for implementing motion system in Material Components for Android.

Usage¶

This library provides support for motion patterns defined in the Material spec.

Shared axis¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialSharedAxisX(
    targetState = screen,
    forward = true,
    slideDistance = 30.dp // (optional)
) { newScreen ->
    // composable according to screen
}

// or

val slideDistance = rememberSlideDistance(slideDistance = 30.dp)
MaterialMotion(
    targetState = screen,
    motionSpec = {
        materialSharedAxisX(forward = forward, slideDistance = slideDistance)
    },
    pop = forward.not()
) { newScreen ->
    // composable according to screen
}

Axis X	Axis Y	Axis Z

Fade through¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialFadeThrough(
    targetState = screen
) { newScreen ->
    // composable according to screen
}

// or

MaterialMotion(
    targetState = screen,
    motionSpec = { materialFadeThrough() }
) { newScreen ->
    // composable according to screen
}

Fade Through

Fade¶

val (visible, onVisibleChanged) = remember { mutableStateOf(...) }
MaterialFade(
    visible = visible
) {
    // composable to show
}

Fade

Elevation scale¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialMotion(
    targetState = screen,
    motionSpec = { materialElevationScaleIn() with ... }
    // or
    motionSpec = { ... with materialElevationScaleOut() }
) { newScreen ->
    // composable according to screen
}

ElevationScale

Hold¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialMotion(
    targetState = screen,
    motionSpec = { holdIn() with ... }
    // or
    motionSpec = { ... with holdOut() }
) { newScreen ->
    // composable according to screen
}

Hold

CircularReveal¶

var visible: Boolean by remember { mutableStateOf(false) }
Box(
    modifier = Modifier.circularReveal(
        visible = visible,
        center = { fullSize ->
            Offset(x = 1f * fullSize.width, y = 0f * fullSize.height) // TopRight
        },
    )
) { ... }

CircularReveal

If you want to use different motions depending on the state:¶

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
val slideDistance = rememberSlideDistance(slideDistance = 30.dp)
MaterialMotion(
    targetState = screen,
    motionSpec = {
        when (targetState) {
           ... -> materialSharedAxisY(forward = true, slideDistance = slideDistance)
           ... -> materialFadeThroughIn() with materialFadeThroughOut()
           ...
        }
    },
    pop = false // whether motion contents are rendered in reverse order.
) { newScreen ->
    // composable according to screen
}

Demo

If you want to change motion durations:¶

Just pass a duration(=ms) directly when creating material motion.

For example:

val motionSpec = materialFadeThrough(durationMillis = 300)

Download¶

repositories {
    mavenCentral()
}

dependencies {
    implementation "io.github.fornewid:material-motion-compose-core:<version>"
}