Animation like 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.

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 wrapped condition:

Now we can describe MotionScene.xml:

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 adapter 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:

Check:

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:

1. Introduction to MotionLayout: https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d
   
2. Official documentation: https://developer.android.com/
   reference/android/
   support/constraint/motion/
   MotionLayout
   
3. Also two articles from Habr which about I told in the beginning.