Draggable bottom Navigation Drawer
… here’s how!
A quick introduction before we get into coding - my name is Francisco Franco, I’m an Android developer, and I just joined (truthfully I tricked them into hiring me and they fell for it) Snapp Mobile today! Very excited about this chapter.
To kick things off lets start by looking into a pattern I’ve been using for a while but haven’t seen anywhere else.
History class: The old Navigation Drawer
Starting with Ice Cream Sandwich Google started to focus on giving more emphasis on hierarchical UIs and advocating for a couple of components to achieve that end. We all know how pattern-less Android looked like before they uniformed things with Holo design language.
One of most famous components coming out from it is the Navigation Drawer — a view hidden from sight encapsulating points of entry into other sections of the application.
Though a very good solution at first, once user data was available a big issue started to arise: lack of discoverability and lower user engagement.
Average users were having issues figuring out there was a hidden list (usually swipped from the left to the right of the display), and while there’s also a button to open it (the famous Hamburger), there was a large percentage of users who simply didn’t know what that was, or what it did.
This is one of the early articles exposing this seemingly big(ish) issue: https://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/
Google was likely aware of this in some way shape or form and started to work on other patterns to allow multiple points of entry to other sections. One in particular pretty much defeats the discoverability issue of the Nav Drawer: it’s not hidden and was popularized by iOS: Bottom Navigation. The caveat? You shouldn’t ever add more than 4–5 entry points and that could potentially be an issue on larger apps.
“But I have more than 4–5 sections, what now?”
Coincidence or not Android OEMs started to ship 2:1 ratio display devices and it was becoming obvious one handed usage was getting harder, plus, Google started to advocate for swipe gesture based interface and you can imagine how hard it turned out to open a Navigation Drawer from the sides…
Big displays & a new navigation system kind-of pushed Google to release a new pattern: Bottom Navigation Drawer.
This solves many problems, but discoverability is still an issue. You can only open that up by tapping the hamburger button and we all know how that turned out for the original Nav Drawer. Plus, since the component wasn’t swipable it seemed like it wasn’t part of the application layer, as if it was completely detached. If you want to see this in a real app try Google Tasks.
That’s where my solution comes in. It’s been used in production for more than a year now.
Enter a draggable bottom drawer
This section is going to be quite technical and I’ll assume you have experience with the Android SDK as a whole. If not then maybe jump over this one.
The first thing to consider is the Nav Drawer is just a view, there’s no magic. It can be a LinearLayout with a vertical orientation, or to make it easy a simple RecyclerView. The trick of this is using a BottomSheet housing both the AppBar/Toolbar and the actual RecyclerView that’s gonna be our drawer.
By setting BottomSheet “peekHeight” = AppBar height the AppBar will always be visible and available for you to swipe so when you touch it you can drag it up to open the drawer, and drag down to close it. Very simple, no need to open it with a button click and easy to drag from the bottom in any position of your thumb.
First set-up the XML. The way you order your views is what makes this possible:
The container which is going to be our BottomSheet houses the AppBarLayout (which is just a LinearLayout) which them houses the actual Toolbar and our drawer (which stays hidden until we start dragging the container).
Now the magic shifts to the Activity/Fragment where this is housed. Theorically this will be in your Main Activity though.
First thing you have to do it set up the container BottomSheetBehavior. I suggest referencing it through a variable since you’ll be accessing this later on:
BottomSheetBehavior.from(bottomNavigationContainer)Now it’s important you set the peekHeight because we absolutely need the Toolbar to be visible otherwise there’s nothing to drag.
bottomSheetBehavior.setPeekHeight(appBar.getHeight());At this point you should already have initiated the adapter and populated the drawer RecyclerView. The basic structure should already be working and you’re able to drag the Toobar up & down to show/hide the drawer.
It’s important you set up the BottomSheetCallback so you can act based on the events:
Other thing you can do is setup a “fake” shade full screen view that is hidden when the drawer is closed, but shows up as a translucent scrim behind the drawer and when clicked it automatically closes the drawer (like when you tap outside a dialog and it closes.
To close the drawer programatically you just set the state:
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);Also strongly recommend to Override the onBackPressed() method to close the drawer if open when the user clicks the back button:
This is very basic, and very easy to implement since the trick is pretty much how you setup your XML. Since I haven’t seen this anywhere else I thought it would be cool to share and give you some new ideas.
Here’s how it looks in action:
And that’s all folks!
I hope this small “guide” helps you in some way shape or form and if you end up implementing it make sure you show me how it turned out.
Let’s make this the first of many - I’m sure I still have a some cool things from my projects that might be useful for the community.
Follow me on Twitter @franciscof_1990 for more Android related thoughts (and rants too), and follow @snappmobile_io to keep up with our projects (and more blog posts).
Thanks for reading!
