Adv

Android Toolbar Search

Here we explore examples and libraries for using a Toolbar to search and filter.

Share

Related Concepts

Adv

2 Examples

  1. Android Material SearchView and History

    Android Material SearchView and History Tutorial and Example.

    • Here the purpose is to programmatically open search,close and show search suggestions while searching.
    • The search occurs in a nice fragment.
    • We use a Material SearchView library.

     

    Build.gradle

    First we add the Material SearchView library.

    apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 24
        buildToolsVersion "24.0.1"
    
        defaultConfig {
            applicationId "com.tutorials.hp.materialsearchgridview"
            minSdkVersion 15
            targetSdkVersion 24
            versionCode 1
            versionName "1.0"
        }
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
    
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.1.1'
        compile 'com.android.support:design:24.1.1'
        compile 'br.com.mauker.materialsearchview:materialsearchview:1.1.0'
    }

    Second we create a package called br.com.mauker as below and the following class :

    package br.com.mauker;
    
    public class MsvAuthority {
        public static final String CONTENT_AUTHORITY = "br.com.mauker.materialsearchview.searchhistorydatabase";
    }

    MainActivity.java

    Here’s our MainActivity class :

    package com.tutorials.hp.materialsearchgridview;
    
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.View;
    
    import br.com.mauker.materialsearchview.MaterialSearchView;
    
    public class MainActivity extends AppCompatActivity {
    
       MaterialSearchView msv;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    
            msv= (MaterialSearchView) findViewById(R.id.msv);
            msv.addSuggestions(new String[]{"Casini","Andromeda","Europa","Voyager","Spitzer","Hubble"});
    
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    msv.openSearch();
    
                }
            });
        }
    
        @Override
        public void onBackPressed() {
           if(msv.isOpen())
           {
               msv.closeSearch();
           }else
           {
               super.onBackPressed();
           }
        }
    }

    activity_main.xml

    Then in our layout we add Material searchView as below :

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_paddingBottom="@dimen/activity_vertical_margin"
        android_paddingLeft="@dimen/activity_horizontal_margin"
        android_paddingRight="@dimen/activity_horizontal_margin"
        android_paddingTop="@dimen/activity_vertical_margin"
        app_layout_behavior="@string/appbar_scrolling_view_behavior"
        tools_context="com.tutorials.hp.materialsearchgridview.MainActivity"
        tools_showIn="@layout/activity_main">
    
        <br.com.mauker.materialsearchview.MaterialSearchView
            android_id="@+id/msv"
            android_layout_width="match_parent"
            android_layout_height="match_parent"/>
    </RelativeLayout>

    For more details and demo,check the video tutorial below : https://www.youtube.com/watch?v=fspKA0xWHxc

  2. Adv
  3. Android Material SearchBar

    Android Material SearchBar Tutorial and Example.

    • How to use a Material SearchView inside a Searchbar and show search history.
    • The user can select search history as suggestions instead of typing again.
    • In this case we stored the search history in a simple arraylist.

     

    Build.gradle

    First we need Material SearchView library :

    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        testCompile 'junit:junit:4.12'
        compile 'com.android.support:appcompat-v7:24.2.0'
        compile 'com.android.support:design:24.2.0'
        compile 'com.github.mancj:MaterialSearchBar:0.3.1'
    }

    activity_main.xml

    We also add the material searchbar in our layout :

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout 
        
        
        android_layout_width="match_parent"
        android_layout_height="match_parent"
        android_fitsSystemWindows="true"
        tools_context="com.tutorials.hp.materialsearch.MainActivity">
    
        <android.support.design.widget.AppBarLayout
            android_layout_width="match_parent"
            android_layout_height="wrap_content"
            android_theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.v7.widget.Toolbar
                android_id="@+id/toolbar"
                android_layout_width="match_parent"
                android_layout_height="?attr/actionBarSize"
                android_background="?attr/colorPrimary"
                app_popupTheme="@style/AppTheme.PopupOverlay" />
            <com.mancj.materialsearchbar.MaterialSearchBar
                app_speechMode="true"
                app_hint="Search hint"
                app_theme="@style/AppTheme.PopupOverlay"
                app_maxSuggestionsCount="10"
                android_layout_width="match_parent"
                android_layout_height="wrap_content"
                android_id="@+id/searchBar" />
    
        </android.support.design.widget.AppBarLayout>
    
        <include layout="@layout/content_main" />
    
        <android.support.design.widget.FloatingActionButton
            android_id="@+id/fab"
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_layout_gravity="bottom|end"
            android_layout_margin="@dimen/fab_margin"
            android_src="@android:drawable/ic_dialog_email" />
    
    </android.support.design.widget.CoordinatorLayout>

    MainActivity.java

    Here’s our MainActivity class :

    package com.tutorials.hp.materialsearch;
    
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.Snackbar;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.Gravity;
    import android.view.View;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
    
    import com.mancj.materialsearchbar.MaterialSearchBar;
    
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity implements MaterialSearchBar.OnSearchActionListener {
    
        private MaterialSearchBar searchBar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
    
            searchBar = (MaterialSearchBar) findViewById(R.id.searchBar);
            searchBar.setHint("Custom hint");
            searchBar.setSpeechMode(true);
            searchBar.setOnSearchActionListener(this);
    
        }
    
        @Override
        public void onSearchStateChanged(boolean b) {
            String state = b ? "enabled" : "disabled";
            Toast.makeText(MainActivity.this, "Search " + state, Toast.LENGTH_SHORT).show();
        }
    
        @Override
        public void onSearchConfirmed(CharSequence charSequence) {
            Toast.makeText(this,"Searching "+ charSequence.toString()+" ......",Toast.LENGTH_SHORT).show();
        }
    
        @Override
        public void onButtonClicked(int i) {
            switch (i){
                case MaterialSearchBar.BUTTON_NAVIGATION:
                    Toast.makeText(MainActivity.this, "Button Nav " , Toast.LENGTH_SHORT).show();
                    break;
                case MaterialSearchBar.BUTTON_SPEECH:
                    Toast.makeText(MainActivity.this, "Speech " , Toast.LENGTH_SHORT).show();
            }
        }
    }

    For more details,The Youtube tutorial is below : https://www.youtube.com/watch?v=pZVQVsfWVg8




Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )