Animation like in YouTube application
When I started customize animations in my applications, I began to pay attention to details, especially to animations in other applications by big developers. Not long time ago I noticed transition animation for playing video screen in YouTube application.
I wanted to do the same. But as I had no idea how to do this I started to find an answer in Google. Found an article about CoordinatorLayout: https://habr.com/ru/post/270121/, there was a kind of animation that I need in description. I did an attempt — doesn’t fit. Came back to Google.
Some requests later I found an article about MotionLayout: https://habr.com/ru/company/badoo/blog/458854/, and after reading I understood that it’s right that I need.
MotionLayout: brief description
This component was announced on Google I/O 2019 presentation as ConstraintLayout functionality extension. In documentation we can see:
«MotionLayout — it is ConstraintLayout, which allows you to animate layouts between various states»
So, this layout can do all the same as ConstraintLayout, despite that it allows to manage Transition condition in real time based on some programming limitations and user’s activities. Also you can read about Transition in my previous article.
From theory to practice
Firstly we need to involve updated ConstraintLayout. If it’s already involved, it’s enough to change version:
Let’s create a layout for main screen with MotionLayout, add a container for fragment setup, stretch to fit screen:
Please, pay attention to the line: app:motionDebug=«SHOW_ALL». It allows to screen debug information, objects motion trajectory, start and finish of animation and current progress. This line helps on debugging but don’t forget to delete it before sending in production.
Let’s create fragment layout with MotionLayout, there is an ImageView, you can set a picture for clarity.
Now the most interesting. We need to create a scene that will describe animation. As animation will depend on user’s activities (motions), it will be named appropriately: MotionScene. This element will contain Transitions, connections’ methods (OnSwipe, OnClick) and sets for layout changes (ConstraintSet). You need to add xml directory, there’re will be kept MotionScene. Let’s create new file, I named it player_scene.xml.
For convenience I created the second layout in warped condition:
As we can notice, in this file elements’ parameters from layout are repeated. For the first launch it’s worth to add MotionScene and for activity. Leave it without sets, it has to be.
Launch and look what we get.
Very good. Now add simple adaptor to make something like feed in YouTube and look at the result:
It’s obvious that recyclerView intercepts swipe of MotionLayout. To avoid this add to recyclerView the following parameter:
It works. Now add BottomNavigationView in activity and Transition to hide the menu down by opening a fragment:
So, navigationView has to depends on fragment, precisely on current condition. Use KeyFrameSet:
Now we have to transfer current fragment condition in activity. Let’s use TransitionListener:
The result is quite different. Well, in this case we need to change start and finish transitions. Add some limits on interaction: set imageView as basic element, it will define Transition directory (if it isn’t set, fragments will open by swipe down, and this is different), also let’s set maximum deviation transition from current scene that will be used for switching. It is something like autoComplete.
Despite this I decided to add recyclerView with adapter on main screen. Adapter is the same but layout is quite different. Launch and check.
Now it works as we need.
Later I added toolbar with logo of our company, the fragment opens by click on recycler view item, minimize by click on “back”, and fixed some problems. The result is:
All the code you can see on GitHub: https://github.com/BytePace/LikeYouTubeTransitionExample.
Hope this article is useful for you!
For writing this article I used sources as following:
- Introduction to MotionLayout: https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d
- Official documentation: https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
- Also two articles from Habr which about I told in the beginning.