Transitions in Android Navigation Architecture Component

Transitions in Android Navigation Architecture ComponentSergio BeldaBlockedUnblockFollowFollowingMar 12The Navigation Architecture Component helps you implement common, but complex navigation requirements in your app, enabling you to more easily provide consistent and predictable experiences for your users.

This component also provides support for displaying transitions and share elements in the transitions between fragments.

Transitions occur when users move between fragments, such as from a list screen to a detail screen.

The use of motion is a good choice to guide users between two screens in your app.

They help users orient themselves by expressing your app’s hierarchy, using movement to indicate how elements are related to one another.

For example, when an element expands to fill the entire screen, the expansion expresses that the new window is a child element or specifies the details.

The screen from which it expanded is its parent element.

Navigation Architecture Component allows users to implement transitions between fragments and supports adding shared element transitions between destinations.

Shared element transitions are supplied programmatically rather than through your navigation XML file, as they require referencing the View instances that you wish to include in the shared element transition.

ImplementationFor this example I’ve implemented a simple transition between a fragment that contains an element and the detail fragment for this element.

I’ve included the following dependency:implementation 'androidx.



0-rc02'This library needs that your project migrate to AndroidX.

I’ve used the Android KTX version of this library.

If you don’t want to use AndroidX, you can implement android.




0-rc02 instead.

The first step is create the fragments and define the relationship between them.

I’ve created two fragments: ParentFragment and DetailFragment.

The two fragments are linked and the navigation graph presents the following aspect.

The first fragment has a MaterialCard with an image which will be passed to the next fragment.

The ImageView component has an attribute called transitionName, which has to be the same in the two layouts.

Now, we are going to implement the navigate action.

The variable extras contains the Extras parameter of the navigate() call.

I’m adding the sharedElement imageView, whose transitionName is “imageView”.

Then I call the navigate function.

Then, I override the function onCreate on the DetailFragment class for display the animation.

Transition using a Shared ElementWe could use the Glide library for load images from a URL.

The only thing that we have to do is load the image in the two fragments from the same URL.





into(imageView)The URL can be passed between fragments using a Bundle Object and pass it in the navigate call or as a destination argument in the navigation graph.

ExampleI’ve implemented the next transition using these concepts and the Glide library.

Link to the sample:serbelga/android_navigation_shared_elementsContribute to serbelga/android_navigation_shared_elements development by creating an account on GitHub.



. More details

Leave a Reply