Android - MaterialCardView not displaying on API level 27 devices

Question

I'm creating an XML layout which users MaterialCardViews so I can set the card background colour and corner radius.

It displays as expected in the XML Design tab within Android Studio and also when deployed to a API 28+ device.

When deploying to a API 27 device the card view does not render.

Am I missing something or will MaterialCardViews not work using API 27 and older?

My Layout

<?xml version="1.0" encoding="utf-8"?>
<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="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="20dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:padding="12dp">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/emojiBackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="1000dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:cardBackgroundColor="#005ECB">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp">

            <TextView
                android:id="@+id/emoji"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingBottom="4dp"
                android:textColor="@android:color/black"
                android:textSize="30sp"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="🍟" />

        </androidx.constraintlayout.widget.ConstraintLayout>

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

</androidx.constraintlayout.widget.ConstraintLayout>

Design View

On Device View

My Dependencies

    implementation 'androidx.core:core-ktx:1.6.0'
    implementation 'androidx.appcompat:appcompat:1.3.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
    implementation 'androidx.navigation:navigation-fragment-ktx:2.3.5'
    implementation 'androidx.navigation:navigation-ui-ktx:2.3.5'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
    implementation "androidx.recyclerview:recyclerview:1.2.0"
    implementation "androidx.cardview:cardview:1.0.0"
    implementation "androidx.percentlayout:percentlayout:1.0.0"

Answer 1

cardBackgroundColor is custom propery of MaterialCardView, so it have own prefix set by xmlns:app="http://schemas.android.com/apk/res-auto" line on top of XML file (you can exchange beginning with e.g. xmlns:whatever="..." and then you may use whatever:cardBackgroundColor prefix)

text is attribute set for TextView present on every Android version so just use default android: prefix

so try to put proper prefixes instead of tools:

tools:cardBackgroundColor="#005ECB"

to

app:cardBackgroundColor="#005ECB"

and

tools:text="🍟"

to

android:text="🍟"

tools prefix is just configuring/disabling some lint checks, isn't related to attributes of particular Views

btw. "design view" have options (drop down lists) for setting orientation, API lvl (OS version), device language and some other params for preview puproses. try to set same API lvl as you have on device - your preview should look exacly same as on device