In my last post, we see how to implement pop-menus in Android : Show Simple Pop-up Menu in Android. Here we implement how to apply search in list view

Adding search functionality to listview will filters the list data with a matching string, hence provides user an easy way to find the information he needs. In this article we are going to see how to enable search filter to android ListView. 

Pre-Requisites:

1.       Ellipse SDK

2.       Android SDK

3.       ADT plugin

Or Android Studio and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “SearchableFunction”.

Add Widgets to our GUI:

Now, we need to add views in our view groups, i.e. add widgets to our GUI. We need an EditText widget and a Listview widget for our app’s GUI

For this, navigate to res/Layout/main.xml from package explorer . Open main.xml

Add following code into it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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"
    tools:context=".MainActivity"
    android:orientation="vertical">
    
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Names" />
    
    <!-- Editext for Search -->
    <EditText android:id="@+id/inputSearch"
android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:hint="Search names.."
      />
 
      <!-- List View -->
    <ListView
        android:id="@+id/list_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
 
 
</LinearLayout>

 Add Search functionality:

To add search functionality to our app we need to implement addTextChangedListener() on our Edittext widget

So first we create a listview with list items and the list give the appropriate results on the basis of input name in the EditText

So our final code for main Activity class will look like this:

package com.example.searchablefunction;
import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity {
      Context context = this;
      // List view
      private ListView myListView;
      // Listview Adapter
      ArrayAdapter<String> adapter;
      // Search EditText
      EditText inputSearch;
      // ArrayList for Listview
      ArrayList<String> myListNames;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            myListView = (ListView) findViewById(R.id.list_view);
            inputSearch = (EditText) findViewById(R.id.inputSearch);
            myListNames = new ArrayList<String>();
            // Add items to arrayList
            myListNames.add("Tom");
            myListNames.add("Sam");
            myListNames.add("John");
            myListNames.add("Hary");
            myListNames.add("Tim");             myListNames.add("Jim");
            myListNames.add("Jimmy");
            // Adding items to Listview
            adapter = new ArrayAdapter<String>(context,
                        android.R.layout.simple_list_item_1, myListNames);             // set ArrayAdapter to listview             myListView.setAdapter(adapter);             // Enable search filter             inputSearch.addTextChangedListener(new TextWatcher() {                   @Override                  public void onTextChanged(CharSequence s, int start, int before,                               int count) {                       // When user changed the Text                         adapter.getFilter().filter(s); 
                 }                   @Override                   public void beforeTextChanged(CharSequence s, int start, int count,                             int after) {                        // TODO Auto-generated method stub 
                  }                   @Override                  public void afterTextChanged(Editable s) {                         // TODO Auto-generated method stub 
                  } 
           }); 
      }
      @Override
      public boolean onCreateOptionsMenu(Menu menu) { 
            // Inflate the menu; this adds items to the action bar if it is present.             getMenuInflater().inflate(R.menu.main, menu);           return true;       }
}

 Running our Application 

So our app looks like:

Type a letter in the text field, only filtered elements appear based on search filter

Type a name and the result will be shown in listview:

I my next post ,we see  a UI pattern for Navigation drawer : Navigation Drawer Implementation in Android

Thanks for reading this post.

Happy Coding!!