CODEWITHSUNDEEP
androidmaterial-designandroid-alertdialogmaterial-componentsmaterial-components-android
Braj Bhushan Singh
Braj Bhushan Singh

Reputation: 627

Custom alert dialog with rounded corners and a transparent background

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

Upvotes: 5

Views: 18724

Answers (5)

Belzebub
Belzebub

Reputation: 994

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.

Upvotes: 34

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363737

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

Upvotes: 16

Aashis Shrestha
Aashis Shrestha

Reputation: 612

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));

Upvotes: 1

zMabrook
zMabrook

Reputation: 942

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"

Upvotes: 0

A.Arjun
A.Arjun

Reputation: 105

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();
     }
 });

Upvotes: -2

Related Questions