Add rounded corner to Alert Dialog

Question

I'm trying to add rounded corners to AlertDialog, but I don't understand the logic of the shape file (which doesn't work). I'm using it as background in the RelativeLayout of the AlertDialog, but it seems that it gets ignored. This is the shape file:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <corners android:radius="10dp" />
    <padding android:left="10dp" android:right="10dp"/>
</shape>

This is the alert dialog xml:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/dialog_rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".UserList"
    android:background="@drawable/shape_dialog">
    <TextView
        android:id="@+id/dialog_titile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Scegli un'operazione"
        android:textAlignment="center"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:background="#D3D3D3"
        android:textSize="26dp" />

    <TextView
        android:id="@+id/dialog_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Vuoi aprire o eliminare il test?"
        android:textAlignment="center"
        android:padding="15dp"
        android:textSize="26dp"
        android:layout_marginLeft="80dp"
        android:background="@android:color/white"
        android:textColor="@android:color/black"
        android:layout_below="@id/dialog_titile" />
    <Button
        android:id="@+id/dialog_neutral_btn"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:text="Indietro"
        android:layout_below="@id/dialog_tv"
        android:textColor="@android:color/black"
        android:background="@drawable/button_bg_3" />
    <Button
        android:id="@+id/dialog_positive_btn"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:text="Apri"
        android:layout_alignBaseline="@id/dialog_neutral_btn"
        android:layout_alignParentRight="true"
        android:background="@drawable/button_bg_3"
        android:layout_marginRight="20dp"/>
    <Button
        android:id="@+id/dialog_negative_btn"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:text="Elimina"
        android:layout_toLeftOf="@id/dialog_positive_btn"
        android:layout_alignBaseline="@id/dialog_neutral_btn"
        android:background="@drawable/button_bg_3"
        android:layout_marginRight="10dp" />
</RelativeLayout>

And this is the result What did I miss?

Possible duplicate of [How to make custom dialog with rounded corners in android](https://stackoverflow.com/questions/28937106/how-to-make-custom-dialog-with-rounded-corners-in-android) — Sanjay Bhalani, Aug 03 '19 at 09:06

Gabriele Mariotti · Answer 1 · 2019-08-23T11:07:50.833

Just use the official Material AlertDialog included in the official Material Components for Android library.

new MaterialAlertDialogBuilder(context)
            .setTitle("Title")
            .setMessage("Message")
            .setPositiveButton("Ok", null)
            .show();

and use the theme

<item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog</item>

It follows the guidelines:

You can customize the shape of your component using the shapeAppearanceOverlay attribute.

Something like:

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

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

Do you have any idea if it is possible to customize the corner radius using `MaterialAlertDialogBuilder`? — Tamir Abutbul, Aug 03 '19 at 09:02
@TamirAbutbul You can define a style (that you can pass to `MaterialAlertDialogBuilder`) using the `shapeAppearanceOverlay` attribute. Answer updated. — Gabriele Mariotti, Aug 23 '19 at 11:09

score 1 · Answer 2 · answered Aug 03 '19 at 08:50

Your shape_dialog.xml should be like

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid
     android:color="@color/white"/>
   <corners
      android:radius="30dp" />
   <padding
    android:left="10dp"
    android:top="10dp"
    android:right="10dp"
    android:bottom="10dp" />
</shape>

You need to set the background of the dialog's transparent like.

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

Quick learner · Answer 3 · 2019-08-03T09:04:46.283

0

Use Dialog Class instead of AlertDialogBuilder.

Code Snippet

define this method showDialog() with using Dialog class instead of AlertBuilder

public void showDialog() {

    final Dialog dialog = new Dialog(this);
    dialog.setContentView(R.layout.your_xml);

    Button dialog_neutral_btn = dialog.findViewById(R.id.dialog_neutral_btn);
    Button dialog_positive_btn = dialog.findViewById(R.id.dialog_positive_btn);
    Button dialog_negative_btn=dialog.findViewById(R.id.dialog_negative_btn);
    TextView dialog_titile = dialog.findViewById(R.id.dialog_titile);
    TextView dialog_tv = dialog.findViewById(R.id.dialog_tv);


   // do you stuff here , define click listeners

    dialog.show();
}

Usage

 yourButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
           showDialog();
        }
    });

Note:-

android.support.v7.app.AlertDialog

instead of

android.app.AlertDialog

Incase you want to go with AlertDialogBuilder

edited Aug 03 '19 at 09:04

answered Aug 03 '19 at 08:42

