Home > DeveloperSection > Beginner > Simple Search implementation in android

Simple Search implementation in android


Android Android  Android Activity  Android Layout  Android Edittext  Android Listview 
Ratings:
0 Comment(s)
 2693  View(s)
Rate this:

Simple Search implementation in android


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!! J


Don't want to miss updates? Please click the below button!

Follow MindStick