Custom alert dialog with rounded corner and transparent background

Question

How to design custom alert dialog with rounded corner and transparent dismiss button?

Solution 1

Create your dialog like this

AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
                                            context, R.style.CustomAlertDialog);
AlertDialog alertDialog = alertDialogBuilder.create();

In your styles.xml

<style name="CustomAlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowBackground">@drawable/popup_background</item>
</style>

popup_background.xml write whatever corner radius you want

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="6dp" />
</shape>

You can change corner radius. Good luck!

Solution 2

You can use the Material components for android library and the androidx.appcompat.app.AlertDialog.

Just use something like:

new MaterialAlertDialogBuilder(context)
            .setTitle("Dialog")
            .setMessage("Lorem ipsum dolor ....")
            .setPositiveButton("Ok", /* listener = */ null)
            .setNegativeButton("Cancel", /* listener = */ null)
            .show();

Using a Material Components Theme you can customize the shape of your component with the shapeAppearanceOverlay attribute in your style.

Something like:

  <!-- Alert Dialog -->
  <style name="MyThemeOverlayAlertDialog" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded</item>
  </style>

Here you can define the rounded corners:

  <style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
  </style>