Add custom borders to Alert Dialog Builder Layout

Question

I'm trying to add a custom layout with borders to my Alert Dialog builder, but this is the result I got:

I created a style for my dialog:

<style name="MyDialog" parent="@android:style/Theme.Dialog">
    <item name="android:background">@drawable/dialog_background</item>
</style>

And this is how I defined it:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid
    android:color="#00000000" />
<stroke
    android:width="5dp"
    android:background="#00ffffff" />
<corners android:radius="20dp" />

Then, in the layout I defined this as well:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/_100sdp"
android:layout_height="@dimen/_80sdp"
android:gravity="center"
style="@style/MyDialog">

<CheckBox
    android:id="@+id/myCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="@dimen/_10sdp"
    android:text="Abilitare la palette di colori?" />

<EditText
    android:id="@+id/nameEditText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/genderRadioGroup"
    android:layout_alignParentLeft="true"
    android:ems="10"
    android:hint="Inserisci l'eta'">

    <requestFocus />
</EditText>

<RadioGroup
    android:id="@+id/genderRadioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/myCheckBox"
    android:checkedButton="@+id/maleRadioButton">


    <RadioButton
        android:id="@+id/maleRadioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Maschio" />


    <RadioButton
        android:id="@+id/femaleRadioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/maleRadioButton"
        android:layout_alignParentLeft="true"
        android:text="Femmina" />
</RadioGroup>

1) Why the OK button is out of the shape? 2) How can I make the background transparent since I cannot use the getWindow().setBackgroundDrawableResource(android.R.color.transparent); method? This is the Java code of the Alert:

new AlertDialog.Builder(MainActivity.this).setView(formElementsView)
                    .setPositiveButton("OK", new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int id) {
                            InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
                            imm.hideSoftInputFromWindow(v.getWindowToken(), 0);
                            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
                            int selectedId = genderRadioGroup.getCheckedRadioButtonId();
                            RadioButton selectedRadioButton = (RadioButton) formElementsView.findViewById(selectedId);
                            Intent myIntent = new Intent(MainActivity.this, PaintingActivity.class);
                            myIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
                            if (myCheckBox.isChecked()) myIntent.putExtra("palette", "yes");
                            else myIntent.putExtra("palette", "no");
                            myIntent.putExtra("gender", selectedRadioButton.getText());
                            String eta = nameEditText.getText().toString();
                            if (eta.length()!=0) myIntent.putExtra("eta", eta);
                            else myIntent.putExtra("eta", "0");
                            myIntent.putExtra("protocollo", "a");
                            myIntent.putExtra("cornice", "1" + "");
                            myIntent.putExtra("userLogged", userLogged);
                            myIntent.putExtra("first", "yes");
                            MainActivity.this.startActivity(myIntent);
                            dialog.cancel();
                        }

                    }).show().getWindow().setLayout(600, 600);

Answer 1

With the new Material Theme 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>

You can also define the style for all dialogs in you app adding this attribute in your theme:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> 
    ...
    <item name="materialAlertDialogTheme">@style/MyThemeOverlayAlertDialog</item>
    ...
</style>

Answer 2

Why the OK button is out of the shape? -

Beacause you have used .setPositiveButton("OK",.. If you want an OK button define it directly on the customized xml file.

How can I make the background transparent -

Set a background to the customized layout just like you have created the shape and adding a color to it. Place it in the root layout.

A relatable example,

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@android:color/transparent">

<!--Transparent background for outermost layout-->

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/alert_background_xml"
        android:layout_margin="20dp"
        android:layout_centerInParent="true">

<!--alert_background_xml is your customized style -->
    <!--Your views and buttons here including the OK Button-->

    </RelativeLayout>
    </RelativeLayout>