How to change material designed dialog positive button background correctly

Question

I have the following dialog

It is created by using the following code

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Random random = new Random();
    // 0 or 1.
    final int value = random.nextInt(2);
    final int title = R.string.we_love_you_0; 
    final int content = R.string.rate_us_with_5_stars_review_0;

    final AlertDialog dialog = new AlertDialog.Builder(this.getActivity())
    .setTitle(title)
    .setMessage(content)
    // Add action buttons
    .setPositiveButton(R.string.rate_5_stars, new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int id) {
        }
    })
    .setNegativeButton(R.string.no, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int id) {
        }
    })
    .setNeutralButton(R.string.later, new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int id) {
        }
    })
    .create();

    dialog.setCanceledOnTouchOutside(false);

    return dialog;
}

Since, we want to draw user attention on the positive button (RATE 5 STARS). We tend to

Have a white button text color
Have a blue button background color

We add the following code, just before returning dialog

    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
         @Override
         public void onShow(DialogInterface d) {
             Button positiveButton = dialog.getButton(AlertDialog.BUTTON_POSITIVE);
             positiveButton.setTextColor(rateAppDialogPositiveButtonTextColor);
             positiveButton.setBackgroundColor(rateAppDialogPositiveButtonBackgroundColor);
         }
     });

We get the following outcome

It doesn't achieve what we want as

The positive button lost its default margin and padding information.
The positive button pressed ripple selector behavior gone.

This is how it is being compared, with normal button pressed. In our case, when we press on the positive button, no visual change.

Is there a proper way to change material designed dialog positive button background, without losing its default margin, padding and ripple selector behavior?

For achieving such functionality, You should use custom dialog instead of using AlertDialog by creating custom layout to inflate. — Jaimin Modi, May 02 '16 at 06:19

score 1 · Answer 1 · 2016-05-02T06:49:18.483

Create Custom dialog like this way so you can give it color.

Just a simple one! Create a dialog method, something like this anywhere in your Java class:

public void openDialog() {
    final Dialog dialog = new Dialog(context); // Context, this, etc.
    dialog.setContentView(R.layout.dialog_demo);
    dialog.setTitle(R.string.dialog_title);
    dialog.show();
}

Now create Layout XML dialog_demo.xml and create your UI/design. Here is a sample one I created for demo purposes:

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/textview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#000000"
    android:text="We love you!"
    android:textStyle="bold"
    android:layout_marginLeft="10dp"
    android:textSize="16sp"/>
<TextView
    android:id="@+id/textview2"
    android:layout_below="@+id/textview1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="Can we assume that the feeling's mutual ?"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="30dp"
    android:textSize="16sp"/>
<TextView
    android:id="@+id/textview3"
    android:layout_below="@+id/textview2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="If you've been enjoying our app, we'd really appreciate it if you could leave us a nice revire in the market."
    android:layout_marginLeft="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="30dp"
    android:textSize="16sp"/>

<TextView
    android:id="@+id/textview4"
    android:layout_below="@+id/textview3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="It'll really help us grow ?"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    android:textSize="16sp"/>

<Button
    android:id="@+id/dialog_later"
    android:layout_width="wrap_content"
    android:layout_below="@+id/textview4"
    android:layout_height="wrap_content"
    android:textColor="#0072BA"
    android:textSize="14sp"
    android:textStyle="bold"
    android:layout_marginTop="10dp"
    android:background="@android:color/transparent"
    android:text="LATER"/>

<Button
    android:id="@+id/dialog_no"
    android:layout_width="wrap_content"
    android:layout_below="@+id/textview4"
    android:layout_height="wrap_content"
    android:textColor="#0072BA"
    android:textSize="14sp"
    android:textStyle="bold"
    android:layout_marginTop="10dp"
   android:layout_marginLeft="60dp"
    android:background="@android:color/transparent"
    android:text="NO"/>

<Button
    android:id="@+id/dialog_ratestar"
    android:layout_width="wrap_content"
    android:layout_below="@+id/textview4"
    android:layout_height="wrap_content"
    android:textColor="#FFFFFF"
    android:textSize="14sp"
    android:textStyle="bold"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="100dp"
    android:background="#0072BA"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:padding="5dp"
    android:text="RATE 5 STARS *"/>

Now you can call openDialog() from anywhere you like :) Here is the screenshot of above code.

Note that text and color are used from strings.xml and colors.xml. You can define your own.

This doesn't solve the problem. How does your "RATE 5 STARS" button have same margin, padding and selector behavior as the "NO" button? — Cheok Yan Cheng, May 02 '16 at 08:20
@CheokYanCheng what you want give me some specification so I can help you. — , May 02 '16 at 08:27
@CheokYanCheng if you want `ripple effect` then `create` drawable file and set it `Button` background and in the drawable file set the `ripple effect`. — , May 02 '16 at 08:30

score 1 · Accepted Answer · edited May 23 '17 at 12:02

By referring https://stackoverflow.com/a/27505229/72437, I was able to change the background of positive button, without affecting its default margin, padding and selector behavior.

