Android Bottom Sheet Behavior and Animated Button on Top of It

How we modified our Android application UI with Bottom Sheet Behavior and Button on top of it

Photo by Javier Ibañez from Dribbble

Hi there! In the Navigine team, we’ve been providing indoor and outdoor positioning mobile technologies that enable advanced indoor navigation and proximity solutions for eight years.

Passed a few months after we published the redesigned version of our Android mobile application to the Play Market and we decided to tell you about the element calledBottomSheetBehavior and want to show you how to use it in the right way. And the last part of our article will be dedicated to the animating button on top of BottomSheetBehavior so they look like a single element. Let’s start from the explanation and then dive into the code.

Begin

Bottom Sheets are surface components that hold supplementary content. It mostly anchored the bottom of the screen. In simple words, you can say, Bottom Sheet is a material design component that slides up from the bottom of the screen for showing supplementary content. Bottom Sheet can be either modal — that slides up from the bottom of the screen to reveal more content or persistent — when they’re integrated with the app to display supporting content.

We will talk about the persistent ones. It also knows as BottomSheetBehavior. It works with CoordinatorLayout and displays content on top of the main content. Bottom Sheet is a well-written material design component that performs enter/exit animations, respond to dragging/swiping gestures, etc. For using it in your project you should implement next dependencies into your app build.gradle file:

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"
implementation 'com.google.android.material:material:1.1.0'

Let’s notice the modal one in few words. BottomSheetDialogFragment is a thin layer on top of the regular support library Fragment that renders your fragment as a modal bottom sheet. BottomSheetDialogFragments are a more modern version of Dialogs. They have a nicer-looking entrance animation and since they are pinned to the bottom they may feel easier to use on larger devices.

More about Bottom Sheet and some code

Let’s try to figure out in more detail BottomSheetBehavior and its components. Let’s start with its states, there are 5 of them:

• STATE_COLLAPSED: The bottom sheet is visible but only showing its peek height. This state is usually the ‘resting position’ of a Bottom Sheet. The peek height is chosen by the developer and should be enough to indicate there is extra content, allow the user to trigger an action, or expand the bottom sheet.
• STATE_EXPANDED: The bottom sheet is visible and its maximum height and it is neither dragging nor settling (see below).
• STATE_DRAGGING: The user is actively dragging the bottom sheet up or down.
• STATE_SETTLING: The bottom sheet is settling to a specific height after a drag/swipe gesture. This will be the peek height, expanded height, or 0, in case the user action caused the bottom sheet to hide.
• STATE_HIDDEN: The bottom sheet is no longer visible.

You can add BottomSheetCallback for detecting state changes and getting slide offset. We will use the last one for correctly animating our button. But for now, continue with this part. If you’re already using CoordinatorLayout for your activity, adding a bottom sheet is trivial:

1. Add any View as a direct child of CoordinatorLayout.
2. Apply the behavior by adding the following XML attribute app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
3. Set the desired behavior flags

• app:behavior_hideable whether this bottom sheet can be hidden by dragging it down.
• app:behavior_peekHeight the peek height for the collapsed state.
• app:behavior_skipCollapsed if the bottom sheet is hideable, and this is set to true, it does not have a collapsed state.

Also, you can add these parameters programmatically. Here is the code example of an XML file of empty BottomSheetBehavior:

Include it in your activity XML file like this:

<include
    android:id="@+id/bottom_sheet_behavior_id"
    layout="@layout/bottom_sheet_behavior"/>

Then you should initialize it in your Java code like below:

Now you will have the working which will appear from the bottom of your screen. You can slide it up for showing application settings for example or for any other purposes. In our indoor navigation application, we used it for showing venue information, and while the user wants to make a route. Here is the GIF on how it looks like:

Screenshot from Navigine mobile app

As you can see, the bottom button remains fixed while BottomSheetBehavior moving and hides along with it. The problem with the BottomSheetBehavior is that you cannot fix any element in it, it will move with BottomSheetBehavior. So we had to bother a bit and animate the button on top of it. So now let’s dive into this part.

Sliding view together with Bottom Sheet

Our button is inside the view, so this problem can be considered not only regarding it. The task was to keep the button stationary when sliding occurs above peekHeight of Bottom Sheet and slide with the same speed as Bottom Sheet when below peekHeight. To achieve this, it turned out to be useful to rewrite the onSlide method of BottomSheetCallback. As the sliding is only vertical we need to animate only the y value of our view. Here is the code we used:

By the way, you could not use this solution, if you will not have any scrollable elements inside your Bottom Sheet and if it has fixed height for example. But in our case, we need to fix the button position at the bottom of the screen, so the user will have a chance to make the route.

End

Summing up, I want to say that the Bottom Sheet is a very useful UI element and gives an elegant look to your design. In addition to all, it is very easy to use and can also serve as a good substitute bored all dialogs.

Unfortunately, Google did not create an analog for the Bottom Sheet as Top Sheet so that you can push it from the top of the screen, but we modified the bottom sheet a little and got Top Sheet Behavior. We will tell more about this in another article and share a demo application on how to use it.

Feel free to ask your questions and share your experience of working with Bottom Sheet Behavior.

Author is Navigine’s Android Developer — Il Kadyrov