Implementing Google’s refreshed modal bottom sheet
This year’s Google I/O introduced an improved version of Material Design to the curious public in Mountain View and across the globe. With the new release a couple of components got a fresh coat of paint but some shiny new elements entered the game too. The tech giant debuted a few new and revamped apps that already reflect the changes in their official design language.
One of their new joiner apps is Tasks, a simple and clean productivity app that integrates well with other G suite apps. I’ve been using it since its release and I really like it.
News, formerly known as Play Newsstand is another app that has been well received at the event. Besides its new Material theme News is now powered by AI.
Both of these products have a neat, simple and intuitive design, that showcases the capabilities of the updated Material Design for Android. It’s stunning. So much so, that it got me taking these apps as design examples for a side project I started working on.
Shortly after I started implementing the UI, I stumbled upon my first issue: the BottomSheetDialog component, available through the new design library, did not look like the ones from these apps:
As you can see, both apps use a modal bottom sheet dialog to present their menu, but their top edges are rounded and the NavigationBar isn’t dimmed. If we use the BottomSheet from the MaterialComponents library this is what we get:
The screenshot from the left hand side shows the home screen with its menu closed. The one on the right illustrates how the modal bottom sheet is shown when the menu icon from the bottom app bar is tapped.
The question: how can one implement the same behaviour that’s present in the apps from the examples? My goal was to do it as simple and elegant as possible, so here’s how I did it:
EDIT: Since publishing this article the Material Components team released Shape Theming support in the Material Design Components Android library, version 1.1.0-alpha02.
If you are already using the latest version of Material Design Components library for Android, then implementing this rounded corner bottom sheet got much easier. All you have to do is to set the shapeAppearanceLargeComponent attribute in your Theme to a style which extends ShapeAppearance.MaterialComponents.LargeComponent and has the cornerFamily attribute set to rounded and the cornerSize to 16dp or your dimension of choice.
For more details about shape theming check out this documentation.
First I created a shape drawable which I’ll be using as background for the bottom sheet:
Next, I made a custom style for the BottomSheet widget and a custom theme for the BottomSheetDialogFragment:
In the BottomSheet style, I set the custom background drawable to be used as the bottom sheet’s background. After that I created a custom theme for the fragment, set the statusBarColor to transparent and the navigationBarColor to white (that’s our desired color in this case). Then I set the fragment’s window floating attribute which wraps the dialog to false.
Lastly, I extended the BottomSheetDialogFragment and set my new theme on it:
Aaaand that’s it. All that was left to do is extend the RoundedBottomSheetDialogFragment, inflate a layout of my choice in it and simply show it, like you’d do with a normal BottomSheetDialogFragment:
The result:
You can find all the code here. Let me know if you have a similar or better solution. Any feedback, and of course shares and claps are more than welcome.