Note that, we don't use colorButtonNormal, as there is no way to change the button style in Java code.

dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Default insets (outer padding) around buttons -->
    <dimen name="button_inset_vertical_material">6dp</dimen>
    <dimen name="button_inset_horizontal_material">@dimen/control_inset_material</dimen>
    <!-- Default inner padding within buttons -->
    <dimen name="button_padding_vertical_material">@dimen/control_padding_material</dimen>
    <dimen name="button_padding_horizontal_material">8dp</dimen>
    <!-- Default insets (outer padding) around controls -->
    <dimen name="control_inset_material">4dp</dimen>
    <!-- Default inner padding within controls -->
    <dimen name="control_padding_material">4dp</dimen>
    <!-- Default rounded corner for controls -->
    <dimen name="control_corner_material">2dp</dimen>
</resources>

colors.xml

<color name="rate_app_dialog_positive_button_text_color_material_light">#ffffffff</color>
<color name="rate_app_dialog_positive_button_background_color_material_light">#ff0091ea</color>
<color name="rate_app_dialog_positive_button_pressed_background_color_material_light">#7f0091ea</color>

attrs.xml

<attr name="rateAppDialogPositiveButtonTextColor" format="color" />
<attr name="rateAppDialogPositiveButtonSelector" format="color" />

drawable-v21/rate_app_dialog_positive_button_selector_for_ripple_material_light.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- Used as the canonical button shape. -->

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="@dimen/button_inset_horizontal_material"
    android:insetTop="@dimen/button_inset_vertical_material"
    android:insetRight="@dimen/button_inset_horizontal_material"
    android:insetBottom="@dimen/button_inset_vertical_material">
    <shape android:shape="rectangle"
        android:tint="@color/rate_app_dialog_positive_button_background_color_material_light">
        <corners android:radius="@dimen/control_corner_material" />
        <solid android:color="#ffffffff" />
        <padding android:left="@dimen/button_padding_horizontal_material"
            android:top="@dimen/button_padding_vertical_material"
            android:right="@dimen/button_padding_horizontal_material"
            android:bottom="@dimen/button_padding_vertical_material" />
    </shape>
</inset>

drawable-v21/rate_app_dialog_positive_button_selector_material_light.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- https://stackoverflow.com/questions/28484369/what-should-be-the-color-of-the-ripple-colorprimary-or-coloraccent-material-d -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_material_dark">
    <!-- @color/ripple_material_light -->
    <!-- @color/ripple_material_dark -->
    <item android:drawable="@drawable/rate_app_dialog_positive_button_selector_for_ripple_material_light" />
</ripple>

drawable/rate_app_dialog_positive_button_selector_material_light.xml

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

    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/rate_app_dialog_positive_button_pressed_background_color_material_light" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/rate_app_dialog_positive_button_pressed_background_color_material_light" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>

    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/rate_app_dialog_positive_button_background_color_material_light" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

themes.xml

    <item name="rateAppDialogPositiveButtonTextColor">@color/rate_app_dialog_positive_button_text_color_material_light</item>
    <item name="rateAppDialogPositiveButtonSelector">@drawable/rate_app_dialog_positive_button_selector_material_light</item>

RateAppDialogFragment.java

    TypedValue typedValue = new TypedValue();
    Resources.Theme theme = this.getContext().getTheme();
    theme.resolveAttribute(R.attr.rateAppDialogPositiveButtonTextColor, typedValue, true);
    final int rateAppDialogPositiveButtonTextColor = typedValue.data;
    theme.resolveAttribute(R.attr.rateAppDialogPositiveButtonSelector, typedValue, true);
    final int rateAppDialogPositiveButtonSelectorResourceId = typedValue.resourceId;

    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
         @Override
         public void onShow(DialogInterface d) {
             Button positiveButton = dialog.getButton(AlertDialog.BUTTON_POSITIVE);
             positiveButton.setTextColor(rateAppDialogPositiveButtonTextColor);
             positiveButton.setBackgroundResource(rateAppDialogPositiveButtonSelectorResourceId);
         }
     });

This works pretty nice for Android 4 and above.

score 0 · Answer 3 · answered Jan 30 '20 at 06:38

              MaterialAlertDialogBuilder(it, R.style.MaterialDialog)
                    .setTitle(R.string.title_logout)
                    .setMessage(R.string.msg_logout)
                    .setNegativeButton("Cancel", null)
                    .setPositiveButton("Ok") { _, _ ->
                        vm.logout()
                        val intent = Intent(context, AuthActivity::class.java)
                        startActivity(intent)
                        activity?.finish()
                    }
                    .create()
                    .show()

Create the dialog using the above code.

<style name="MaterialDialog" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/MaterialDialog.ButtonStyle</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/MaterialDialog.ButtonStyle</item>
    <item name="android:textColorPrimary">@color/black</item>
    <item name="colorPrimary">@color/colorAccent</item>
    <item name="android:background">@color/white</item>
</style>




<style name="MaterialDialog.ButtonStyle">
    <item name="android:background">@color/white</item>
</style>

and add the above styles in your styles