Android Dialog - Rounded Corners and Transparency

Question

I'm trying to make a custom android dialog with rounded corners. My current attempts have given me this result.

As you can see, the corners are rounded, but it leaves the white corner still intact.

Below is the xml that I put in the drawable folder to create the blue dialog with the red border with the rounded corners.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item> 
        <shape 
            android:shape="rectangle">
            <solid android:color="@color/transparent_black" />
            <corners android:radius="@dimen/border_radius"/>
        </shape>
    </item>   
    <item 
        android:left="@dimen/border_width" 
        android:right="@dimen/border_width"  
        android:top="@dimen/border_width"
        android:bottom="@dimen/border_width" >  

        <shape android:shape="rectangle"> 
            <solid android:color="@color/blue" />
            <corners android:radius="@dimen/border_radius"/>
        </shape>
    </item>    
</layer-list>

Below is the layout of the dialog.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/fill"
android:orientation="vertical"
android:layout_margin="@dimen/spacing_normal"
android:padding="@dimen/spacing_normal"

android:background="@drawable/border_error_dialog" >

<RelativeLayout 
    style="@style/block"
    android:layout_gravity="center" >

    <ImageView
        android:id="@+id/imageView1"
        style="@style/wrap"
        android:layout_alignParentLeft="true"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/content_description_filler"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        style="@style/error_text"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageView1"
        android:text="@string/error_login" />

</RelativeLayout>

<Button
    android:id="@+id/button1"
    style="@style/wrap"
    android:layout_gravity="center"
    android:text="Button" />

</LinearLayout>

And below is the Activity in which I create the dialog.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button b1 = (Button) findViewById(R.id.button1);
    b1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {               
            AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this);

            View child = getLayoutInflater().inflate(R.layout.dialog_custom_tom, null);
            alertDialogBuilder.setView(child);

            AlertDialog alertDialog = alertDialogBuilder.create();

            alertDialog.show();
        }
    });
}

Answer 1

 public void initDialog() {
    exitDialog = new Dialog(this);
    exitDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    View view = View.inflate(this, R.layout.dialoglayout, null);
    exitDialog.setContentView(view);
    AdSize adSize = new AdSize(300, 250);

    dialogAdview = new AdView(this);
    dialogAdview.setAdUnitId(getResources().getString(R.string.banner_id));
    dialogAdview.setAdSize(adSize);
    RelativeLayout adLayout = (RelativeLayout) view.findViewById(R.id.adLayout);
    adLayout.addView(dialogAdview);
    AdRequest adRequest = new AdRequest.Builder()
            .build();
    dialogAdview.loadAd(adRequest);
    dialogAdview.setAdListener(new AdListener() {
        @Override
        public void onAdLoaded() {
            Log.d("Tag", "adLoaded");
            super.onAdLoaded();
        }


    });

    view.findViewById(R.id.yes_btn).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            exit = true;
            onBackPressed();
        }
    });

    view.findViewById(R.id.no_btn).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            exit = false;
            exitDialog.dismiss();
        }
    });

}

dialoglayout.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/custom_dialog_round"
    android:orientation="vertical">


    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:text="Do you want to exit?"
        android:textColor="#000"
        android:textSize="18dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/yes_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/background_draw"
                android:padding="8dp"
                android:text="Yes"
                android:textAlignment="center"
                android:textColor="#9fa8da"
                android:textSize="20dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/no_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:background="@drawable/background_draw"
                android:padding="8dp"
                android:text="No"
                android:textAlignment="center"
                android:textColor="#d50000"
                android:textSize="20dp" />
        </LinearLayout>


    </LinearLayout>

</LinearLayout>
`

custom_dialog_round.xml

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

reference http://techamongus.blogspot.com/2018/02/android-create-round-corner-dialog.html

Answer 2

The only solution I have found is here. Use Dialog instead of AlertDialog and set transparent background:
dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
Therefore you can't use the builder. But you can use new Dialog() also in onCreateDialog callback of DialogFragment if you follow to best guidelines.

This works also for Gingerbread.

Besides the layered drawable can be simplified to one shape with xml element <stroke> for the border.

Answer 3

I had similar issue when made dialog extending DialogFragment and to fix this used:

dialog.setStyle(DialogFragment.STYLE_NO_FRAME, 0);

Like this:

public class ConfirmBDialog extends DialogFragment {

public static ConfirmBDialog newInstance() {
    ConfirmBDialog dialog = new ConfirmBDialog();
    Bundle bundle = new Bundle();
    dialog.setArguments(bundle);

    return dialog;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // This removes black background below corners.
    setStyle(DialogFragment.STYLE_NO_FRAME, 0);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.confirm_dialog, container, true);
    getDialog().setCanceledOnTouchOutside(true);
    return view;
}

Hope this helps.

Answer 4

Use CardView and make

app:cardCornerRadius="dp" According shape xml.