Intro to Motion Layout…
In my last sprint of Powerplay I had to integrate a lot of invite banners in our android application for various invite experiments. All of them had the same functionality that on swipe up, the banner should disappear from the screen and on swipe down it should restore its state.
How I Achieved it ?
APPROACH -1 : Hacky Solution
Initially I tried a hacky solution. Actually at every place we have a banner at the top and recycler view list just below it.
So we added an extra item in the list that is of the type Banner and added a scroll listener on the recycler view list. As per our small algorithm steps :
As you can see in the above code the on scroll isScrollingUp variable gets updated and since on its update we are calling
adapter?.notifyItemChanged(0)therefore onBindViewHolder will be called every time on its update and it’s a place where we will update this banner’s visibility on the basis of above variable.
But this approach was not long lasting and had a lot of shortcomings. Few of them are :
- onScrolled is not called up when items in the list are less or only that much which can be easily fit into a single page.
- Let at a time your screen can host 10 items of the list and now you are at 20–30 items in this case scrolling up/down will not gives expected result because items 1 will be at the top so its not a part of visible list now, so it will never be visible.
- Scrolling of the list is hampered a lot in some cases & sometimes recycler view is not providing the smooth scroll.
APPROACH -2 : Motion Layout
I have a bit idea that motion layout can solve this issue with it’s animations so I tried it out. Let’s discuss it’s solution with Motion layout.
Motion Layout is a extended class of Constraint Layout which provides you the easy way to add animations, motion of widget in your app. Simple steps to follow are -
- You need to change the parent layout to Motion Layout in which you want add motions.
- Motion Layout uses a XML file motion_scene.xml which contains the whole information of the transitions, animation start constraints & animation end constraints of the all widgets.
- Add above defined xml file to Motion Layout.
app:layoutDescription="@xml/motion_scene"Basic schema of layoutDescription motion_scene.xml file.
- ConstraintSet (start) : Starting constraint of the widget before the start of animation.
- ConstraintSet (end) : Final constraint of the widget that should sustain after the end of animation.
- Transition : It is the most important segment or we can say core of the whole motion. It have the information like when to start animation, how to start animation, what will be the path or flow of animation, time of animation, how to show the results, etc.
My solution of the above problem with Motion Layout —
Fragment XML file : It has a motion layout with majorly two views one is invite banner and other is SwipeRefreshLayout with embeded recycler view.
@XML/whatsapp_banner_list_scene : It has three components.
- ConstraintSet (start)
2. ConstraintSet (end)
Why “ <PropertySet motion:visibilityMode=”ignore” />” is declared?👀🧐
If you want to change the visibility of any view which is used in the motion layout then you need to declare this property. We don’t want to show the banner to all the users. Only the Users that are the part of our experiment will get this type of experience.
3. Transition
Let’s discuss each attribute used in above file -
- OnSwipe : on which act the transition should occur.
- duration : determine the time of transition between start & end constraint sets.
- dragDirection : refers to the progress direction of drag
- dragScale : scale factor to adjust the swipe by. Its value is 1 so won’t show any effect.
- touchAnchorId : on which view’s touch the transition should occur.
- touchAnchorSide : from which side of the view if touched or acted transition should start.
Results
