How To Use Navcontroller To Setup Animation

Adding animations to your Jetpack Etch navigation

With Jetpack Compose going stable in a 1.0 release recently yous might exist tempted to requite it a become. If yous opt to go for the compose-navigation component, you will withal observe that the ability to add different animations between your screens is non there. What yous are left with is the post-obit experience.

If you encounter this as a deal breaker, there is light at the end of the tunnel. Accompanist, a project with various etch utilities, recently added support for animations together with the 2.4.0-alpha06 version of navigation-compose. To exist able to use the experimental animation back up make sure your gradle file has the 2 following dependencies.

implementation "androidx.navigation:navigation-compose:2.four.0-alpha06" implementation "com.google.accompanist:accompanist-navigation-blitheness:0.16.0"

You should now accept admission to the new AnimatedNavHost composable besides as a new variant of the composable extension part used with the NavGraphBuilder and the new rememberAnimatedNavController function. Swap your old lawmaking with these in your code to start getting the custom animated goodness.

A graph without animation would wait like this:

With rememberNavController() exchanged for rememberAnimatedNavController(), NavHost(…) exchanged for AnimatedNavHost and finally replace the import of androidx.navigation.compose.composable with com.google.accompanist.navigation.animation.composable (note that it'south the composable with a minor c not the composable with a big C from androidx.compose.runtime. Composable )

We then end upwardly with lawmaking that looks like this:

Discover the addition, of the @ExperimentalAnimationApi annotation as well as we are using experimental api's, but your android studio will probably allow you know if you haven't added information technology already.

With the usage of the new experimental composable(…) office we go access to 4 more arguments, enterTransition , exitTransition , popEnterTransition and popExitTransition .

These are going to be familiar if y'all accept previously set up animations in the old xml globe of the jetpack navigation component.

These argument takes transition objects and we tin can then create a composable that looks like this:

The neat thing about these is that the animationSpec are normal compose animation specs so you can use both physically spring based animations and interpolation based animations like this:

Tip: if yous desire a nice editor of bezier curves bank check out https://cubic-bezier.com/

In the end y'all are then left with the ability to make navigation like this:

Go along in mind that these API's are experimental and then exist cautious near using them in a product app for now.

For a total case both with and without animations, check out the repository for this mail service on github.

Subscribe Here!

Sign up to Tech Insights and continue track with everything app. You'll be among the very first to know what'due south going down in the wonderful world of iOS and Android.

Source: https://shortcut.io/tech/adding-animations-to-your-jetpack-compose-navigation/

Posted by: shotwellenbraing.blogspot.com