Developing Custom Android Sheet Sliding From Top of Device Screen
Or simplified, writing your own TopSheetBehavior using androidx.* modules
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.
In the previous article, we told you about the Bottom Sheet Behavior and how to animate the button on top of it. Today we want to tell you one interesting feature we implemented in our Navigine Android app which will make your UI more attractive. It is very much tied to the previous article. Actions speak louder than words, so let’s not pull too long with the intro and get down to the important things right away.
What about the top?
Well, we figured out with pulling the view from the bottom, learned how to use its sliding, placed different UI components, and even had to fight a little with the scroll view inside, but this is not a problem either. But then we decided that we want a pull-out window from the top of the screen so that we can show the debug message, because at some moments these messages can be very useful, at least for some clients.
We decided to search if Google has anything ready for this case, however, we were disappointed because we could not find anything. Then we decided to write our own Top Sheet Behavior as the analog of Bottom Sheet Behavior. Let’s understand how these two classes differ from each other and write our own top sheet behavior. Above is the init example of top sheet behavior, it looks pretty similar to the bottom sheet.
Programming part
An obvious change that now the view is shown on top and hides when scrolling up. Therefore, it is important and sufficient for us to know how the coordinate system works on android. The image below shows how it works. As soon we work with the vertical coordinates, we only need to know that the top is zero.
Since programmers are lazy and do not want to write a lot of code, we will also use the code of the bottom sheet and just rewrite some parts of it. First, we need to set the max offset as zero and now it will be the same as min offset for bottom sheet. Here is the code part when it all set up.
The next important parts are scrolling and touching because the top sheet should have another behavior than bottom sheet. In other words, it should hide when scrolled up and expand when scrolled down. Therefore, the main thing here is to perform reciprocal actions, and then everything will turn out right. The code below shows how the main logic of onNestedPreScroll will look like.
As I said, everything is happening here opposite to the Bottom Sheet Behavior. And another important thing to change is setting the state. When we set the collapsed state, the view should disappear at the top of device screen and its bottom should be equal to the min offset. (Because sometimes top sheet behavior could be not hideable.) Here is the code snippet on how the set state function should be changed inside.
It seems that we have described the most important changes to be made in the code of the bottom sheet behavior. So now let’s see how it works in our application.
Our usage results
As you can see in the screenshot below there is a semi-transparent window on top of the main device menu with the single word Hello. This is the thing we wanted for showing the logs. We made it open when pulled with three fingers from the top of the screen. Firstly, we didn’t want everyone to be able to use it, secondly, most of the other gestures were already involved in our map.
As you can see, we have not yet added the display of logs to the end, since we were busy with other nuances, however, we decided to leave this window as an easter egg, in case someone finds it, he will see this simple and familiar message and will be happy. Unfortunately, so far no one has informed us about such a find, but we still hope that someone succeeded.
Summary
Summing up, I would like to say that if you wish, you can also create left sheet and right sheet behaviors, it’s up to you. As you can see above, not much code needs to be written, and not so many changes to be made in the existing code to get the result. You can find the full code for bottom sheet behavior in this gist. Feel free to ask your questions.
