CardView default elevation value

Viewed 614

I'm trying to show a badge(Pink TextView) on my CardView as below:

enter image description here

The elevation value of the CardView is not set, so it should be default and the elevation of the badge is set to 2dp.

With API Level > 22 there is no problem, but with API Level <= 22 the badge stays under the CardView as below:

enter image description here

When I change the elevation value of the badge from 2dp to 2.285738dp then it works.

My initial idea was that the default elevation value of the CardView changes according to the API Level. Wanted to post here to find out a more logical reason for that.

<androidx.constraintlayout.widget.ConstraintLayout 
    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="wrap_content"
    android:clipToPadding="false"
    android:paddingBottom="8dp">

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:layout_marginStart="@dimen/margin_horizontal_default"
    android:layout_marginTop="@dimen/margin_inner_half_default"
    android:layout_marginEnd="@dimen/margin_horizontal_half_default"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="?backgroundCardColor"
    app:cardCornerRadius="@dimen/card_corner_radius"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/accountImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_inner_default"
            android:src="@drawable/ic_account"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/accountImage"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/accountIdText"
                style="@style/TextStyle.SemiBoldActiveMedium"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="12058.01" />

            <TextView
                android:id="@+id/accountTypeText"
                style="@style/TextStyle.BoldSmallInactive"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                tools:text="Collection" />

        </LinearLayout>

        <TextView
            android:id="@+id/tvAmountView"
            style="@style/TextStyle.BoldPrime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="4dp"
            android:layout_marginBottom="1dp"
            android:textSize="15sp"
            app:layout_constraintBottom_toBottomOf="@id/ivChevron"
            app:layout_constraintEnd_toStartOf="@+id/tvAmountCurrency"
            app:layout_constraintTop_toTopOf="@id/ivChevron"
            tools:text="13,592.04" />

        <TextView
            android:id="@+id/tvAmountCurrency"
            style="@style/TextStyle.BoldSmallInactive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="4dp"
            app:layout_constraintBottom_toBottomOf="@id/ivChevron"
            app:layout_constraintEnd_toStartOf="@id/ivChevron"
            app:layout_constraintTop_toTopOf="@id/ivChevron"
            tools:text="KES" />

        <ImageView
            android:id="@+id/ivChevron"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/margin_inner_default"
            android:src="@drawable/ic_chevron_right"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

<TextView
    android:id="@+id/accountCurrencyText"
    style="@style/TextStyle.InvertedTag"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_marginStart="@dimen/margin_horizontal_half_default"
    android:background="@drawable/background_inverted_secondary"
    android:elevation="2dp"
    android:gravity="center_vertical"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="KES" />

2 Answers

Please try replacing your TextView with the androidx.TextView and see if it works.

I had this problem before and fixed it by setting elevation for both of two items, in the background, I set 2sp and for the item, in the foreground, I set 4sp. and it works perfectly. The default value for CardView is 2dp.

Related