material-motion-compose

Introduction: Material Motion for Jetpack Compose
More: Author   ReportBugs   
Tags:

logo

Jetpack Compose library for implementing motion system in Material Components for Android.

Installation

Add Jitpack repository to your project's build.gradle:

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

And add the dependency. Depend on the latest version of the library.

dependencies {
    implementation 'com.github.fornewid:material-motion-compose:<version>'
}

Usage

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

Shared axis

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

// or

MaterialMotion(
    targetState = screen,
    motionSpec = materialSharedAxis(
        axis = Axis.X,
        forward = true,
        slideDistance = 30.dp // (optional)
    )
) { 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 (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialFade(
    targetState = screen
) { newScreen ->
    // composable according to screen
}

// or

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

Elevation scale

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
MaterialMotion(
    targetState = screen,
    motionSpec = materialElevationScale(growing = false)
) { newScreen ->
    // composable according to screen
}
ElevationScale

Hold

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

Crossfade

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

// or

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

or use Crossfade in compose-animation.

Crossfade

More...

  • alpha()
  • rotate()
  • scale()
  • translate()

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

val (screen, onScreenChanged) = remember { mutableStateOf(...) }
val motionSpec = when (screen) {
   ... -> fadeThrough()
   ... -> sharedAxisY(forward = true)
   ...
}
MaterialMotion(
    targetState = screen,
    motionSpec = motionSpec,
    pop = false // whether motion contents are rendered in reverse order.
) { newScreen ->
    // composable according to screen
}

// or

MaterialMotion(
    targetState = screen,
    enterMotionSpec = motionSpec,
    exitMotionSpec = motionSpec,
    pop = false // whether motion contents are rendered in reverse order.
) { newScreen ->
    // composable according to screen
}
Demo

If you want to change motion durations:

You need to call the ProvideMaterialMotions function with custom durations and wrap your content.

This would typically be done near the top level of your composable hierarchy.

setContent {
  MaterialTheme {
    ProvideMaterialMotions(
        durations = Durations(...)
    ) {
      // your content
    }
  }
}

License

Licensed under the Apache 2.0 license. See LICENSE for details.

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools