MaterialSearchBar

Material Design Search Bar for Android

2,030

332

2,030

View on GitHub

Top Related Projects

MaterialSearchView

3,831

Cute library to implement SearchView in a Material Design Approach

floatingsearchview

3,542

A search view that implements a floating search bar also known as persistent search

PersistentSearch

2,005

A clone of the Google Now/Maps/Play persistent search bar

Quick Overview

MaterialSearchBar is an Android library that provides a customizable search bar component with Material Design styling. It offers features like voice search, suggestions, and various customization options to enhance the search experience in Android applications.

Pros

Easy integration with minimal setup required
Highly customizable appearance and behavior
Supports voice search functionality
Includes built-in suggestion system

Cons

Limited documentation and examples
Some reported issues with compatibility on newer Android versions
Infrequent updates and maintenance
Lack of extensive customization for advanced use cases

Code Examples

Basic setup of MaterialSearchBar:

MaterialSearchBar searchBar = findViewById(R.id.searchBar);
searchBar.setHint("Search");
searchBar.setOnSearchActionListener(new MaterialSearchBar.OnSearchActionListener() {
    @Override
    public void onSearchStateChanged(boolean enabled) {
        // Handle search state change
    }

    @Override
    public void onSearchConfirmed(CharSequence text) {
        // Handle search confirmation
    }

    @Override
    public void onButtonClicked(int buttonCode) {
        // Handle button clicks
    }
});

Adding suggestions to the search bar:

List<String> suggestions = new ArrayList<>();
suggestions.add("Apple");
suggestions.add("Banana");
suggestions.add("Cherry");

searchBar.setLastSuggestions(suggestions);
searchBar.setMaxSuggestionCount(5);

Customizing the appearance of the search bar:

searchBar.setCardViewElevation(10);
searchBar.setPlaceHolder("Type here...");
searchBar.setTextColor(Color.parseColor("#FFFFFF"));
searchBar.setTextHighlightColor(Color.parseColor("#E91E63"));

Getting Started

To use MaterialSearchBar in your Android project:

Add the JitPack repository to your project's build.gradle file:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency to your app's build.gradle file:

dependencies {
    implementation 'com.github.mancj:MaterialSearchBar:0.8.5'
}

Add the MaterialSearchBar to your layout XML:

<com.mancj.materialsearchbar.MaterialSearchBar
    android:id="@+id/searchBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:mt_hint="Search"
    app:mt_maxSuggestionsCount="10" />

Initialize and customize the search bar in your activity or fragment as shown in the code examples above.

Competitor Comparisons

MaterialSearchView

3,831

Cute library to implement SearchView in a Material Design Approach

Pros of MaterialSearchView

More customization options for the search view appearance
Built-in voice search functionality
Supports custom suggestions adapter for advanced use cases

Cons of MaterialSearchView

Less active maintenance (last updated 4 years ago)
Fewer stars and forks on GitHub, indicating potentially lower community adoption
Some reported issues with compatibility in newer Android versions

Code Comparison

MaterialSearchView:

MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);
searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String query) {
        // Handle search query submission
        return false;
    }
});

MaterialSearchBar:

MaterialSearchBar searchBar = findViewById(R.id.searchBar);
searchBar.setOnSearchActionListener(new MaterialSearchBar.OnSearchActionListener() {
    @Override
    public void onSearchConfirmed(CharSequence text) {
        // Handle search query confirmation
    }
});

Both libraries offer similar basic functionality for implementing a material design search interface. MaterialSearchView provides more built-in features like voice search, while MaterialSearchBar has a more active development community and better compatibility with recent Android versions. The choice between the two depends on specific project requirements and the need for ongoing support and updates.

floatingsearchview

3,542

A search view that implements a floating search bar also known as persistent search

Pros of FloatingSearchView

More customizable UI elements, including the ability to add custom views to the search bar
Built-in support for suggestions and recent searches
Smoother animations and transitions

Cons of FloatingSearchView

Larger library size, which may impact app performance
Steeper learning curve due to more complex implementation
Less frequent updates and maintenance compared to MaterialSearchBar

Code Comparison

MaterialSearchBar:

MaterialSearchBar searchBar = findViewById(R.id.searchBar);
searchBar.setHint("Search");
searchBar.setOnSearchActionListener(new MaterialSearchBar.OnSearchActionListener() {
    @Override
    public void onSearchStateChanged(boolean enabled) {
        // Handle search state change
    }
});

FloatingSearchView:

FloatingSearchView searchView = findViewById(R.id.floating_search_view);
searchView.setOnQueryChangeListener(new FloatingSearchView.OnQueryChangeListener() {
    @Override
    public void onSearchTextChanged(String oldQuery, String newQuery) {
        // Handle query change
    }
});

Both libraries offer similar basic functionality for implementing a search bar in Android applications. MaterialSearchBar provides a simpler implementation with fewer features, while FloatingSearchView offers more advanced customization options and built-in features at the cost of increased complexity and library size. The choice between the two depends on the specific requirements of your project and the level of customization needed.

PersistentSearch

2,005

A clone of the Google Now/Maps/Play persistent search bar

