Jetpack Navigation: Getting Started

Navigation component lets you add both property and view animations to actions. Adding Animations to Actions looks good from User Experience perspective. Navigation includes several default animations to get you started.

Also, In the starter project, there are xml files included for Slide In and Out animations. Click on res and expand anim folder.

These animation files include Translation animation. Since the animation is in horizontal direction, you tweak in values of fromXDelta and toXDeltaonly .

The other two parameters fromYDeltaand toYDelta remain 0% only and need not be specified. Now open your navigation graph.

Switch to Design View, select actionWelcomeFromLogin. Under Animations in Attributes section, there are four types.

enterAnim is the animation you get while Entering a Destination. exitAnimis the animation you get while Exiting a Destination.

popEnterAnim is the animation you get while Entering a Destination via a pop action. popExitAnim the animation you get while Exiting a Destination via a pop action.

Select slide_in_right for enterAnim. Select slide_out_left for exitAnim.

Select slide_in_left for popEnterAnim. Select slide_out_right for popExitAnim.

Switch to code view and confirm the Animation added for actionWelcomeFromLogin

Build and run the app.

Click Log In button. Enter detail and Login. Click Go to Welcome to see the animation in action. Awesome, and very easy . Isn’t it?