Setting backgroundTint on Material Button with alpha has a weird visual effect in normal and pressed state

Question

I'm using Material Buttons in my project and trying to set backgroundTint with alpha value.

<!-- background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/black" android:alpha="0.60"/>
</selector>

<!-- activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Sign in"
        app:backgroundTint="@color/background_tint" />
</LinearLayout>

The resulting button however looks weird while in normal state and even weirder while pressed.

I don't see this issue when I set backgroundTint to specific shade of gray such as #777777. Why does this happen with alpha value?

Answer 1

We had the same issue with partially opaque elevated material views.

Simply adding android:stateListAnimator="@null" removed the visible shadow artifacts.

We also set the elevation to 0dp which I don't think is required.

Answer 2

You just need to change the style property of Material Button.

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"