CardView default elevation value

Question

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

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:

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" />

score 0 · Answer 1 · answered Mar 09 '20 at 09:42

0

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

answered Mar 09 '20 at 09:42

João Martins

706
1
8
20

This happens in the LayoutInflater automatically, you absolutely do not have to use androidx TextViews or ImageViews in your xml files. – RobCo Mar 09 '20 at 10:32
Replacing to androidx did not change the behavior unfortunately. – Aydinozkan Mar 09 '20 at 14:05
What does your `style="@style/TextStyle.InvertedTag"` and `android:foreground="?android:attr/selectableItemBackground"` do? – João Martins Mar 09 '20 at 14:26
Is your `TextView` part of the `CardView` layout? I assume that inside your `CardView` you have all these views with Image, Text etc. I would set some padding/margin to the `CardView`, perhaps having the `CardView` inside a `FrameLayout` or a `ConstraintLayout` and then the Badge below the `CardView` in the hierarchy so that it would always show on top of the `CardView`. – João Martins Mar 09 '20 at 14:53
I added the complete layout. `InvertedTag` is just a style in which I set `fontFamily`, `textSize`, `textColor`, etc. – Aydinozkan Mar 09 '20 at 17:42
This is indeed an interesting problem. This should be working 99.9% of the times. I have had some other issues with compatibility between API versions but I had always fixed it with `androidx` or `appcompat` versions of the views. Could you try the `appcompat` version of the `TextView` this time? – João Martins Mar 10 '20 at 07:55
1

Changing to AppCompatTextView did not work, but changing from `androidx.cardview.widget.CardView` to `com.google.android.material.card.MaterialCardView` did :) – Aydinozkan Mar 11 '20 at 06:01
So please accept the answer and/or update you question :) Glad my idea helped you find the solution. – João Martins Mar 12 '20 at 14:10

score 0 · Answer 2 · answered Mar 09 '20 at 09:57

0

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.

answered Mar 09 '20 at 09:57

Amjad Alwareh

2,926
22
27

Seems like for Api Level <= 22; the default elevation for CardView is not `2dp` because the badge only came to foreground with elevation `2.285738dp`. – Aydinozkan Mar 09 '20 at 14:08

CardView default elevation value

2 Answers2