Sometimes even simple and easy stuff can be complex on Android. Such is the case where you want to have a bottom sheet dialog with rounded corners which expands to fullscreen. Here is how I did it on Android 6.
I know it may be a bit ugly when you think about it with all that blank space at the bottom. Also, it may be also a good fit to have it as a fragment and not a bottom sheet dialog at all. But sometimes we have to face the decisions of UI/UX designers and try to achieve the things they want. And the above is what they wanted.
There are several ways to achieve rounded corners on Android. The simplest one is to use a CardView and just use app:cardCornerRadius. Another way is the one I will write about:
In the layout for the bottom sheet dialog, we always had a ConstraintLayout as the top parent of the XML file. This is how it looked like:
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/bottom_sheet_corners_background" android:backgroundTint="@color/white" android:paddingBottom="16dp">
The two bolded lines are the ones that display the ConstraintLayout with the rounded corners:
So in every layout that you have for the bottom sheet, you need to use this drawable with the background color properly set. Otherwise, it will show with a transparent background.
Show/Hide bottom sheet dialog extension
Our extension function should support two things:
- Whether to show the bottom sheet dialog fullscreen
- Whether to show it in an expanded state initially
And this is how it looks like:
I hope this works for you too. On our side the achievement is how it looked in the screenshot above.