Errors in style/theme for Material3 components in legacy app

Question

I'm trying to use SearchBar and SearchView from the material components library in my app. These are new components for Material 3.

    implementation 'com.google.android.material:material:1.12.0'

This is an app that has been worked on for a long time, so the theme is using a "bridge" theme so AppCompat can keep working with Material 2:

    <style name="Base.Theme.MyApp.NoActionBar" parent="Theme.MaterialComponents.NoActionBar.Bridge">

I have a fragment that looks like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.search.SearchBar
            android:id="@+id/search_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/second_hint"
            app:backgroundTint="@color/dark"/>

    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.search.SearchView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_anchor="@id/search_bar"
        android:hint="@string/second_hint"
        app:backgroundTint="@color/dark">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/search_list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </com.google.android.material.search.SearchView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Inflating this fragment produces the following crash:

Caused by: android.view.InflateException: Binary XML file line #80 in com.myapp.android.debug:layout/mtrl_search_view: Failed to resolve attribute at index 1: TypedValue{t=0x2/d=0x7f040346 a=-1}, theme={InheritanceMap=[id=0x7f1603bccom.myapp.android.debug:style/ThemeOverlay.Material3.Search], Themes=[com.myapp.android.debug:style/ThemeOverlay.Material3.Search, forced, com.myapp.android.debug:style/Theme.MyApp.NoActionBar, forced, com.myapp.android.debug:style/Theme.AppCompat.Empty, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}
Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 1: TypedValue{t=0x2/d=0x7f040346 a=-1}, theme={InheritanceMap=[id=0x7f1603bccom.myapp.android.debug:style/ThemeOverlay.Material3.Search], Themes=[com.myapp.android.debug:style/ThemeOverlay.Material3.Search, forced, com.myapp.android.debug:style/Theme.MyApp.NoActionBar, forced, com.myapp.android.debug:style/Theme.AppCompat.Empty, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}

Line 80 is at the bottom of this view:

          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="?attr/materialSearchViewToolbarHeight"
              android:gravity="center_vertical"
              android:orientation="horizontal">

I assume it's choking on the attribute reference.

So I added this block to the style:

        <item name="materialSearchBarStyle">@style/Widget.Material3.SearchBar</item>
        <item name="materialSearchViewStyle">@style/Widget.Material3.SearchView</item>
        <item name="materialSearchViewPrefixStyle">@style/Widget.Material3.SearchView.Prefix</item>
        <item name="materialSearchViewToolbarHeight">72dp</item>
        <item name="materialSearchViewToolbarStyle">@style/Widget.Material3.SearchView.Toolbar</item>

then I get this:

Caused by: android.view.InflateException: Binary XML file line #118 in com.myapp.android.debug:layout/mtrl_search_view: Binary XML file line #118 in com.myapp.android.debug:layout/mtrl_search_view: Error inflating class <unknown>
Caused by: android.view.InflateException: Binary XML file line #118 in com.myapp.android.debug:layout/mtrl_search_view: Error inflating class <unknown>
Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 13: TypedValue{t=0x2/d=0x7f040126 a=-1}, theme={InheritanceMap=[id=0x7f1603bccom.myapp.android.debug:style/ThemeOverlay.Material3.Search], Themes=[com.myapp.android.debug:style/ThemeOverlay.Material3.Search, forced, com.myapp.android.debug:style/Theme.MyApp.NoActionBar, forced, com.myapp.android.debug:style/Theme.AppCompat.Empty, forced, android:style/Theme.DeviceDefault.Light.DarkActionBar, forced]}

The offending line is at the bottom of this view:

      <View
          android:id="@+id/open_search_view_divider"
          android:layout_width="match_parent"
          android:layout_height="@dimen/m3_searchview_divider_size"
          android:background="@macro/m3_comp_search_view_divider_color"/>

If I apply a Material3 theme directly to the fragment:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Theme.Material3.Dark"

I get the same crash.

I guess I don't understand Android theming very well.

How can I make this new fragment with the Material 3 components work with the style of my app?

Answer 1

I was closer than I thought.

By adding color attributes as documented here and adding the materialSearch... style attributes I listed in my question, I got the fragment to inflate without crashing.

Now I just have to make the fragment not look like crap.