Introduction

Rounded custom dialogs are common in Android for confirmations, forms, and contextual actions. The visual design is simple, but implementation often fails because only the layout is styled while the dialog window remains opaque. A reliable solution styles the background drawable, dialog window, and layout spacing together.

Create a Reusable Rounded Background Drawable

Define corners, fill color, and optional stroke in a drawable resource.

1<!-- res/drawable/dialog_rounded_bg.xml -->
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="rectangle">
4    <corners android:radius="16dp" />
5    <solid android:color="#FFFFFFFF" />
6    <stroke
7        android:width="1dp"
8        android:color="#22000000" />
9</shape>

This keeps styling independent from dialog content and makes reuse easier across screens.

For dark mode, add a matching file in res/drawable-night.

Build Dialog Layout with Proper Internal Padding

Dialog content layout should focus on structure and spacing, not fake rounded corners.

1<!-- res/layout/dialog_custom.xml -->
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:orientation="vertical"
6    android:padding="20dp">
7
8    <TextView
9        android:id="@+id/titleText"
10        android:layout_width="match_parent"
11        android:layout_height="wrap_content"
12        android:text="Delete item"
13        android:textStyle="bold"
14        android:textSize="18sp" />
15
16    <TextView
17        android:id="@+id/messageText"
18        android:layout_width="match_parent"
19        android:layout_height="wrap_content"
20        android:layout_marginTop="12dp"
21        android:text="This action cannot be undone." />
22
23    <Button
24        android:id="@+id/confirmBtn"
25        android:layout_width="match_parent"
26        android:layout_height="wrap_content"
27        android:layout_marginTop="16dp"
28        android:text="Confirm" />
29</LinearLayout>

Spacing inside the layout prevents content from touching rounded edges.

Apply Window Background and Insets in Kotlin

Use AlertDialog or DialogFragment, then set window background after dialog creation.

1val view = layoutInflater.inflate(R.layout.dialog_custom, null)
2val dialog = AlertDialog.Builder(this)
3    .setView(view)
4    .create()
5
6dialog.setOnShowListener {
7    dialog.window?.setBackgroundDrawableResource(R.drawable.dialog_rounded_bg)
8    dialog.window?.decorView?.setPadding(32, 24, 32, 24)
9}
10
11dialog.show()

If you skip window background customization, corners may still appear square due to default frame rendering.

Use DialogFragment for Lifecycle Safety

For configuration changes and fragment based navigation, DialogFragment is more robust than plain dialog objects.

Theme example:

<style name="RoundedDialogTheme" parent="Theme.Material3.DayNight.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

Fragment setup:

1override fun onCreate(savedInstanceState: Bundle?) {
2    super.onCreate(savedInstanceState)
3    setStyle(STYLE_NORMAL, R.style.RoundedDialogTheme)
4}

This approach integrates better with lifecycle and state restoration.

Handle Width and Responsiveness

Dialogs that look fine on phones can break on tablets or landscape mode. Set width dynamically after show:

val width = (resources.displayMetrics.widthPixels * 0.9).toInt()
dialog.window?.setLayout(width, ViewGroup.LayoutParams.WRAP_CONTENT)

Using density independent spacing and dynamic width makes design stable across device classes.

Accessibility and Testing

Rounded corners should never reduce usability. Verify:

• Text contrast in light and dark themes.
• Adequate touch target sizes.
• Behavior under large font scaling.

Use UI tests to check dialog visibility and button actions. Snapshot tests help detect visual regressions when theme changes are introduced.

Material Components Alternative

If your app already uses Material Components, you can apply corner style through theme overlays instead of a custom window drawable for every dialog. This reduces duplicated XML and keeps branding consistent.

1<style name="ThemeOverlay.App.RoundedDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
2    <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.RoundedDialog</item>
3</style>
4
5<style name="ShapeAppearance.App.RoundedDialog" parent="">
6    <item name="cornerFamily">rounded</item>
7    <item name="cornerSize">16dp</item>
8</style>

Using theme overlays is especially useful when multiple dialogs share the same corner radius and elevation policy.

Keep Dialog Logic Decoupled

Custom dialogs often accumulate business logic quickly. Keep them maintainable by passing data and callbacks through clear interfaces, then handling decisions in view models or presenter layers. This keeps dialog classes focused on rendering and interaction. It also makes UI tests simpler because behavior can be mocked without recreating full business dependencies.

Common Pitfalls

• Styling only layout background and forgetting window background.
• Applying window size before show, which can fail silently.
• Hardcoding pixel values that break on different densities.
• Ignoring dark theme variants and creating poor contrast.
• Putting business logic in dialog construction instead of callbacks or view models.

Summary

• Define rounded appearance in a reusable drawable resource.
• Keep content layout and window styling responsibilities separate.
• Apply custom window background and insets after dialog creation.
• Prefer DialogFragment for lifecycle resilient implementations.
• Validate design on multiple devices, themes, and accessibility settings.