Material You in Jetpack Compose

May 16 2022 , Kotlin 1.6, Android 12.0, Android Studio 2021.1.1 Kotlin 1.6, Android 12.0, Android Studio 2021.1.1

Learn how to use the amazing features that come with the new Material Design 3 to create better-looking apps with a more personal feel. By Harun Wangereka.

5 (5) · 1 Review

Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.
Contents

Contents

Hide contents

Material You in Jetpack Compose

25 mins

Adding Transitions to Event Input Screen

Next, add the Event Input Screen destination by replacing // TODO Add Event Input Screen Composable with: 

composable(Screens.EventInputScreen.route,
  enterTransition = {
    if (initialState.destination.route == Screens.HomeScreen.route) slideIntoContainer(
      AnimatedContentScope.SlideDirection.Left,
      animationSpec = tween(600)
    )
    else null
  },
  exitTransition = {
    if (targetState.destination.route == Screens.HomeScreen.route) slideOutOfContainer(
      AnimatedContentScope.SlideDirection.Right,
      animationSpec = tween(600)
    )
    else null
  }
) {
  EventScreen(navController, eventsViewModel)
}

Similar to the Home Screen destination, you add enterTransition and exitTransition, but in opposite directions.

Your app is now ready to use these transitions while moving from one destination to another. You only need to use the NavController from Accompanist.

Head to presentation/screens/HomeActivityScreen.kt and replace val navController = rememberNavController() with:

val navController = rememberAnimatedNavController()

Resolve the import error by pressing Option-Enter on Mac or Alt-Enter on Windows PC. The code above creates a NavHostController that supports navigation animations that aren’t yet supported by the Compose Navigation library.

Well done!

Build and run your app. Tap Create and fill in the event details. After that, you should be able to see all the various transitions you’ve added and the animations too:

App with animations and screen transitions

Note: At the time of writing, Material Design 3 and other APIs used in this tutorial are experimental and could change at any time. All the APIs are marked with the @ExperimentalAnimationApi annotation.

Where to Go From Here?

Download the final project by clicking Download Materials at the top or bottom of the tutorial.

Congratulations on learning Material Design 3, how to apply dynamic colors to your apps, and how to use Material Motion to enrich the user experience for your app!

To find out more about Material Design 3, follow this link.

If you want to know more about Material Motion, check out the official documentation.

You can do a lot in terms of adding animations. Since you now have the basics to get you started, you can explore how to add more animations and personalization to your app. To learn more about Jetpack Compose Animations, check out the official documentation.

Hopefully, you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!