Material design 3 ripple opacity

Question

Currently, MD3 uses an opacity/alpha of I think 50% of the specified ripple color for their pressed state on components. Is there any way to change the opacity of it?

This is what I currently use to test the ripple effect on material buttons in MD3:

<style name="Widget.App.Button" parent="Widget.Material3.Button">
    <item name="rippleColor">@color/black_000</item>
    <item name="android:textColor">@color/button_filled_foreground_color</item>
    <item name="backgroundTint">@color/white_1000</item>
</style>

The button:

<Button
    style="@style/Widget.App.Button"
    android:id="@+id/create_account_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/create_account"
    app:layout_constraintBottom_toTopOf="@id/log_in_button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

In this example the background color is white and the ripple effect will be gray. How can I change the ripple opacity to 100% so that it results in the ripple effect being black? I use 1.5.0-beta01 material version.

Answer 1

I really don't think you can change the ripple color opacity because it is decided by the framework. It is handled by the RippleDrawable class for devices with lollipop and above and RippleDrawableCompat class for pre lollipop devices.

Ripple opacity will be determined by the Android framework when available. Otherwise, this color will be overlaid on the button at a 50% opacity when button is pressed.

From MaterialButton documentation.

If you really want solid black color ripple , you can try creating a custom drawable with selector tag and set it as background in your button with backgroundTint as "null". However i don't recommend doing this.