Pros of PersistentSearch

More customizable animation options for search bar transitions
Better integration with Android's native search functionality
Supports voice search out of the box

Cons of PersistentSearch

Less actively maintained (last update was several years ago)
Limited documentation and examples compared to MaterialSearchBar
May require more setup and configuration for basic use cases

Code Comparison

MaterialSearchBar:

MaterialSearchBar searchBar = findViewById(R.id.searchBar);
searchBar.setHint("Search");
searchBar.setOnSearchActionListener(new MaterialSearchBar.OnSearchActionListener() {
    @Override
    public void onSearchStateChanged(boolean enabled) {
        // Handle search state change
    }
});

PersistentSearch:

PersistentSearchView searchView = findViewById(R.id.searchView);
searchView.setVoiceRecognitionDelegate(new VoiceRecognitionDelegate(this));
searchView.setOnSearchListener(new PersistentSearchView.OnSearchListener() {
    @Override
    public void onSearchOpened() {
        // Handle search opened
    }
});

Both libraries offer search functionality for Android applications, but they differ in their approach and feature set. MaterialSearchBar focuses on a material design-inspired search bar with straightforward implementation, while PersistentSearch provides more advanced features like voice search and smoother animations. The choice between the two depends on specific project requirements and the desired level of customization.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Material SearchBar Android

Material Design Search Bar for Android

This beautiful and easy to use library will help to add Lollipop Material Design SearchView in your project.

See our Wiki

How to use

to include SearchBar to your project:

add this code to the the project level build.gradle file

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

add the dependency to the the app level build.gradle file

dependencies {
	implementation 'com.github.mancj:MaterialSearchBar:X.X.X'
}

then add SearchBar to your activity:

<com.mancj.materialsearchbar.MaterialSearchBar
    style="@style/MaterialSearchBarLight"
    app:mt_speechMode="true"
    app:mt_hint="Custom hint"
    app:mt_maxSuggestionsCount="10"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/searchBar" />

MaterialSearchBar has the following xml attributes:

Attribute	Description
mt_speechMode	if set to true, microphone icon will be displayed instead of search icon
mt_maxSuggestionsCount	specifies the max number of search queries stored
mt_navIconEnabled	set navigation icon enabled
mt_roundedSearchBarEnabled	use capsule shaped searchbar on v21+ and revert to default on lower
mt_dividerColor	set the colors of the suggestion and menu dividers
mt_searchBarColor	set the main color of the searchbar
mt_menuIconDrawable	set drawable of the menu icon
mt_searchIconDrawable	set drawable of the search icon when speech mode is false
mt_speechIconDrawable	set drawable of the speech icon when speech mode is true
mt_backIconDrawable	set drawable of the back arrow icon
mt_clearIconDrawable	set drawable of the clear icon
mt_navIconTint	set tint color of nav/back animated icon
mt_menuIconTint	set tint color of the menu icon
mt_searchIconTint	set tint color search/speech icon
mt_backIconTint	set tint color of the back arrow icon
mt_clearIconTint	set tint color of the clear icon
mt_navIconUseTint	should the animated nav icon use tint color
mt_menuIconUseTint	should the menu icon use the tint color
mt_searchIconUseTint	should the search/speech icon use the tint color
mt_backIconUseTint	should the back icon use the tint color
mt_clearIconUseTint	should the clear icon use the tint color
mt_hint	set the text of the hint when the searchbar is focused and search query is empty
mt_placeholder	set the placeholder text when the MaterialSearchBar is not focused
mt_textColor	set text color
mt_hintColor	set hint color
mt_placeholderColor	set placeholder color
mt_textCursorTint	set text cursors tint
mt_highlightedTextColor	set the text highlight tint color

public methods:

addTextChangeListener(TextWatcher textWatcher)
clearSuggestions()
closeSearch()
openSearch()
getLastSuggestions()
getMenu()
getText()
hideSuggestionList()
inflateMenu(int menuResource)
inflateMenu(int menuResource, int icon)
isSearchOpened()
isSpeechModeEnabled()
isSuggestionsVisible()
setArrowIcon(int arrowIconResId)
setArrowIconTint(int arrowIconTint)
setCardViewElevation(int elevation)
setClearIcon(int clearIconResId)
setClearIconTint(int clearIconTint)
setCustomSuggestionAdapter(SuggestionsAdapter suggestionAdapter)
setDividerColor(int dividerColor)
setHint(CharSequence hintText)
setIconRippleStyle(boolean borderlessRippleEnabled)
setLastSuggestions(List suggestions)
setMaxSuggestionCount(int maxSuggestionsCount)
setMenuDividerEnabled(boolean menuDividerEnabled)
setMenuIcon(int menuIconResId)
setMenuIconTint(int menuIconTint)
setNavButtonEnabled(boolean navButtonEnabled)
setNavIconTint(int navIconTint)
setOnSearchActionListener(OnSearchActionListener onSearchActionListener)
setPlaceHolder(CharSequence placeholder)
setPlaceHolderColor(int placeholderColor)
setRoundedSearchBarEnabled(boolean roundedSearchBarEnabled)
setSearchIcon(int searchIconResId)
setSearchIconTint(int searchIconTint)
setSpeechModeEnabled(boolean speechMode)
setSuggestionsClickListener(SuggestionsAdapter.OnItemViewClickListener listener)
setText(String text)
setTextColor(int textColor)
setTextHighlightColor(int highlightedTextColor)
setTextHintColor(int hintColor)
showSuggestions()
updateLastSuggestions(List suggestions)

