[Search bar] How to property style the SearchBar and SearchView

[elegidocodes]

Is your feature request related to a problem? Please describe. I'm having trouble customizing the appearance of the SearchBar and SearchView in my Android application. I need to change aspects such as colors (background, text, icons), padding, and overall layout. Currently, the available attributes or styles don't seem to cover all the customizations I want to implement, or their usage is unclear in the official documentation.

Describe the solution you'd like I would like to have a clear and detailed explanation of how to style the SearchBar and SearchView using XML attributes and themes. Specifically, I want to know:

• How to change the background color and text color of the SearchBar.
• How to customize the icons (navigation, search) within the SearchBar.
• How to modify the appearance of the SearchView, including setting a custom background and adjusting text input styles.
• Any specific styles or themes that can be applied to the SearchBar and SearchView to achieve a cohesive and customized design.

Describe alternatives you've considered I have tried applying custom themes and styles directly in XML, but they don't seem to affect all parts of the SearchBar and SearchView. I've also attempted programmatic styling within the Java code, but this approach is not ideal for my use case as I prefer defining the style in the XML to maintain a cleaner and more maintainable codebase.

Additional context

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/amAppBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.material.search.SearchBar
                    android:id="@+id/amSearchBar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/search"
                    app:forceDefaultNavigationOnClickListener="false"
                    app:menu="@menu/toolbar_menu"
                    app:navigationIcon="@drawable/icon_menu_24px" />

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

            <com.google.android.material.search.SearchView
                android:id="@+id/amSearchView"
                style="@style/SearchViewStyle"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:hint="@string/search"
                app:layout_anchor="@id/amSearchBar">

                <!-- Search suggestions/results go here (ScrollView, RecyclerView, etc.). -->

                <FrameLayout
                    style="@style/BackgroundColorStyleSearchView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

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

                    <com.google.android.material.progressindicator.CircularProgressIndicator
                        android:id="@+id/amIndicator"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:indeterminate="true"
                        android:visibility="visible" />

                    <TextView
                        android:id="@+id/amTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:textSize="16sp"
                        android:visibility="gone" />

                </FrameLayout>

            </com.google.android.material.search.SearchView>

[dsn5ft]

To customize the background colors of the SearchBar (doc) and SearchView (doc) you can use the backgroundTint attribute, similar to how we do it in the default styles:

https://github.com/material-components/material-components-android/blob/ade1437cfd2f11845673638e4abfdd68bda92645/lib/java/com/google/android/material/search/res/values/styles.xml#L19-L20

https://github.com/material-components/material-components-android/blob/ade1437cfd2f11845673638e4abfdd68bda92645/lib/java/com/google/android/material/search/res/values/styles.xml#L46-L47

The SearchBar text color comes from the android:textAppearance:

https://github.com/material-components/material-components-android/blob/ade1437cfd2f11845673638e4abfdd68bda92645/lib/java/com/google/android/material/search/res/values/styles.xml#L23-L25

So you can extend from TextAppearance.Material3.SearchBar, customize android:textColor, and then set your custom text appearance as the android:textAppearance on your SearchBar or SearchBar style:

https://github.com/material-components/material-components-android/blob/ade1437cfd2f11845673638e4abfdd68bda92645/lib/java/com/google/android/material/search/res/values/styles.xml#L73-L77

To customize the text input style of SearchView, you can make a theme overlay like this which sets a custom editTextStyle:

  <style name="ThemeOverlay.MyApp.SearchView" parent="">
    <item name="editTextStyle">@style/Widget.MyApp.EditText.SearchView</item>
  </style>

  <style name="Widget.MyApp.EditText.SearchView" parent="Widget.AppCompat.EditText">
    ... customize here ...
  </style>

And then apply it to the SearchView by setting android:theme="@style/ThemeOverlay.MyApp.SearchView".

Re: customizing the navigation icon, it looks like you've already found app:navigationIcon on the SearchBar. There's also app:navigationIconTint for the color.

To customize the navigation icon of the SearchView, you can create a style that extends from Widget.Material3.SearchView.Toolbar with customizations and set <item name="materialSearchViewToolbarStyle">@style/Widget.MyApp.SearchView.Toolbar</item> in your main app theme or in the ThemeOverlay.MyApp.SearchView theme overlay above.

Hopefully that helps! Let me know.