Material You in Jetpack Compose
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.
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:
@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!