Quick learner

10,632
4
45
55

I don't think that your answer is very relevant, he is asking here how to make round corners and not how to show a dialog. You are welcome to correct me if I am wrong – Tamir Abutbul Aug 03 '19 at 08:44
And like i mentioned use Dialog class "Instead" of AlertDilogBuilder" is the solution that i have answered for the problem – Quick learner Aug 03 '19 at 08:55
1

In that case, it was my misunderstanding. You got my upvote – Tamir Abutbul Aug 03 '19 at 09:00
Your upvote matters to me only if my answer is working .. Here to help with answers which works for them though .. I am not the best but i am learning :) – Quick learner Aug 03 '19 at 09:03
I have faced issues with AlertDialogBuilder behaviour on Different Versions so i go for Dialog class – Quick learner Aug 03 '19 at 09:09

score 0 · Accepted Answer · answered Aug 03 '19 at 08:47

I have checked your shape and it looks good on my phone, I have this shape that works the same way + have gradiant :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:angle="-90"
    android:centerColor="#F2F2F2"
    android:endColor="#ADA996"
    android:startColor="#DBDBDB" />
<stroke
    android:width="2dp"
    android:color="#000000" />
<corners android:radius="8dp" />

<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

Try to use the shape above, If it will not work anyway try to use your shape on a single button - if you will see your shape working correctly you will know that your problem is coming from your layout file.
And maybe all you need to do Invalidate Caches/Restart, it is possible that you have no mistakes but your app is using old shape coming from the cache

I think AlertDialogBuilder behaviour is varies with Different versions . Thats what i think and If invalidating studio helps thats Perfect anyways havent tried that ever — Quick learner, Aug 03 '19 at 09:06

score 0 · Answer 5 · answered Aug 03 '19 at 09:05

You can achieve by doing below steps.

You have to create two shape drawable xml for Textview and for main layout

1. border_no_white_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<stroke
    android:width="1dp"
    android:color="@color/white" />

  <corners android:radius="6dp" />
</shape>



2. shape_button_orange_bg_with_radius.xml

<?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke
    android:width="1dp"
    android:color="@color/black" />
  <corners android:radius="15dp" />
</shape>

3. Now in main_popup.xml, replace by below code
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="15dp"
    android:background="@drawable/border_no_white_bg"
    android:orientation="vertical">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:background="#CCCCCC"
        android:baselineAligned="false"
        android:gravity="center"
        android:padding="10dp"
        android:text="Scegli un'operazione"
        android:textColor="#000"
        android:textSize="18sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:baselineAligned="false"
        android:gravity="center"
        android:padding="10dp"
        android:text="Vuoi aprire o eliminare il test?"
        android:textColor="#000"
        android:textSize="18sp" />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:orientation="horizontal">


        <Button
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="@drawable/shape_button_orange_bg_with_radius"
            android:text="Indietro"
            android:textColor="#000"
            android:textSize="14sp" />


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:orientation="horizontal">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/shape_button_orange_bg_with_radius"
                android:text="Apri"
                android:textColor="#000"
                android:textSize="14sp" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="15dp"
                android:background="@drawable/shape_button_orange_bg_with_radius"
                android:text="Elimina"
                android:textColor="#000"
                android:textSize="14sp" />
        </LinearLayout>

    </RelativeLayout>


     </LinearLayout>

 </RelativeLayout>


4. popup_window_animation
   Inside res->values->style.xml, add this code



<style name="popup_window_animation">
    <item name="android:windowEnterAnimation">@anim/fade_in</item>
    <item name="android:windowExitAnimation">@anim/fade_out</item>
</style>

Now Create a method to invoke this layout

public void showPopup(View anchorView) {

    final View popupView = getLayoutInflater().inflate(R.layout.main_popup, null);

    RelativeLayout layout_close;
    // Declare your views here

    final PopupWindow popupWindow = new PopupWindow(popupView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    popupWindow.setAnimationStyle(R.style.popup_window_animation);

    layout_feedback_close = (RelativeLayout) popupView.findViewById(R.id.layout_feedback_close);
    // Here find view by ids

    layout_feedback_close.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

    popupWindow.setFocusable(true);
    popupWindow.setBackgroundDrawable(new ColorDrawable());
    int location[] = new int[2];
    anchorView.getLocationOnScreen(location);
    popupWindow.showAtLocation(anchorView, Gravity.CENTER, location[0], location[1] + anchorView.getHeight());
     }

Add rounded corner to Alert Dialog

5 Answers5