Add Search filter on Recycler View with CardView layout

In android development, this is about implementing the search filter with Edittext widget on RecyclerView having CardView layout. We will use EditText widget to get string given by user and will search the input string in list to show the filtered result.

With material design style, the theme can be combined in an Activity.

Adding Support libraries in the dependencies

For making list of items, we need to add the RecyclerView and CardView support library and design support library to use Material Design Widgets in gradle dependencies (at app level gradle file).

app/build.gradle

apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "25.0.0"
defaultConfig {
applicationId "test.codedivas.com.searchonrecyclerview"
minSdkVersion 14
targetSdkVersion 24
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.2.1'
compile 'com.android.support:recyclerview-v7:24.2.0'
compile 'com.android.support:cardview-v7:24.2.0'
testCompile 'junit:junit:4.12'
}

Designing Activity Layout

Here we will use EditText to put the string to be searched and RecyclerView to display the list of items.
The layout should be like:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<EditText
android:id="@+id/search"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding_left="20dp"
android:padding_right="20dp"
android:layout_marginTop="2dp"
android:textSize="16sp"
android:hint="Search Here"
/>
<android.support.v4.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_content"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:drawSelectorOnTop="true"
android:background="#D0D0D0"
app:layout_scrollFlags="scroll| enterAlways"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

Here, Create a list_item.xml file to display the list of items. The layout of the list item should be like this:

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_parent"
android:layout_height="wrap_parent"
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/cvItem"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:minHeight="65dp"
card_view:cardCornerRadius="10dp">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_container"
android:layout_width="match_parent"
android:layout_height="65dp"
android:minHeight="65dp"
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="@+id/country_name"
android:paddingLeft="16dp"
android:textSize="16sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="@android:color/black"
android:alignParentTop="true" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</RelativeLayout>

Program Code

In Main Activity, initialize ids of all the views and create an ArrayList to populate data in the list. Here, fruitList( ) method is created. In this method, the list of fruits is added in the ArrayList.

Source code should be like:

MainActivity.java

package test.codedivas.com.searchonrecyclerview;
import android.widget.EditText;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.TextWatcher;
import android.text.Editable;
import java.util.List;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerview;
public EditText search;
private List list = new ArrayList();
public SimpleAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
search= (EditText)findViewById(R.id.search);
mRecyclerView= (RecyclerView) findViewById(R.id.recyclerview);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));// to manage the positions of the items in recyclerview
mRecyclerView.setHasFixedSize(true);
fruitList();
mAdapter = new SimpleAdapter(list, this);
mRecyclerView.setAdapter(mAdapter);
addTextListener();//it is made below to add search operation
}
//this method is used to create items
public void fruitList(){
list.add("Pomegranate");
list.add("Apple");
list.add("Pear");
list.add("Mango");
list.add("Banana");
list.add("Watermelon");
list.add("Strawberry");
list.add("Orange");
list.add("Guava");
list.add("Kiwi");
list.add("Lichi");
list.add("Grapes");
list.add("Cherry");
list.add("Melon");
list.add("Blue Berries");
list.add("Wood Apple");
}
//implementing search operation
public void addTextListener(){
search.addTextChangedListener(new TextWatcher(){
public void afterTextChanged ( Editable s){ }
public void beforeTextChanged(CharSequence s, int start, int count, int after) { }
public void onTextChanged(CharSequence query, int start, int before, int count) {
query = query.toString().toLowerCase();
final List<String> filteredList = new ArrayList<>();
for(int i = 0; i < list.size(); i++){
final String text = list.get(i).toLowerCase();
if(text.contains(query)){ filteredList.add(list.get(i));
}
}
mRecyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));
mRecyclerView.setAdpater(mAdapter);
mAdapter = new SimpleAdapter(filteredList, MainActivity.this);
mAdapter .notifyDataSetChanged();// data set changed
}
});
}
}

Creating an Adapter Class

This adapter class has special features to add custom ViewHolder class to improve the performance of RecyclerView class.The adapter class is given as below:

SimpleAdapter.java

package test.codedivas.com.searchonrecyclerview;
import android.content.Context
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;
import java.widget.List;
public class SimpleAdapter extends RecyclerView.Adapter<SimpleAdapter.MyViewHolder> {
private List<String> list_item;
public Context mcontext;
public SimpleAdapter(List<String> list, Context context) {
list_item = list;
mcontext = context;
}
@Override
public SimpleAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//create a layout
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, null);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}
@Override
public void onBindViewHolder(final MyViewHolder viewHolder, int position) {
viewHolder.country_name.setText(list_item.get(position));
viewHolder.country_name.setOnClickListener( new View.OnClickListener(){
@Override
public void onClick(View v) {
Toast.makeText(mcontext, list_item.get(position), Toast.LENGTH_LONG).show();
}
});
}
//initializes textview in the class
public static class MyViewHolder extends RecyclerView.ViewHolder {
public CardView cardView;
public TextView country_name;
View textContainer;
public MyViewHolder(View itemLayoutView) {
super(itemLayoutView);
cardView = (CardView)itemLayoutView.findViewById(R.id.cvItem);
country_name = (TextView) itemLayoutView.findViewById(R.id.country_name );
textContainer = itemLayoutView.findViewById(R.id.text_container);
}
}
@Override
public int getItemCount() {
return list_item.size();
}
}

The manifest file should be like this:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="test.codedivas.com.searchonrecyclerview">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

Running Application

Demo Video :

Output should be like:

Searching a string in list:

Toast message after clicking the RecyclerView's list item:

Conclusions

Through this post, I hope you could learn about implementing search operation on the popular and powerful widgets in developing Android Application. Further, you can subscribe my blog to get the newest tutorials..!

Enjoy Coding! :)

CodeDivas - All about technology

Pages