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.

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&quot;
	android:shape="rectangle">
	<corners
	android:topLeftRadius="24dp"
	android:topRightRadius="24dp" />
	<stroke
	android:width="1dp"
	android:color="@color/divider_dark"/>
	</shape>

view raw RoundedCornersDrawable.xml hosted with ❤ by GitHub

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
	}

view raw BottomSheetExtensions.kt hosted with ❤ by GitHub

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