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 tutorial i am discussing how to enable search filter to android ListView.
1. Create a new project in Eclipse File New ⇒ Android ⇒ Application Project and fill the required details.
2. Create required files needed to generate a listview. I am using my defaultactivity_main.xml as listview and created a new xml file for single listitem namedlist_item.xml. Also make sure that you have created a EditText above the listview which will be used to search the listview.
2. Create required files needed to generate a listview. I am using my defaultactivity_main.xml as listview and created a new xml file for single listitem namedlist_item.xml. Also make sure that you have created a EditText above the listview which will be used to search the listview.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <!-- Editext for Search --> <EditText android:id="@+id/inputSearch" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Search products.." android:inputType="textVisiblePassword"/> <!-- List View --> <ListView android:id="@+id/list_view" android:layout_width="fill_parent" android:layout_height="wrap_content" /></LinearLayout> |
list_item.xml
<?xml version="1.0" encoding="utf-8"?> android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- Single ListItem --> <!-- Product Name --> <TextView android:id="@+id/product_name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip" android:textSize="16dip" android:textStyle="bold"/> </LinearLayout> |
3. Now open your MainActivity.java and paste the following code to create a simple ListView. In the following code i stored all the list data in an array called products[] and attached to listview using simple ArrayAdapter.
package com.androidhive.androidlistviewwithsearch;import java.util.ArrayList;import java.util.HashMap;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;public class MainActivity extends Activity { // List view private ListView lv; // Listview Adapter ArrayAdapter<String> adapter; // Search EditText EditText inputSearch; // ArrayList for Listview ArrayList<HashMap<String, String>> productList; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Listview Data String products[] = {"Dell Inspiron", "HTC One X", "HTC Wildfire S", "HTC Sense", "HTC Sensation XE", "iPhone 4S", "Samsung Galaxy Note 800", "Samsung Galaxy S3", "MacBook Air", "Mac Mini", "MacBook Pro"}; lv = (ListView) findViewById(R.id.list_view); inputSearch = (EditText) findViewById(R.id.inputSearch); // Adding items to listview adapter = new ArrayAdapter<String>(this, R.layout.list_item, R.id.product_name, products); lv.setAdapter(adapter); }} |
Enabling Search Functionality
4. Search functionality can be enabled by writing simple lines of code. All you need to do is adding addTextChangedListener to EditText. Once user enters a new data in EditText we need to get the text from it and passing it to array adapter filter. All the following code in your MainActivity.java
inputSearch.addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence cs, int arg1, int arg2, int arg3) { // When user changed the Text MainActivity.this.adapter.getFilter().filter(cs); } @Override public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) { // TODO Auto-generated method stub } @Override public void afterTextChanged(Editable arg0) { // TODO Auto-generated method stub }}); |
5. Finally add the following property in your AndroidManifest.xml file to hide the keyboard on loading Activity.
android:windowSoftInputMode="stateHidden" |
AndroidManifest.xml
package="com.androidhive.androidlistviewwithsearch" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/title_activity_main" android:windowSoftInputMode="stateHidden"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application></manifest> |
Final Code:
package com.androidhive.androidlistviewwithsearch;import java.util.ArrayList;import java.util.HashMap;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;public class MainActivity extends Activity { // List view private ListView lv; // Listview Adapter ArrayAdapter<String> adapter; // Search EditText EditText inputSearch; // ArrayList for Listview ArrayList<HashMap<String, String>> productList; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Listview Data String products[] = {"Dell Inspiron", "HTC One X", "HTC Wildfire S", "HTC Sense", "HTC Sensation XE", "iPhone 4S", "Samsung Galaxy Note 800", "Samsung Galaxy S3", "MacBook Air", "Mac Mini", "MacBook Pro"}; lv = (ListView) findViewById(R.id.list_view); inputSearch = (EditText) findViewById(R.id.inputSearch); // Adding items to listview adapter = new ArrayAdapter<String>(this, R.layout.list_item, R.id.product_name, products); lv.setAdapter(adapter); /** * Enabling Search Filter * */ inputSearch.addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence cs, int arg1, int arg2, int arg3) { // When user changed the Text MainActivity.this.adapter.getFilter().filter(cs); } @Override public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) { // TODO Auto-generated method stub } @Override public void afterTextChanged(Editable arg0) { // TODO Auto-generated method stub } }); }} |
No comments:
Post a Comment