StateListAnimator — a Powerful Little Tool for Elevation Animation
Google Material Design introduced elevation as one of the main tools to emphasise hierarchy in the UI. It’s a natural and intuitively understood concept by both users and developers. Things that drop shadows are higher up in the UI hierarchy.
However, in many cases always showing the shadow is not visually pleasing and doesn’t serve a purpose. Take a look at the two screenshots below.
On the left one the drop shadow is there even when the list is not scrolled. It only adds clutter to the UI without helping the user.
You want the shadow only appear when the ScrollView or the RecyclerView is actually scrolled:
Implementation
You could simply set the elevation when needed to the correct value but adding small and thoughtful transitions add much more polished feel to your application.
I’ve built this kind of functionality couple of times but it has always felt a bit too complicated. I used to create an observable scroll view and manually animate the elevation or shadow.
But, of course, there is an easier way.. and much more simpler than I used to do.
ScrollView as well as RecyclerView have an interesting property: “canScrollVertically”.
You can simply listen to scroll state change and get notified whenever the view is scrolled and inspect if the view is on the top.
I don’t really like that I have to give a “-1” as a parameter but I didn’t find a constant I could use in this case either. The “-1” indicates direction, in this case upwards.
Based if the view can be scrolled or not I set my header layout as selected. I use selected as it is an easy attribute and not used otherwise in my code here. It is also supported in the state lists out of the box which makes things easier. I’m sure there’s a better way to do this, or at least more descriptive way. Please leave a comment for improvement below.
The last part is a simple state list selector which defines the elevation transition. This is placed to res/animator folder.
By using the stateListAnimator you save a lot of headaches in edge cases like user moving out of the screen while transition is running or them scrolling back and forth triggering transitions multiple times. The Android system takes care of all of this for you.
Consistency -> Improved Usability
This technique is easy to replicate throughout your application consistently. Using similar transitions elsewhere to communicate UI hierarchy will help users figure out your UI without thinking.
In our Photographer’s Notes app we use the same transition in the toolbar as well as on the card headers.
Try it out
Download our app from Google Play for free and give it a go:
