BottomSheetDialogFragment
Round Corners
Android Development
UI Design
Mobile Apps

Round corner for BottomSheetDialogFragment

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

Rounded corners on a BottomSheetDialogFragment are usually achieved through theming, not by manually clipping views in code. The key is to give the bottom sheet a shaped background and make sure the default container background is transparent so your rounded shape is actually visible.

Use A Custom Bottom Sheet Theme

A common approach is to define a dialog theme that points to a shaped bottom sheet style.

In themes.xml:

xml
1<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.BottomSheetDialog">
2    <item name="bottomSheetStyle">@style/AppBottomSheetStyle</item>
3</style>
4
5<style name="AppBottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
6    <item name="shapeAppearanceOverlay">@style/AppBottomSheetShapeAppearance</item>
7    <item name="backgroundTint">@android:color/white</item>
8</style>
9
10<style name="AppBottomSheetShapeAppearance">
11    <item name="cornerFamily">rounded</item>
12    <item name="cornerSizeTopLeft">24dp</item>
13    <item name="cornerSizeTopRight">24dp</item>
14    <item name="cornerSizeBottomLeft">0dp</item>
15    <item name="cornerSizeBottomRight">0dp</item>
16</style>

Then apply that theme from your fragment:

kotlin
class DetailsBottomSheet : BottomSheetDialogFragment() {
    override fun getTheme(): Int = R.style.AppBottomSheetDialogTheme
}

This is the cleanest Material-based solution because it uses the component's built-in shape system rather than custom drawing hacks.

Make The Container Background Transparent

A very common problem is that the theme looks correct on paper but the corners still do not show. Usually the reason is the underlying sheet container still has a solid background that hides the shaped result.

You can fix that in onStart:

kotlin
1import android.graphics.Color
2import android.graphics.drawable.ColorDrawable
3import android.os.Bundle
4import android.view.View
5import com.google.android.material.bottomsheet.BottomSheetDialog
6import com.google.android.material.bottomsheet.BottomSheetDialogFragment
7
8class DetailsBottomSheet : BottomSheetDialogFragment() {
9    override fun getTheme(): Int = R.style.AppBottomSheetDialogTheme
10
11    override fun onStart() {
12        super.onStart()
13
14        val bottomSheet = dialog?.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
15        bottomSheet?.background = ColorDrawable(Color.TRANSPARENT)
16    }
17}

This line is often the missing piece. Your custom rounded background may already exist on the content view, but without a transparent outer sheet background the rounded corners are not visible.

Inflate A Layout With Its Own Rounded Background

Another working pattern is to place the rounded shape on the root view inside the sheet layout.

Drawable:

xml
1<shape xmlns:android="http://schemas.android.com/apk/res/android">
2    <solid android:color="@android:color/white" />
3    <corners
4        android:topLeftRadius="24dp"
5        android:topRightRadius="24dp" />
6</shape>

Layout root:

xml
1<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:background="@drawable/bg_bottom_sheet"
5    android:orientation="vertical"
6    android:padding="16dp">
7
8    <!-- content -->
9
10</LinearLayout>

This works well, especially when you want tight control over the visible content area.

Material Components Give Better Results Than Old Hacks

Older examples often suggest wrapping the content in a CardView or applying clipping tricks directly. Those can work, but Material shape theming is usually more consistent with BottomSheetDialogFragment because:

  • it integrates with the bottom sheet widget itself
  • it handles elevation and shape more predictably
  • it fits modern Material styling better

If you are already using Material Components, start with theme and shape appearance first.

Handle Full-Screen Or Expanded Sheets Carefully

If the bottom sheet expands to full height, rounded corners can visually disappear at the top once it reaches the status bar area. That is not always a bug; sometimes the expanded layout just leaves no visible top edge.

In those cases, you may need to combine:

  • top padding or insets handling
  • peek height and expansion behavior
  • a transparent or edge-to-edge aware window background

The styling and the behavior are connected.

Common Pitfalls

The biggest mistake is setting a rounded drawable on the content while leaving the bottom sheet container background opaque. The container then hides the rounded corners.

Another mistake is using a non-Material theme with Material bottom sheet assumptions. The shape appearance system works best when the dialog theme is based on Material Components.

People also forget that only the top corners are usually rounded in a bottom sheet. Rounding all four corners can look wrong once the sheet reaches the bottom edge.

Finally, if the sheet is fully expanded, check whether the geometry of the screen simply leaves no room to see the corners anymore.

Summary

  • The cleanest modern solution is a custom BottomSheetDialogFragment theme using Material shape appearance.
  • Rounded corners often require the outer bottom sheet container background to be transparent.
  • A shaped background on the root content view can work well too.
  • Material theming is usually better than custom clipping or CardView workarounds.
  • If the sheet expands fully, behavior and layout can hide the corners even when the styling is correct.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.