The Motion Knight
When Youtube for android introduced a new design, nearly 2 months ago, the animations were amazing, and I was thinking to create something like this, but as you know, every developer has main projects, which could not be delayed 😩.
And while I was busy with my main project, Android team introduced MotionLayout in Google IO, so I decided to create the animation like Youtube android app with MotionLayout.
You can clone the project while you are reading not to waste time.
What is MotionLayout?
MotionLayout is a new class available in the ConstraintLayout 2.0 library to help Android developers manage motion and widget animation in their applications.
The MotionLayout widget can do everything the ConstraintLayout widget can.
Now let’s begin real implementation.
Step 1
First, we need to add ConstraintLayout 2 dependencies to our build gradle.
implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-alpha2’
Then let’s create regular activity with the container inside to add VideoFragment later.
Step 2
For the second step, let's create our VideoFragment and open it inside MainActivity onCreate method.
The VideoFragment layout will be something like this.
For MotionLayout to apply its animations we need to keep its description in the separate file.
A motion scene is an XML file that contains description about the animation we want to create with a MotionLayout.
We will keep it in the separate file. For VideoFragment let's create youtube_scene.xml scene description.
With ConstraintSet we describe our layout opened state scene and with collapsed ConstraintSet-closed state scene. The MotionLayout will make smooth transition from opened state to closed and vice verse.
With OnSwipe tag we specify that motion layout will also change the scene by swipe. This also could be performed by click with OnClick tag.
Step 3
Seems it works as we wished. Now let's add BottomNavigation and also create motion screen for MainActivity.
Bellow is the motion scene of MainActivity.
KeyAttribute lets us specify widget attributes changes at a given point in time during the animation. In our example, BottomNavigation will make transitionY from the start and will end when our animation will reach its 75 percent.
This motion scene will allow us to hide or show the BottomNavigation, while our video view is moving. As you noticed we did not add OnSwipe tag to main_scene.xml and its motion layout will not react to user’s swipe gesture. If we add OnSwipe tag to our main scene transition, it will conflict with the video scene.
MotionScene also has a progress field we can specify the transition progress from 0 to 1.
So we will send the progress from VideoFragment MotionLayout to MainActivity MotionLayout.
Looks amazing!
Step 4
However, we have a problem here 🤔: MotionLayout covers the whole screen and handles all touches by default, but when the MotionLayout content is collapsed, we want it to react to only videoViewContainer touches and not to the whole content. For that, I created SingleViewTouchableMotionLayout to handle only the touches of our videoViewContainer.
That TODO is still actual 😄
Now our MotionLayout will handle touches only from videoViewContainer and definitely more like Youtube animation.
-How about a magic trick?
-I’m gonna make this pencil disappear.
-Ta-daa! It’s… it’s gone.
Of course, there are still many details which we did not cover in this article, but I think I could give the main idea how it is easy and interesting to make various animations and transitions using motion layout.
As a bonus I created also one more example with MotionLayout, you can find the code for this example here.
Although MotionLayout is an early release and there are still some bugs and some limitations like not supporting nested views, it is a very amazing view with great potential. 😍 😍
I am also planning to write about KeyFrameSet, KeyAttribute, KeyCycle, and CustomAttribute in my next article and hope that this article will interest you.
I also recommend you to read an article series from Nicolas Roard. 📖
Big thanks to John Hoford and Nicolas Roard! 👏 👏
You can find me on twitter @chatikyan 📑
Thanks for reading this article. Hope you enjoyed it. You can find the full code here.
