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

user_2132460 0
Viewed 2616

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.
enter image description here
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?

material-components material-components-android material-design android
3 Answers

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

Weird octagonal shadow artifacts

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

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

user_24354020

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

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

It's probable that you're seeing the shadow beneath. It seems like Material Design shadows are weird. It feels like the shadows are only at the sides as you're not suppose to see them anyways.

You can fix it by using an unelevated button (style="@style/Widget.MaterialComponents.Button.UnelevatedButton") or by trying to recreate that shade of gray without alpha (by maybe screenshotting the part without the shadow weirdness and using an eyedropper to get the color in RGB)

Also, it seems like you're trying to change the color of the selector. It can be achieved by using app:rippleColor="@color/yourRippleColor". Background tint changes the color of the button itself according to the Material Components Documentation (Material Component: Button). Adjusting the alpha adjusts opacity of the color making your button more transparent/opaque enabling you to see beneath it.

user_58607290
Related