CardBackgroundColor cannot work while give cardElevation="0dp"

Issue

When I'm giving CardView to app:CardBackgroudColor="@color/black" it's work

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.cardview.widget.CardView
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_gravity="center"
        android:layout_margin="2dp"
        app:cardCornerRadius="20dp"/>
    <androidx.cardview.widget.CardView
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:layout_gravity="center"
        app:cardBackgroundColor="@color/black"
        app:cardCornerRadius="19dp"/>
</FrameLayout>

CardView img 1

But, When I'm giving CardView to app:CardBackgroudColor="@color/black" and app:cardElevation="0dp" card background color remove from the card.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.cardview.widget.CardView
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_gravity="center"
        android:layout_margin="2dp"
        app:cardCornerRadius="20dp"/>
    <androidx.cardview.widget.CardView
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:layout_gravity="center"
        app:cardElevation="0dp"
        app:cardBackgroundColor="@color/black"
        app:cardCornerRadius="19dp"/>
</FrameLayout>

CardView img 2

Solution

It's Because of Elevation and z-index, by default card view has 4dp elevation and that's the reason the card view place on top of the other views, if you have a view that has 4dp elevation and another view that has 6dp the view with 6dp elevation always be on top of other views, when you set the elevation 0 to card view, the other view that has elevation place on top of this card view. to solve this problem, you have 2 options:
1- make your both card view elevation to 0dp
2- wrap your second card view that has black background in first card view for example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.cardview.widget.CardView
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_gravity="center"
        android:layout_margin="2dp"
        app:cardCornerRadius="20dp">

        <androidx.cardview.widget.CardView
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:layout_gravity="center"
            app:cardElevation="0dp"
            app:cardBackgroundColor="@color/black"
            app:cardCornerRadius="19dp"/>

      <androidx.cardview.widget.CardView/>
</FrameLayout>

Answered By - OneDev