Weird behaviour of elevation and translucent color

Question

Here's my view:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_rounded"
    android:backgroundTint="@color/view_primary_color"
    android:elevation="4dp"
    android:foregroundTint="@android:color/white">

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/tvTitle"
        style="@style/Header4.Semibold16.White"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="Add to cart"
        android:textAllCaps="false"
        app:tint="@android:color/white"
        tools:ignore="ContentDescription" />

    <ProgressBar
        android:id="@+id/pbLoading"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>

And here's @color/view_primary_color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDisabled" android:state_enabled="false" />
</selector>

When view's state is enabled it's color is colorPrimary.

When state is disabled view's color is colorPrimaryDisabled which is almost the same as colorPrimary but only with 20% of alpha.

Here's how my view looks like is idle (enabled) state.

But when I click on the view it became like this.

View supposed to just change it's color to slightly translucent, but for some reason there's some shadow inside it.

If I use non-translucent color everything is ok. Or if I remove elevation from the view everything is ok as well.

Feels like this is some kind of bug. Do you have any idea what is this?

Thanks!

That's pretty lucky timing. Someone posted this just yesterday: https://stackoverflow.com/q/70227950. — Mike M., Dec 06 '21 at 16:58
(Not implying any nefarious connection, or anything. Just noting the coincidence.) — Mike M., Dec 06 '21 at 17:04
eeh, to be honest this solution in this post feels a bit off. I can't believe there is really no other options. — Nikita Kalugin, Dec 06 '21 at 17:30
If you find one, you might want to link/post it there, too, and maybe some of those other questions they link. — Mike M., Dec 06 '21 at 17:33

score -1 · Answer 1 · answered Dec 06 '21 at 16:58

using MaterialButton instead of textView like this

<com.google.android.material.button.MaterialButton
            android:id="@+id/btn_add_to_card"
            android:layout_width="120dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="16dp"
            android:elevation="0dp"
            android:enabled="false"
            android:fontFamily="@font/sans_normal"
            android:gravity="center"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            android:minWidth="0dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:stateListAnimator="@null"
            android:text="@string/addToCard"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:translationZ="0dp"
            app:backgroundTint="@color/btn_primary_state"
            app:cornerRadius="24dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/scrollview_edittext" />

background tint:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:color="@color/green_button" />
    <item
        android:state_enabled="false"
        android:color="@color/gray_button"
        />
</selector>

Weird behaviour of elevation and translucent color

1 Answers1