Android ListView with EditText Search Functionality

Android ListView with EditText Search Functionality

In this tutorial, we are going to learn how to use an EditText search function in our android ListView.

There are situation where a ListView is heavily populated with that in non alphabetical order. It will an app user a considerable amount of time to find what he or she is searching for in a ListView. This is not good for user experience.

A way to alleviate this problem is to add an EditText filter to the ListView. The EditText View object will wire addTextChangedListener event to know when a single character has been entered in the EditText field.

If you want to use a SearchView in your ListView, I wrote another post that will give you a clear insight on how to use Android SearchView in ListView with a custom Adapter

We are going to create our main layout for our application and inside the layout we will add an EditText View and a ListView. The data for the ListView will use a simple Array Adapter to bind the data to the ListView. The EditText View will be connected to the ListView Adapter so that it can easily filter the content of the ListView with the words entered in the EditText View.

Before we start, the first thing I will do is to list the environment and tools I used in this android code snippet but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidListViewWithEditTextSearch

Package: com.inducesmile.androidlistviewwithedittextsearch

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

Main Layout

We will start by adding an EditText View and ListView in our activity_main.xml layout file. If you are using Eclipse or Android Studio, you can switch to the design view and drag and drop these Views inside your layout file.

You can also copy and paste the following code below into the file if you don’t want to do it yourself.

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/editText"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<ListView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/listView"

android:layout_marginRight="20dp"

android:layout_marginTop="10dp"

android:layout_below="@+id/editText"

android:layout_alignLeft="@+id/editText"

android:layout_alignStart="@+id/editText" />

</RelativeLayout>

 Main Activity File

In our MainActivity.java file, we are going to do the following things listed below in our code.

1. We get the instances of our EditText View and ListView by using the findViewById of the Activity class.

2. We create an array of Strings

3. We create an instance of an ArrayAdapter and pass our string array object as a parameter, the application context and the in-built ListView layout in android.

4. We set the ArrayAdapter to our ListView

5. We attached an event listener to our ListView for each item clicked

6. We add a text changed event listener to our EditText. It will notify the application whenever a user inputs a character in the EditText.

7. Inside the onTextChanged method of the TextWatcher class, will get the filter method of our ArrayAdapter and pass the user input character as a parameter in this method.

The code for our MainActivity.java file is shown below. You can copy and paste it on your own project.

package inducesmile.com.androidlistviewwithedittextsearch;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

private EditText filterText;

private ArrayAdapter<String> listAdapter;

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

filterText = (EditText)findViewById(R.id.editText);

ListView itemList = (ListView)findViewById(R.id.listView);

String [] listViewAdapterContent = {"School", "House", "Building", "Food", "Sports", "Dress", "Ring"};

listAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, listViewAdapterContent);

itemList.setAdapter(listAdapter);

itemList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// make Toast when click
Toast.makeText(getApplicationContext(), "Position " + position, Toast.LENGTH_LONG).show();
}
});
filterText.addTextChangedListener(new TextWatcher() {

@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
MainActivity.this.listAdapter.getFilter().filter(s);
}

@Override
public void afterTextChanged(Editable s) {
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Save the file and run your project. If everything works for you, these images will appear on your test device.

Android ListView with EditText Search Functionality

Android ListView with EditText Search Functionality

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published.

2 Comments

    • Inducesmile

Add a Comment