Add Search box bar functionality to ListView in android programmatically

How to implement EditText as Search box inside android application on custom listview dynamically.

In this tutorial we are adding Searing method on ListView using EditText that means application user can easily search between list view items and the only list view item who matched the typed keyword will appears just below the EditText. So here is the complete step by step tutorial for Add Search box bar functionality to ListView in android programmatically.

android-project-download-code-button

How to Add Search box bar functionality to ListView in android programmatically.

Code for MainActivity.java file.

 package com.searchboxlistonview_android_examples.com;
import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import java.util.Arrays;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

 EditText searchBox ;
 ListView listview ;
 String[] listItemsValue = new String[] {
 "Android",
 "PHP",
 "Web Development",
 "Blogger",
 "SEO",
 "Photoshop"
 };
 List<String> ListViewString ;

 ArrayAdapter<String> arrayadapter;

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

 searchBox = (EditText)findViewById(R.id.editText1);
 listview = (ListView)findViewById(R.id.listView1);

 ListViewString = new ArrayList<String>(Arrays.asList(listItemsValue));

 arrayadapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_2, android.R.id.text1, listItemsValue);

 listview.setAdapter(arrayadapter);

 searchBox.addTextChangedListener(new TextWatcher() {
 @Override
 public void beforeTextChanged(CharSequence s, int start, int count, int after) {

 MainActivity.this.arrayadapter.getFilter().filter(s);

 }

 @Override
 public void onTextChanged(CharSequence s, int start, int before, int count) {

 }

 @Override
 public void afterTextChanged(Editable s) {

 }
 });
 }
}

Code for activity_main.xml layout file.

 <RelativeLayout 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="com.searchboxlistonview_android_examples.com.MainActivity" >

 <EditText
 android:id="@+id/editText1"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:ems="10"
 android:hint="Search Here"
 android:gravity="center" >

 </EditText>

 <ListView
 android:id="@+id/listView1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_below="@+id/editText1"
 android:layout_centerHorizontal="true" >
 </ListView>

</RelativeLayout>

Screenshots :

Add Search box bar functionality to ListView in android programmatically

search-view-2

Click here to download Add Search box bar functionality to ListView in android programmatically project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *