I am running a test app to practice themes. The app runs fine in light mode. When I turn on Dark Mode in my device, it fails to load the layout file, more Specifically when the MaterialToolbar is used in layout.

Test Device Vivo V23 Pro. Os Android 12 Project Details

build tools 31.0.0 , minSdk 21 , targetSdk 31 , compileSdk 31

App Theme

<style name="Theme.UITesting" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    </style>

I tried to use the toolbar as follows

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent"
    tools:context=".activity.UITestActivity"
>
    <include layout="@layout/action_bar_simple"/>
    ...
</RelativeLayout>

Toolbar code

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout
    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:id="@+id/action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
>
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
    >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        >

            <ImageView
                android:id="@+id/iv_back"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginEnd="8dp"
                android:padding="4dp"
                app:srcCompat="@drawable/ic_arrow_back_24"
                android:scaleType="fitCenter"
                android:visibility="invisible" />

            <TextView
                android:id="@+id/tv_toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toEndOf="@id/iv_back"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold"
                tools:text="SCREEN TITLE " />
        </RelativeLayout>
    </com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>

When I turn on Dark Theme in my device the app crashes with following message java.lang.IllegalStateException: Can't make a decor toolbar out of AppBarLayout

When I comment out the include statement it works fine. How can I fix this issue.