Post
Ask Question

Searchable RecyclerView In An Android

Introduction

This article demonstrates how to create searchable RecyclerView in an Android applications. For example, if you take a chat Application when you type the name on search, it will show similar contact names in list view. Let us see how to build it.

Prerequisite

Prior to this, you need to know about
RecyclerView 
  • RecyclerView was introduced in an Android Lollipop (Android 5.0 API Level 21) and is available for use on the devices, which are running API Level 7 and above through the Support Libraries. 
  • A view which is previously used to display the data for a specific adapter position may be placed in a cache for later reuse to display the same type of data again later.
  • RecyclerView and CardViews widgets are helpful to build the complex lists.
Go to Android Studio and create a new project with a blank activity.

Add Dependencies

Go to the app level gradle file, add Gradle dependencies given below for RecyclerView and CardView.
  1. compile 'com.android.support:cardview-v7:25.0.1'    
  2. compile 'com.android.support:design:25.0.1'    
  3. }    

Setting up the layouts

We need custom search bar in an Application action bar, so remove the default action bar in styles.xml.
  1. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
  2. </style>  
Creating Custom Action Bar

Create a new resource file in layout directory. Name it as a toolbar and give Root element android.support.v7.widget.toolbar.



Now, go to the toolbar.xml file and copy the code given below.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v7.widget.Toolbar  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="?android:attr/actionBarSize"  
  7.     android:background="?attr/colorPrimary"  
  8.     app:theme="@style/ThemeOverlay.AppCompat.Dark"  
  9.     android:id="@+id/toolbar">  
  10. </android.support.v7.widget.Toolbar>   

Creating Menu items

In an Action bar, we need a search view, so create new resource directory in an app folder and add an XML layout file for the menus and copy the code given below.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto">  
  4.     <item  
  5.         android:id="@+id/actionsearch"  
  6.         android:title="Search"  
  7.         android:icon="@drawable/ic_action_search"  
  8.         app:actionViewClass="android.support.v7.widget.SearchView"  
  9.         app:showAsAction="always|collapseActionView">    
  10.     </item>    
  11. </menu>  
Main Activity.XML
 
Now go to the main layout and add a RecyclerView and include our custom tool bar.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:id="@+id/activity_main"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:orientation="vertical"  
  8.     tools:context="com.example.saravanans.searchablerecycler.MainActivity">  
  9.     <include  
  10.         layout="@layout/toolbar"></include>  
  11.     <LinearLayout  
  12.         android:layout_height="match_parent"  
  13.         android:layout_width="match_parent">  
  14.     <android.support.v7.widget.RecyclerView  
  15.         android:layout_width="match_parent"  
  16.         android:layout_height="match_parent"  
  17.         android:id="@+id/recyclerView">  
  18.     </android.support.v7.widget.RecyclerView>  
  19.     </LinearLayout>    
  20. </LinearLayout>  
CardView

We need a container to hold the data, so create a new layout for CardView and copy the code given below.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v7.widget.CardView  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="75dp"  
  6.     android:layout_margin="5dp">  
  7. <LinearLayout  
  8.     android:layout_width="match_parent"  
  9.     android:layout_height="match_parent"  
  10.     android:orientation="horizontal"  
  11.     android:weightSum="7">  
  12.     <ImageView  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="match_parent"  
  15.         android:layout_weight="5"  
  16.         android:background="@drawable/unnamed"  
  17.         android:padding="@dimen/cardview_default_radius"  
  18.         android:layout_margin="@dimen/activity_vertical_margin" />  
  19.     <TextView  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="match_parent"  
  22.         android:id="@+id/name"  
  23.         android:text="Name"  
  24.         android:textSize="18sp"  
  25.         android:textStyle="bold"  
  26.         android:gravity="center_vertical"  
  27.         android:layout_weight="2"/>  
  28. </LinearLayout>  
  29. </android.support.v7.widget.CardView>  
Now, we have completed our design process. Let us start the coding. Create a new Java Model class.

Go to Java model class. Create Getter, Setter Methods, constructor for the name variable and the class respectively.

  1. public class Name {  
  2.     String name_val;  
  3.     Name(String name_val)  
  4.     {  
  5.         this.setName_val(name_val);  
  6.     }  
  7.     public String getName_val() {  
  8.         return name_val;  
  9.     }  
  10.   
  11.     public void setName_val(String name_val) {  
  12.         this.name_val = name_val;  
  13.     }  
  14. }  

Recycler Adapter

