Material 3 Search Bar and Search View

Overview

Search components enable efficient navigation and content discovery.

Material 3 Search Bar and Search View, introduced in Material Components 1.8.0, provide a floating search field (SearchBar) and full-screen search interface (SearchView), adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Search Components

• Add Material Components for Android library (version 1.8.0 or later)
• Use SearchBar for a persistent floating field, SearchView for full-screen search
• Place within CoordinatorLayout with layout_anchor for animations
• Apply Theme.Material3.* theme for styling

Accessibility

• Set android:contentDescription on SearchBar and SearchView for TalkBack
• Text labels are auto-provided to accessibility services
• Ensure sufficient contrast for text and icons

Behavior and Configuration

• Configure SearchBar with menus, hints, or centered branding
• Use SearchView for search suggestions/results with clear text button
• Link via layout_anchor or setupWithSearchBar for expand/collapse animations
• Support fixed, scroll-away, or lift-on-scroll modes
• Use adjustNothing for soft input mode to avoid animation glitches

Search Bar Anatomy

Component	Description
Container	Floating field with rounded corners, supports centered branding
Leading Icon Button	Search icon, left-aligned, triggers SearchView
Supporting Text	Hint or current query text
Trailing Icon/Avatar	Optional menu or avatar, right-aligned

Search View Anatomy

Component	Description
Container	Full-screen interface for search
Header	Top section with input and icons
Leading Icon Button	Back or search icon, left-aligned
Supporting Text	Input text field for query
Trailing Icon Button	Clear text button, appears when text entered
Divider	Horizontal line below header
Content Area	Lists search suggestions/results

Search Bar Example

• Persistent floating field with scroll-away behavior
• Supports menus and branding

Example

      
<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">
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/searchbar_scrolling_view_behavior">
        <!-- Content -->
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:statusBarForeground="?attr/colorSurface">
        <com.google.android.material.search.SearchBar
            android:id="@+id/search_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/search_hint"
            android:contentDescription="@string/search_bar_desc"
            app:forceDefaultNavigationOnClickListener="true"/>
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val searchBar = findViewById<SearchBar>(R.id.search_bar)
searchBar.inflateMenu(R.menu.search_menu)
searchBar.setOnMenuItemClickListener { menuItem ->
    // Handle menu item
    true
}
      
    

Search View Example

• Full-screen interface with lift-on-scroll behavior
• Supports suggestions and predictive back

Example

      
<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">
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- Content -->
    </androidx.core.widget.NestedScrollView>
    <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/search_hint"
            android:contentDescription="@string/search_bar_desc"
            app:liftOnScroll="true"
            app:liftOnScrollColor="?attr/colorSurfaceContainerHighest"/>
    </com.google.android.material.appbar.AppBarLayout>
    <com.google.android.material.search.SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="@string/search_hint"
        android:contentDescription="@string/search_view_desc"
        app:layout_anchor="@id/search_bar"
        app:autoShowKeyboard="true">
        <!-- Suggestions/Results -->
    </com.google.android.material.search.SearchView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    

      
val searchView = findViewById<SearchView>(R.id.search_view)
val searchBar = findViewById<SearchBar>(R.id.search_bar)
searchView.setupWithSearchBar(searchBar)
searchView.getEditText().setOnEditorActionListener { _, _, _ ->
    searchBar.setText(searchView.getText())
    searchView.hide()
    false
}
searchView.addTransitionListener { _, previousState, newState ->
    if (newState == SearchView.TransitionState.SHOWING) {
        // Handle SearchView opened
    }
}
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Search Bar Container	app:backgroundTint	N/A	?attr/colorSurfaceContainerHigh	Sets SearchBar background color	SearchBar
Search Bar Text	android:hint	setHint	null	Sets SearchBar hint text	SearchBar
Search Bar Max Width	android:maxWidth	setMaxWidth, getMaxWidth	-1 (unset)	Sets maximum width	SearchBar
Search Bar Navigation Icon	app:hideNavigationIcon	N/A	false	Hides navigation icon	SearchBar
Search Bar Text Centered	app:textCentered	setTextCentered, getTextCentered	false	Centers text in SearchBar	SearchBar
Search View Container	app:backgroundTint	N/A	?attr/colorSurfaceContainerHigh	Sets SearchView background color	SearchView
Search View Text	android:text	setText	null	Sets SearchView input text	SearchView
Search View Keyboard	app:autoShowKeyboard	N/A	true	Shows keyboard on SearchView display	SearchView
Search View Navigation	app:useDrawerArrowDrawable	N/A	false	Enables menu-to-back arrow animation	SearchView

Styles

• Search Bar: Widget.Material3.SearchBar
• Search View: Widget.Material3.SearchView
• Search View Toolbar: Widget.Material3.SearchView.Toolbar
• Default theme attributes: ?attr/materialSearchBarStyle, ?attr/materialSearchViewStyle, ?attr/materialSearchViewToolbarStyle

Theming Search Components

• Customize colors and typography
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorSurfaceContainerHigh">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="materialSearchBarStyle">@style/Widget.App.SearchBar</item>
</style>
<style name="Widget.App.SearchBar" parent="Widget.Material3.SearchBar">
    <item name="backgroundTint">@color/shrine_pink_100</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Search Components
• Covers design, behavior, theming specifications
• Includes structure, accessibility, predictive back support
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Search Components?

• Floating SearchBar and full-screen SearchView for navigation

---

What library version is required?

• Material Components 1.8.0 or later

---

When to use Search View?

• Use for full-screen search with suggestions/results

---

How to make them accessible?

• Set contentDescription for TalkBack; text is auto-readable

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components 1.8.0 or later

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for search components