Choreographic animations with Android’s BottomSheet
It has been a while since Google included bottom sheets into its design support library allowing developers to integrate it into their apps easily.
In the essence, bottom sheets are view types that slide up from the bottom of the screen to reveal more content to a user. For this story I will assume that you are already familiar with bottom sheets and know how to integrate it into your app. For those of you who need a refresher on bottom sheets’ integration, I will recommend to read this article by Emrullah Lüleci. You can also find more detailed information on various types and use cases of bottom sheets in Google Material Design guidelines.
Instead of talking about integration details, I want to show you how to make view animations attached to bottom sheet’s sliding animation. So, let’s start rocking!
To bind animation to bottom sheet’s sliding effect we will need to be informed on bottom sheets’s current state. Quick analysis of documentation and source code immediately reveals that the BottomSheetBehavior class has setBottomSheetCallback method, which can be used to set a callback for monitoring events about bottom sheets.
Lets see it in action.
As it is obvious from the code there are two methods of BottomSheetCallback interface, which can be used to get two types of information:
- New state of the bottom sheet
- Offset value of the bottom sheet
Since we are intending to bind our animations to bottom sheet’s sliding effect, we will need to use offset value provided by onSlide callback in our animations. According to the source code documentations, slideOffset parameter changes within [-1, 1] range.
“Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.”
With this in mind, let’s dive into the actual implementation of animations. In this story I will show you only two animations. Nevertheless, I hope this will be more than enough to grab the main idea and force your imagination to create awesome stuff.
1. Background color transition
As the first animation, we will try to change the background color of our bottom sheet gradually as it expands and collapses. Let’s see the actual code first:
Don’t get afraid of the code’s length. It is really very simple.
First of all we get slideOffset parmeter from our callback and pass it to our transitionBottomSheetBackgroundColor method, which in turn passes this value along with fromColor and toColor parameters to our last method called interpolateColor. This method uses bit manipulation techniques to calculate the int value of in-between color depending on the offset value and returns it back to the transitionBottomSheetBackgroundColor method which sets the returned color value as a background color of the bottom sheet.
2. Image animation
Our second animation will be the image rotation. We will place to arrows (vector drawables) into the top of the bottom sheet and try to rotate them 180° clockwise and counter-clockwise. Again, we will try to make our animation in sync with the bottom sheet’s sliding effect.
This animation is fairly simple. We just pass our slideOffset value to animateBottomSheetArrows method and use it to set the rotation value of our images.
As the result of our effort we will get a beautiful choreographic animation like this:
If you have noticed, our bottom sheet is located in the Fragment and therefore we are calling isAdded method of the Fragment instance before running any animation. This method returns true if the fragment is currently added to its activity. It is crucial to check this if you are doing animations within the views attached to the fragment. If you will run the animation without checking it you may get java.lang.IllegalStateException stating that the fragment is not attached to its activity.
You can get the source code from this link.
Hope you enjoyed my first story. Please share your feedback and comments, because they mean a lot for me.
Happy coding!
