5

How can I design a custom alert dialog with rounded corners and a transparent dismiss button?

5

5 Answers 5

34

Create your dialog like this:

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

In your styles.xml file:

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

In file 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 the corner radius.

3
  • if I want to use gradient, how will I accomplish it sir? May 18, 2020 at 13:54
  • 1
    stackoverflow.com/questions/13929877/… The answer to this question should help you, change the popup_background into a gradient shape.
    – Belzebub
    May 19, 2020 at 18:14
  • This one pretty good solution but one issue I face dialog width changed as compare to original alert dialog. you have any solution for same. Jun 9, 2020 at 11:09
16

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>

enter image description here

2
  • 2
    Works! The best alternative I could find. Setting another drawable modifies the size of the dialog box, so it is not an option Dec 18, 2019 at 7:56
  • 1
    What a great answer, this suppose to be the correct answer, I agree with @NicolásVera Aug 30, 2022 at 8:26
0

You can create your customview by extending the alert dialog class.

But I would recommend a PopupWindow or a subview that you show with an animation when a specific action performed.

Or you can make an activity with a transparent background by adding this attribute to your Manifest.xml file:

  android:theme="@android:style/Theme.Translucent"
0

Try this. It worked for me like a charm.

I am working on sdkversion 28 with a minimum SDK version 19.

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
1
  • OP asked for rounded corners and transparent background. Do you have any suggestion for the corners? Jan 25, 2019 at 18:49
-2

Try it...

 final Dialog dialog = new Dialog(context);

 // Include the dialog.xml file
 dialog.setContentView(R.layout.your_custom_layout);

 // Set the dialog title
 //dialog.setTitle("Custom Dialog");

 // Set values for custom dialog components - 
 // text, image and button
 final EditText name = (EditText) dialog.findViewById(R.id.name_edit);

 dialog.show();

 /
 Button editButton = (Button) dialog.findViewById(R.id.editbtn);

 // If the decline button is clicked, close the custom dialog
 editButton.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         // Close dialog

         dialog.dismiss();
     }
 });

 final Button cancenbtn = (Button) dialog.findViewById(R.id.cancelbtn);

 // If the decline button is clicked, close the custom dialog
 cancelnbtn.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         // Close dialog

         dialog.dismiss();
     }
 });

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.