Android: Sticky view at the bottom of bottom sheet dialog fragment

Developing my app using couple of bottom sheet dialog fragments I faced an interesting issue. I wanted to have confirmation button that would be always visible on bottom of it. I have found couple of solutions online but none of them seemed to solve my problem with desired behavior, so I had to come up with my own. It is actually very simple and requires a simple formula which is based on positioning button from top on scrolling down/up sheet. The nice thing about it is that, even despite we are gonna be using “fixed” values, calculations are done relatively to the screen.

We are gonna be using recyclerview as a scrollable element, so sticking a view actually has a purpose, and we are also going to use view binding for simplicity. We are also gonna skip some basic things, like creating a project, setting up recyclerview adapter, as it is not the main purpose of this article.

Behavior

Basic things

First, we are gonna setup a project with empty activity and a single button which is going to open our bottom sheet dialog fragment.

Simple button in center of parent view

and MainActivity code with listener for that button looks like

Inflating view with listener for button which opens our bottom sheet

StickyBottomSheet

Now, lets set up our layout for StickyBottomSheet. We are going to have a sheet title, recyclerview, and a sticky button on the bottom of the sheet. To make scroll like more pleasant and seemless we are gonna move recyclerview a bit below button and give him a padding so it shows last item. You might have to adjust some of the view margins/paddings and heights if you want.

Important parts are constraints, recyclerview must be constrainted to button in order to move alongside it.

In this article we are just gonna go through important code but you can find entire project on link below. So, lets continue. We will use only onCreateDialog() method to set up our listeners and calculations.

First, we need to define our global variables that we are gonna be using.

private ConstraintLayout.LayoutParams buttonLayoutParams;
private static int collapsedMargin; //Button margin in collapsed state
private static int buttonHeight;
private static int expandedHeight; //Height of bottom sheet in expanded state

Now, lets do some math for initial startup

Initializing global variables and views

Numbers and proportions can be edited by your needs and described rules.

This methods are going to be called in onCreateDialog() triggered by onShow listener.

And finally, we are getting to the magic part. We will set BottomSheetCallback on our BottomSheetBehavior, but we will only use onSlide part, because we want to update button’s margins when user slides sheet.

Values updates on slide of the bottom sheet

So, how does this work? When we slide sheet, this callback is called, and for sliding up above collapsed state slideOffset is between 0(collapsed) and 1(expanded). This is formula used for linear scaling and equation of lines for 2 points. In case we are not sliding sheet above collapsed height, set margin of collapsed state which we calculated on start.

Thanks for reading, I hope you enjoyed reading, whole project can be found on GitHub:

GitHub - dorianpavetic/StickyBottomSheet: Bottom sheet dialog fragment with sticky button on bottom…