Create another Java class for RecyclerAdapterView and copy the code given below. This code is having an array list and a view holder class for data binding.

  1. public class Adapter extends RecyclerView.Adapter <Adapter.vholder>{  
  2.     ArrayList<Name>nameArrayList=new ArrayList<>();  
  3.     Adapter(ArrayList nameArrayList)  
  4.     {  
  5.         this.nameArrayList=nameArrayList;  
  6.     }  
  7.     @Override  
  8.     public vholder onCreateViewHolder(ViewGroup parent, int viewType) {  
  9.         View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.name_layout,parent,false);  
  10.         return new vholder(view);  
  11.     }  
  12.   
  13.     @Override  
  14.     public void onBindViewHolder(vholder holder, int position) {  
  15.         holder.nametxt.setText(nameArrayList.get(position).getName_val());  
  16.     }  
  17.   
  18.     @Override  
  19.     public int getItemCount() {  
  20.         return nameArrayList.size();  
  21.     }  
  22.     public static class vholder extends RecyclerView.ViewHolder{  
  23.         TextView nametxt;  
  24.         public vholder(View itemView) {  
  25.             super(itemView);  
  26.             nametxt=(TextView) itemView.findViewById(R.id.name);  
  27.         }  
  28.     }  
  29.     public void filter(ArrayList<Name>newList)  
  30.     {  
  31.         nameArrayList=new ArrayList<>();  
  32.         nameArrayList.addAll(newList);  
  33.         notifyDataSetChanged();  
  34.     }  
  35. }  
MainActivity

Go to the MainActivity.java. Copy the code given below. Here, I just used a foreach loop to read the strings from cotacts_name array and set it to the adapter view. 
  1. public class MainActivity extends AppCompatActivity implements SearchView.OnQueryTextListener{  
  2.     String[] contacts_name={"Ajay","Bala","Gokul","Kishore","Mukil","Naveed","Ragul","Saravanan","Sasikumar","Thomas Xavier","Tyagarajan"};  
  3.     Toolbar toolbar;  
  4.     RecyclerView recyclerView;  
  5.     Adapter adapter;  
  6.     RecyclerView.LayoutManager layoutManager;  
  7.     ArrayList<Name>nameArrayList=new ArrayList<>();  
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.         toolbar=(Toolbar)findViewById(R.id.toolbar);  
  13.         setSupportActionBar(toolbar);  
  14.         recyclerView=(RecyclerView)findViewById(R.id.recyclerView);  
  15.         layoutManager=new LinearLayoutManager(this);  
  16.         recyclerView.setLayoutManager(layoutManager);  
  17.         recyclerView.setHasFixedSize(true);  
  18.         int count=0;  
  19.         for(String Name:contacts_name)  
  20.         {  
  21.             nameArrayList.add(new Name(contacts_name[count]));  
  22.             count++;  
  23.         }  
  24.         adapter=new Adapter(nameArrayList);  
  25.         recyclerView.setAdapter(adapter);  
  26.     }   
  27.     @Override  
  28.     public boolean onCreateOptionsMenu(Menu menu) {  
  29.         getMenuInflater().inflate(R.menu.menuitems,menu);  
  30.         MenuItem menuItem=menu.findItem(R.id.actionsearch);  
  31.         SearchView searchView=(SearchView) MenuItemCompat.getActionView(menuItem);  
  32.         searchView.setOnQueryTextListener(this);  
  33.         return super.onCreateOptionsMenu(menu);  
  34.     }  
  35.   
  36.     @Override  
  37.     public boolean onQueryTextSubmit(String query) {  
  38.         return false;  
  39.     }    
  40.     @Override  
  41.     public boolean onQueryTextChange(String newText) {  
  42.         newText=newText.toLowerCase();  
  43.         ArrayList<Name>newlist=new ArrayList<>();  
  44.         for(Name name:nameArrayList)  
  45.         {  
  46.             String getName=name.getName_val().toLowerCase();  
  47.             if(getName.contains(newText)){  
  48.                 newlist.add(name);  
  49.   
  50.             }    
  51.         }  
  52.         adapter.filter(newlist);  
  53.         return true;  
  54.     }  
  55. }  

Search Logic

  • When you type something on search bar, onQueryTextChang(); method will execute and it will generate a new arraylist.
  • notifyDataSetChanged(); will refresh your recycler view.
Sample output

 

Summary

In this article, I discussed how to create custom action bar and RecyclerView. I also explained how to perform data binding and searching operation with RecyclerView.


Similar Articles