Change Dialog Buttons to Clear with ripple effect in styles.xml

Question

I have a simple dialog box with two buttons, Positive and Negative that is taking a simple style layout I have defined in the styles.xml. I want the cancel button to have a clear background but still have user feedback when touching it (like a ripple effect of red). I've tried for 2 days now and no luck. Any input would be great.

Working with Ripple Effect:

My code for the next layout which makes the layout have a clear background for cancel but no ripple effect. But I do get a ripple effect for the Yes:

 <style name="AlertDialogThemeTesting" parent="Theme.AppCompat.Dialog.Alert">
    <item name="colorControlHighlight">@color/Red</item>
    <item name="colorControlActivated">@color/Red</item>
    <item name="colorControlNormal">@color/Red</item>
    <item name="android:textColor">@color/Black</item>
    <item name="android:textColorPrimary">@color/Gray</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
</style>

<style name="NegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">@color/Black</item>
    <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
    <item name="backgroundTint">@color/Clear</item>
</style>

<style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">@color/Black</item>
    <item name="android:background">?attr/selectableItemBackgroundBorderless</item>
    <item name="android:backgroundTint">@color/Gold</item>
</style>

Clear Background but no Ripple Effect:

It seems like adding a Clear/White background removes the ripple effect for some reason.

Code for Dialog:

final AlertDialog.Builder alert = new AlertDialog.Builder(PopOut.this,
        R.style.AlertDialogTheme);
alert   .setTitle("Delete Profile?")
        .setMessage("Are you sure you want to delete" + profile)
        .setPositiveButton("OK",
                new DialogInterface.OnClickListener()
                {
                    public void onClick(DialogInterface dialog,
                                        int whichButton)
                    {
                        finish();
                        dialog.dismiss();
                    }
                })
        .setNegativeButton("Cancel", null);

final AlertDialog dialog = alert.create();
dialog.show();

Did you check with a different color for the **cancel** button whether the effect is working or not? — Sajith, May 03 '19 at 11:44
Yeah if I change it to anything besides Clear or White it seems to work perfectly. Which is why this is so strange @Sajith — Jolopy, May 03 '19 at 13:03
Have you try the property colorButtonNormal https://stackoverflow.com/a/29053700/4017501 — cutiko, May 03 '19 at 14:47

Sajith · Accepted Answer · 2019-05-03T15:17:25.543

Define your Button like below ,

<LinearLayout

    android:id="@+id/test_btn"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="68dp"
    android:background="@drawable/button_effect"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="0dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:fontFamily="@font/titilliumweb_bold"
        android:gravity="center"
        android:text="Test Button"
        android:textColor="@color/UcabWhite" />

</LinearLayout>

create button_effect.xml in drawable class like below,

   <ripple xmlns:android="http://schemas.android.com/apk/res/android"
     android:color="@color/colorPrimary"     //colour you want the effect
     android:exitFadeDuration="@android:integer/config_shortAnimTime">
       <selector>
          <item>
             <color android:color="@android:color/transparent" />
          </item>
      </selector>
   </ripple>

At the same time define setOnClickListner for the Button in your activity or Dialog.

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

        }
    });

I have tested this and it works like a charm. Give it a try and let me know if you have any difficulties.

EDIT

Define your Alert Dialog like below. When long press the cancel button you can see the ripple effect. But when you just click it no time to show the effcet as alert is dismiss.

 final AlertDialog.Builder alert = new AlertDialog.Builder(this, R.style.AppTheme);
    alert.setTitle("Delete Profile?")
            .setMessage("Are you sure you want to delete")
            .setPositiveButton("OK",
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog,
                                            int whichButton) {
                            finish();
                            dialog.dismiss();
                        }
                    })
            .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {

                }
            });

    final AlertDialog dialog = alert.create();
    dialog.show();

    Button negativeButton = dialog.getButton(DialogInterface.BUTTON_NEGATIVE);
    negativeButton.setBackgroundResource(R.drawable.button_mini_oval);

It will help.

Yeah I know this would work since its using a custom layout but I really wanted to get the Dialog Positive / Negative buttons to work without a custom layout. Since I would have to rewrite a decent chunk since I have around 8 dialog with all different settings. Do you know any way of settings the AlertDialog.BUTTON_POSTIVE to a different layout like this? — Jolopy, May 03 '19 at 14:18
added the code after the original post. And the XML I'm using is already linked at the top which is the styles code. Thanks for trying to help! — Jolopy, May 03 '19 at 14:44
That code worked with a setBackgroundResource with a ripple effect such as `negativeButton.setBackGroundResource(R.drawable.rippleEffect)` Don't need to have a on click on it since it still registers. Thanks for the assistance! — Jolopy, May 03 '19 at 15:39

Change Dialog Buttons to Clear with ripple effect in styles.xml

1 Answers1