Creating a bottom sheet dialog with rounded corners and expanding it to full screen

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.

This is the effect I was looking for

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.

Rounded corners

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:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="24dp"
android:topRightRadius="24dp" />
<stroke
android:width="1dp"
android:color="@color/divider_dark"/>
</shape>

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:

fun Fragment.showBottomSheetDialog(
@LayoutRes layout: Int,
@IdRes textViewToSet: Int? = null,
textToSet: String? = null,
fullScreen: Boolean = true,
expand: Boolean = true
) {
val dialog = BottomSheetDialog(context!!)
dialog.setOnShowListener {
val bottomSheet: FrameLayout = dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet) ?: return@setOnShowListener
val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)
if (fullScreen && bottomSheet.layoutParams != null) { showFullScreenBottomSheet(bottomSheet) }
if (!expand) return@setOnShowListener
bottomSheet.setBackgroundResource(android.R.color.transparent)
expandBottomSheet(bottomSheetBehavior)
}
@SuppressLint("InflateParams") // dialog does not need a root view here
val sheetView = layoutInflater.inflate(layout, null)
textViewToSet?.also {
sheetView.findViewById<TextView>(it).text = textToSet
}
sheetView.findViewById<ImageView>(R.id.closeButton)?.setOnClickListener {
dialog.dismiss()
}
dialog.setContentView(sheetView)
dialog.show()
}
private fun showFullScreenBottomSheet(bottomSheet: FrameLayout) {
val layoutParams = bottomSheet.layoutParams
layoutParams.height = Resources.getSystem().displayMetrics.heightPixels
bottomSheet.layoutParams = layoutParams
}
private fun expandBottomSheet(bottomSheetBehavior: BottomSheetBehavior<FrameLayout>) {
bottomSheetBehavior.skipCollapsed = true
bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
}

I hope this works for you too. On our side the achievement is how it looked in the screenshot above.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s