Tuesday, 21 December 2021

Material design 3 ripple opacity

Currently MD3 uses a 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.



from Material design 3 ripple opacity

No comments:

Post a Comment