Container transform

The container transform pattern is used when the transition includes a persistent container (buttons, lists or cards) that transitions into a detailed view.

Note: It’s a shared element transition but unlike the traditional shared element transition that works on a single shared element between both views container transformation changes bounds of start view to the bounds of end view which can be two different views on the same screen or a view on different fragment/activity.

Container transformation between two fragments

Container transformation is a shared element transition so first, we need to assign the transition name to both containers. In the first layout, it can be anything like a card, list item or a button. As shared element transition works on 1:1 mapping so we need to provide a unique transition name to each list item if we are working with lists. There is a great article about shared element mapping here.

In our example, we have a list of all the Eminem albums in recycler view so first, we assign the transition name to each item inside the adapter holder

itemBinding.root.transitionName = album.name . We are just setting a unique transition name to each row’s root item layout.

Now when we select an album we need to tell the end container about the item’s transition name and the shared view. We have SafeArgs and FragmentNavigator class which helps us in passing the bundle and shared view.

We are using the SafeArgs gradle plugin to pass the selected album and transition name to the album detail page. FragmentNavigatorExtras class takes Pair<View, String> as input. So we pass the shared view and transition name to it. All the internal work is done by Navigation Component.

Check out this nice tutorial about more information on how to do a shared element transition with the navigation component on official developer docs.

To set the Shared Element Transition to the album detail screen we create an object of MaterialContainerTransform inside OnCreate() and set it to sharedElementEnterTransition

We also have to set the transition name to the container of album detail

We have plenty of options to customize our container transformation like fadeMode , scrimColor , fitMode , pathMotion , etc.

Note: Currently there is an issue with sharedElementReturnTransition . The container doesn’t shrink its bound when pressed back.

Container transformation between two views

We can use container transformation to transform one view to another by setting our startView and endView in the same layout and changing their visibility with TransitionManager.beginDelayedTransition .