androidx cardview settings lost when running on emulator

Question

I have a recyclerview with cardview for each item. The layout looks fine from Android Studio design. But when it is running on Emulator and inspecting the layout, some of the cardview settings are changed and the layout is different from design page.

Here is the design along with the XML layout file:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.example.androidclient.me.ui.SchoolListViewModel" />
    </data>

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

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="80dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="80dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:itemCount="20"
            tools:listitem="@layout/school_list_item" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

The cardview layout file is:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="12dp"
        app:cardBackgroundColor="@color/design_default_color_error"
        app:cardCornerRadius="4dp"
        app:cardElevation="8dp"
        app:contentPadding="8dp"
        app:contentPaddingBottom="10dp">

        <TextView
            android:id="@+id/school_list_item_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            tools:text="school name" />
    </com.google.android.material.card.MaterialCardView>

</layout>

Here is what is shown on the emulator along with the layout inspection of cardview:

The dependency section in the app build.gradle is:

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.5.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.5.1'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.5.1'
    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.2'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.2'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.google.android.material:material:1.6.1'
    // Retrofit with Moshi Converter
    implementation 'com.squareup.retrofit2:converter-moshi:2.9.0'
    implementation 'com.squareup.moshi:moshi-kotlin:1.13.0'
    implementation 'com.squareup.okhttp3:logging-interceptor:3.8.0'
    // paging
    implementation "androidx.paging:paging-runtime:3.1.1"

    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}