Building a Beautiful Disney MVVM Android Application (1): Material Motion Systems.

Google’s material design team shared a new project including the motion system and it is released in the new version of the material design. The motion system is a set of transition patterns that can help implement motion much easier. The motion team introduces four transition patterns that handle the animation between views(components) and activity, fragment(fullscreen views): Container transform, Shared axis, Fade through and Fade. I’m gonna talk about how to use and implement this beautiful thing in the real world.

DisneyMotions

I chose the concepts before implementing the material motion: Disney
It is perfect to give the poster and character an appearance effect, and I made a public project. Check full source code on this repository. 💗

DisneyMotions@Github

Let’s deep dive into implementation!

Transition between Views (A to B)

There is a FloatingActionButton(A) and a CardView(B) in the same XML layout. And we will transform A into B when view A is clicked. Here are the basic steps for transition.

1. View A is VIBISBLE, View B is GONE or INVISIBLE.
2. If the View A is onClicked() -> make View A’s visibility to GONE or INVISIBLE, View B to VISIBLE. And begin the transition.
3. If the View B is onClicked() -> Reverse step 2.

These steps are quite simple. And now we can implement the step using only MaterialContainerTransform and TransitionManager.

MaterialContainerTransform can be used to morph between two Activities, Fragments, Views or a View to a Fragment. And the animation can be customized in a number of ways.

Here are customizable options the morphing animation:
setInterpolator, setDuration, setStartShapeAppearanceModel, setStartShapeAppearanceModel, setDrawingViewId, setScrimColor, setFadeMode, setFitMode setPathMotion, etc.

After creating an instance of the MaterialContainerTransform, begin transition using the TransitionManager.

Now you can transform the FloatingActionButton into a card view when the FAB is clicked. If you want to reverse step 2, make a new instance of the MaterialContainerTransform with reversed start and end view. (start view is card view and end view is FAB). And start to transition again using the new instance when the card view is clicked.

Transition between View to Activity (View A to Activity C)

There is a recyclerView in Activity A and we will transform one of an item in the recyclerView into Activity C. There are three steps basically but It is more difficult than transforming between views.

1. Setup setExitSharedElementCallback in Activity A.
2. Setup setEnterSharedElementCallback in Activity C. And set transition name.
3. Start Activity C when View A is clicked. And set the transition name.

There is no matter if the RecyclerView is in the Fragment. In this case, the Activity A should be the fragment’s parent activity.

Let’s start step by step.

We should set ExitSharedElementCallback on Activity A that has a RecyclerView using MaterialContainerTransformSharedElementCallback.
The most important thing is that must be set up before invoking super.onCreate().

Next is the step2.

We should set setEnterSharedElementCallback on Activity C using MaterialContainerTransformSharedElementCallback and set up MaterialContainerTransform to the window.

We must set the transition name as a string value to android.R.id.content. The example set the transition name to TransitionNameA. Same as step1, this step must be set up before invoking super.onCreate().

And last step3. We will start Activity C (PosterDetailActivity) in the ViewHolder when the itemView is clicked.

We should create an ActivityOptions using the makeSceneTransitionAnimation. The most important thing is we must use the same transition name with step2 TransitionNameA. And put the ActivityOptions as a bundle data when we call startActivity.

TransformationLayout

If you want to implement them easier or using Java language, you can check this library: TransformationLayout.

skydoves/TransformationLayout

I’m gonna introduce how to implement the transition using this library.

Transition between Views (A to B)

Here is the same example. There is a FloatingActionButton(A) and a CardView(B) in the same XML layout. And we will transform A into B when view A is clicked.

1. Wrap the FAB using TransformationLayout and set a target view.
2. call startTransform and finishTransform

That’s all!

You can set the MaterialContainerTransform’s attributes on the XML layout, and bind a targetView using a resource id in the same XML layout file.

We can bind a targetView that will be transformed from the TransformationLayout using the below attribute in XML.

app:transformation_targetView="@+id/myCardView"

Or we can bind a targetView using method.

transformationLayout.bindTargetView(myCardView)

Starting and finishing the transformation

After binding a targetView, we can start or finish transformation using the below methods. The startTransform and finishTransform methods need a parent as a parameter. The parent parameter should be the root layout (the highest level layout).

Make your application more beautiful

We looked around into material motion systems. As you can see the container transform helps you build more beautiful and interactive UI/UX systems. And it is a collection of surfaces that can adapt to guide users through an experience. The next topic is related to MVVM (ViewModel, Coroutines, LiveData, Room, Repository, Koin) architecture and what tech stacks are used in DisneyMotions repository.

skydoves/DisneyMotions