How to fix Android CardView Opacity error

Question

CardView will give the white background opacity so that the background is visible. A shadow effect is also required here. However, the background of the card view becomes strange as the elevation value increases. Is there any way to fix this??

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#BEBEBE"
        >
        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="@id/cardView"
            app:layout_constraintStart_toStartOf="@id/cardView"
            app:layout_constraintEnd_toEndOf="@id/cardView"
            app:layout_constraintBottom_toBottomOf="@id/cardView"
            android:src="@drawable/ic_launcher_background"
            />
        <com.google.android.material.card.MaterialCardView
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginHorizontal="30dp"
            app:cardElevation="10dp"
            app:cardBackgroundColor="#99FFFFFF"
            >

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:orientation="vertical"
                android:gravity="center"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="sample"
                    />

            </androidx.appcompat.widget.LinearLayoutCompat>

        </com.google.android.material.card.MaterialCardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

Is there any way to fix this??

Answer 1

Using the material components that Android offers comes with its share of side effects. All of these repercussions are very well documented on either the Android or the Material Design websites, but basically what you're seeing here is that Material Cards are pre-programmed to change the hue of their color as elevation increases, as to give a sense of 'depth' to the screen.

With that said, I wouldn't recommend you use transparent cards, as that's not the intended use for them. If you need to create any kind of transparent surface, consider using a regular View, and adding all the attributes that you need from the CardView separately; e.g., round corners, elevation, etc.

When using Material components, it's important to understand what the intended use is for each one of them, as well as familiarizing oneself with all these 'side effects,' as I've called them, that are more features than contingencies.