Beautify your transition with Material Motion

Explorer new Material design library motion features

TL;DR

You can see how to implement material motion in my sample project.

mj-studio-sample/android-animation

MDC rescues us from confusing transition effects

Navigation in mobile development is not an easy one. We must consider how screens are pushed into the stack and pop with an appropriate order. Also, transition animation in the navigation process is an important thing. Within good transition animation, follows many guidelines of Google or Apple helps our users feel smooth UI/UX better.

In Android, there are some navigation technics. This is because of the distinction of screen types like Activity or Fragment. The used codes for transition Activity and Fragment are different.

The new Material motion API in MDC helps my confusion away and provides a simple API for the transition. The MDC motion API handles screen transition but also state transition like popup from fab usingConstraintLayout Scene transition.

In this article, we will explorer types of motion API with simple examples. Mainly, there are four type of transitions in Material Motion.

1. MaterialContainerTransform
2. MaterialElevationScale
3. MaterialSharedAxis
4. MaterialFadeThrough

Fragment transition type

There are several types of Fragment transition. I name screens as Screen A and Screen B. A is a beginning screen of transition and B is a detail screen.

• enterTransition: transition at the very first time of Fragment creation like onCreate. This transition should be set to screen B.
• returnTransition: transition at Fragment is completely destroyed like onDestroy. This transition should be set to screen B.
• exitTransition: transition at Fragment is temporarily hidden by other Fragments in the navigation stack. This transition should be set to screen A.
• reenterTransition: transition at Fragment is shown as topmost in the navigation stack again. This transition should be set to screen A.
• sharedElementEnterTransition: transition during shared element transition. this transition should be set to screen B. We can set this transition in onViewCreated screen B or screen A having screen B Fragment instance.
• sharedElementExitTransition: the reverse of sharedElementEnterTransition. The manual setting of this transition is not needed because if not set, the sharedElementEnterTransition is used automatically.

MaterialContainerTransform

MaterialContainerTransform is a kind of transition used to represent the relation between two views. Let me show an example.

MaterialContainerTransform requires similar codes with traditional shared element codes. MaterialMotionsFragment.kt in Github gist is screen A.

The RecyclerView will be redrawn during transition because of AAC navigation component will invoke onDestoryView and onCreateView of screen A at each transition. So we need to postpone the shared element transition until our RecylcerView is redrawn with Adapter. Use doOnPreDraw of KTX(Kotlin extension).

Don’t care about exitTransition or reenterTransition . The important thing is we must pass a View instance and transitionName of shared view to FragmentNavigationExtra . for AAC navigation component to identify what view should be shared between transition. The following code is about screen B. Don’t forget set unique transitionName for shared elements in both screens.

We have to set sharedElementEnterTransition as MaterialContainerTransform in onViewCreated in screen B. There are some important properties in MaterialContainerTransform .

• duration: duration of the transition
• setAllContainerColors: in shared element transition, the morphed containers should match their backgroundColor with the same color for smooth effect. This is a method for that.
• scrimColor: similar to container colors but includes bound of drawingView
• setPathMotion: we can provide path motion for transform path like an arc.

We can also apply Material motions to our view with TransitionManager in same screen.

MaterialElevationScale

MaterialElevationScale literally animates our screens with elevation(shadow) and scale.

MaterialSharedAxis

MaterialSharedAxis is useful when representing navigational or parallel transition like ViewPager. We can adjust axis orientation and direction. There are four combinations and can set with the constructor of MaterialSharedAxis .

MaterialFadeThrough

MaterialFadeThrough behaves like MaterialElevationScale. This animates two screens with a cross-fade effect.

Conclusion

In Android development, we’ve explored several material motion classes to implement a nice screen or view transitions. The Android material library is currently being upgraded in a rapid phase. I will write another article with a new awesome MDC API.

Thank you for reading 👏

• Github
• Website
• Medium Blog, Dev Blog, Naver Blog
• Contact: mym0404@gmail.com