Android SearchView Example

Search View is  most useful UI  widget/components in android. Android search view widget can be used in action bar/ appbar/ toolbar or in your layout. Both search widget and dialog are used to search text, video, etc. In this tutorial, you will learn to implement search view widget in android application.

There are two types of search.

1)      Search widget

2)     Search dialog.

 Search widget is placed anywhere in your app layout and search dialog is a UI component that is controlled by the android system. Search dialog appears at the top of activity.

How to Add Search Function to Android App

1)Create a new android studio project with the project name Simple Android SearchView. Open your XML layout file and add a search view widget with id. Following is the complete content of XML layout file.

FileName: res/layout/searchview_android_example.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_margin="16dp"

    android:orientation="vertical">

    <SearchView

        android:id="@+id/searchView"

        android:layout_width="wrap_content"

        android:elevation="2dp"

        android:background="#fff"

        android:layout_height="wrap_content">

    </SearchView>

</LinearLayout>

2)Now open your java activity file and set searchView.setOnQueryTextListener and then override onQueryTextSubmit and onQueryTextChange method. Following is the complete code of java activity file.

FileName: src/SimpleAndroidSearchViewExample.java

package androidshikho.com.androiduserinterfacetutorial;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.widget.SearchView;

import android.widget.Toast;

public class SimpleAndroidSearchViewExample extends AppCompatActivity{

    SearchView searchView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.searchview_android_example);

        searchView=(SearchView) findViewById(R.id.searchView);

        searchView.setQueryHint("Search View");

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

            @Override

            public boolean onQueryTextSubmit(String query) {

                Toast.makeText(getBaseContext(), query, Toast.LENGTH_LONG).show();

                return false;

            }

            @Override

            public boolean onQueryTextChange(String newText) {

                Toast.makeText(getBaseContext(), newText, Toast.LENGTH_LONG).show();

                return false;

            }

        });

    }

}

3)Following is the content of styles.xml and AndroidManifest.xml file.

FileName: res/values/styles.xml

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

        

    </style>

</resources>

4) Change the  AndroidManifest file

FileName: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="androidshikho.com.androiduserinterfacetutorial">

    <application

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

        <activity android:name=".SimpleAndroidSearchViewExample">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

Now, run your SearchView Example application and click on the search icon which will look like above screenshot. If you type something in the search box the text will appear in toast in real time.