Styling Material SearchBar

Custom Style - styles.xml Create a custom style and use one of the provided styles as the parent.

Provided Styles are: MaterialSearchBarLight and MaterialSearchBarDark

Example:
<style name="MyCustomTheme" parent="MaterialSearchBarLight">
     <item name="mt_searchBarColor">@color/searchBarPrimaryColor</item>
            <item name="mt_dividerColor">@color/searchBarDividerColor</item>
            <item name="mt_navIconTint">@color/searchBarNavIconTintColor</item>
            <item name="mt_searchIconTint">@color/searchBarSearchIconTintColor</item>
            <item name="mt_clearIconTint">@color/searchBarClearIconTintColor</item>
            <item name="mt_menuIconTint">@color/searchBarMenuIconTintColor</item>
            <item name="mt_backIconTint">@color/searchBarBackIconTintColor</item>
            <item name="mt_textCursorTint">@color/searchBarCursorColor</item>
            <item name="mt_textColor">@color/searchBarTextColor</item>
            <item name="mt_hintColor">@color/searchBarHintColor</item>
            <item name="mt_placeholderColor">@color/searchBarPlaceholderColor</item>
            <item name="mt_highlightedTextColor">@color/searchBarTextHighlightColor</item>
</style>

Custom Colors - colors.xml Simply set/change these colors(or some) and you have your custom style.

    //Material SearchBar Light Theme Colors
        <color name="searchBarIconColor">#3a3a3a</color>
        //Base
        <color name="searchBarPrimaryColor">#FFFFFF</color>
        <color name="searchBarCursorColor">#8000a1ff</color>
        <color name="searchBarDividerColor">#1F000000</color>
    
        //Icons
        <color name="searchBarNavIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarMenuIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarSearchIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarClearIconTintColor">@color/searchBarIconColor</color>
        <color name="searchBarBackIconTintColor">@color/searchBarIconColor</color>
    
        //Text
        <color name="searchBarTextColor">#DE000000</color>
        <color name="searchBarHintColor">#42000000</color>
        <color name="searchBarPlaceholderColor">#8A000000</color>
        <color name="searchBarTextHighlightColor">#8000a1ff</color>
    
        //Base
        <color name="searchBarPrimaryColorDark">#303030</color>
        <color name="searchBarDividerColorDark">#1FFFFFFF</color>
    
        //Material SearchBar Dark Theme Colors
        <color name="searchBarIconColorDark">#00a1ff</color>
        //Icons
        <color name="searchBarNavIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarMenuIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarSearchIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarClearIconTintColorDark">@color/searchBarIconColorDark</color>
        <color name="searchBarBackIconTintColorDark">@color/searchBarIconColorDark</color>
    
        //Text
        <color name="searchBarTextColorDark">#DEFFFFFF</color>
        <color name="searchBarHintColorDark">#42FFFFFF</color>
        <color name="searchBarPlaceholderColorDark">#8AFFFFFF</color>
        <color name="searchBarTextHighlightColorDark">#BF00a1ff</color>

To save search queries when the activity is destroyed, use the method searchBar.getLastSuggestions() and then, to restore them use searchBar.setLastSuggestions(List<String>); as shown in the example below

Example

Here is a simple example of using MaterialSearchBar

private List<String> lastSearches;
private MaterialSearchBar searchBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    searchBar = (MaterialSearchBar) findViewById(R.id.searchBar);
    searchBar.setHint("Custom hint");
    searchBar.setSpeechMode(true);
    //enable searchbar callbacks
    searchBar.setOnSearchActionListener(this);
    //restore last queries from disk
    lastSearches = loadSearchSuggestionFromDisk();
    searchBar.setLastSuggestions(list);
    //Inflate menu and setup OnMenuItemClickListener
    searchBar.inflateMenu(R.menu.main);
    searchBar.getMenu().setOnMenuItemClickListener(this);
}

@Override
protected void onDestroy() {
    super.onDestroy();
    //save last queries to disk
    saveSearchSuggestionToDisk(searchBar.getLastSuggestions());
}

@Override
public void onSearchStateChanged(boolean enabled) {
    String s = enabled ? "enabled" : "disabled";
    Toast.makeText(MainActivity.this, "Search " + s, Toast.LENGTH_SHORT).show();
}

@Override
public void onSearchConfirmed(CharSequence text) {
    startSearch(text.toString(), true, null, true);
}

@Override
public void onButtonClicked(int buttonCode) {
    switch (buttonCode){
        case MaterialSearchBar.BUTTON_NAVIGATION:
            drawer.openDrawer(Gravity.LEFT);
            break;
        case MaterialSearchBar.BUTTON_SPEECH:
            openVoiceRecognizer();
    }
}

More Examples

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot