Ultimate Guide to Material 3 Search Bar and Search View in Android XML (2025 Tutorial + Examples)

Ultimate Guide to Material 3 Search Bar and Search View in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Search Bar and Search View provide a floating search field and full-screen search interface, respectively, for efficient navigation and content discovery. This guide covers their implementation, accessibility, and theming for 2025, introduced in Material Components 1.8.0. 🔍

Design and API Documentation 🔗

• Google Material 3 Search Spec
• API Reference

Using Search Components 🤖

Add the Material Components for Android library (version 1.8.0 or later) to use Material 3 Search components. See the Get Started guide. Use SearchBar for a floating field and SearchView for a full-screen search interface, integrated with a Theme.Material3.* theme. 🛠️

Making Search Components Accessible ♿

Set android:contentDescription on SearchBar and SearchView for TalkBack to announce their purpose. Text labels are auto-provided to accessibility services. Ensure sufficient contrast for visibility. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure SearchBar with menus, hints, or branding. Use SearchView for search suggestions/results. Link them via layout_anchor or setUpWithSearchBar for expand/collapse animations. Example:

      
val searchView = findViewById(R.id.search_view)
val searchBar = findViewById(R.id.search_bar)
searchView.getEditText().setOnEditorActionListener { _, _, _ ->
    searchBar.setText(searchView.getText())
    searchView.hide()
    false
}
      
      
    

Search Component Anatomy 🌟

Material 3 Search components include a SearchBar (floating field) and SearchView (full-screen interface), each with distinct elements for navigation and input. 🔍

• Search Bar: Container, leading icon, supporting text, optional avatar/trailing icon.
• Search View: Container, header, input text, icons, divider, content area. 📋

Search Component Example 🔲

Search Bar and Search View enable intuitive search navigation with expand/collapse animations and customizable content. 🔍

Search Component Example 💻

API and source code:

• SearchBar
  • Class description
  • Class source
• SearchView
  • Class description
  • Class source

The following example shows a scroll-away search bar and search view setup.

      
val searchView = findViewById(R.id.search_view)
val searchBar = findViewById(R.id.search_bar)
searchView.getEditText().setOnEditorActionListener { _, _, _ ->
    searchBar.setText(searchView.getText())
    searchView.hide()
    false
}
searchBar.inflateMenu(R.menu.search_menu)
searchBar.setOnMenuItemClickListener { menuItem ->
    // Handle menu item
    true
}
      
      
    

Anatomy and Key Properties 📏

Search components include a floating bar and full-screen view with navigation and input elements. 🔍

• Search Bar: Container, leading icon, text, optional trailing icon.
• Search View: Header, input text, icons, divider, content. 📋

Attributes 📋

Element	Attribute	Related method(s)	Default value
Search Bar	app:backgroundTint	N/A	?attr/colorSurfaceContainerHigh
	android:hint	setHint	null
Search View	app:backgroundTint	N/A	?attr/colorSurfaceContainerHigh
	android:text	setText	null

Styles 🎨

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

See the full list of styles and attrs. 🔗

Theming Search Components 🖌️

Material Theming customizes search component colors and typography. 🎨

Theming Example 💻

Theming example for search components:

Specific styles for search bar without affecting other components:

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 colors and typography via res/values/styles.xml. 🖌️

---

How to add the Material 3 library? 📦

Include Material Components 1.8.0+. See the Get Started guide. 🛠️

---

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for search components. 🚀