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
• DataBinding

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.

compile 'com.android.support:cardview-v7:25.0.1'
compile 'com.android.support:design:25.0.1'
}

Setting up the layouts

We need custom search bar in an Application action bar, so remove the default action bar in styles.xml.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</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.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:id="@+id/toolbar">
</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.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/actionsearch"
        android:title="Search"
        android:icon="@drawable/ic_action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always|collapseActionView">
    </item>
</menu>

Main Activity.XML

 

Now go to the main layout and add a RecyclerView and include our custom tool bar.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.saravanans.searchablerecycler.MainActivity">
    <include
        layout="@layout/toolbar"></include>
    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent">
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView">
    </android.support.v7.widget.RecyclerView>
    </LinearLayout>
</LinearLayout>

CardView

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:layout_margin="5dp">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="7">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:background="@drawable/unnamed"
        android:padding="@dimen/cardview_default_radius"
        android:layout_margin="@dimen/activity_vertical_margin" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/name"
        android:text="Name"
        android:textSize="18sp"
        android:textStyle="bold"
        android:gravity="center_vertical"
        android:layout_weight="2"/>
</LinearLayout>
</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.

public class Name {
    String name_val;
    Name(String name_val)
    {
        this.setName_val(name_val);
    }
    public String getName_val() {
        return name_val;
    }

    public void setName_val(String name_val) {
        this.name_val = name_val;
    }
}

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.

public class Adapter extends RecyclerView.Adapter <Adapter.vholder>{
    ArrayList<Name>nameArrayList=new ArrayList<>();
    Adapter(ArrayList nameArrayList)
    {
        this.nameArrayList=nameArrayList;
    }
    @Override
    public vholder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.name_layout,parent,false);
        return new vholder(view);
    }

    @Override
    public void onBindViewHolder(vholder holder, int position) {
        holder.nametxt.setText(nameArrayList.get(position).getName_val());
    }

    @Override
    public int getItemCount() {
        return nameArrayList.size();
    }
    public static class vholder extends RecyclerView.ViewHolder{
        TextView nametxt;
        public vholder(View itemView) {
            super(itemView);
            nametxt=(TextView) itemView.findViewById(R.id.name);
        }
    }
    public void filter(ArrayList<Name>newList)
    {
        nameArrayList=new ArrayList<>();
        nameArrayList.addAll(newList);
        notifyDataSetChanged();
    }
}

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. 

public class MainActivity extends AppCompatActivity implements SearchView.OnQueryTextListener{
    String[] contacts_name={"Ajay","Bala","Gokul","Kishore","Mukil","Naveed","Ragul","Saravanan","Sasikumar","Thomas Xavier","Tyagarajan"};
    Toolbar toolbar;
    RecyclerView recyclerView;
    Adapter adapter;
    RecyclerView.LayoutManager layoutManager;
    ArrayList<Name>nameArrayList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar=(Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        recyclerView=(RecyclerView)findViewById(R.id.recyclerView);
        layoutManager=new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        int count=0;
        for(String Name:contacts_name)
        {
            nameArrayList.add(new Name(contacts_name[count]));
            count++;
        }
        adapter=new Adapter(nameArrayList);
        recyclerView.setAdapter(adapter);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menuitems,menu);
        MenuItem menuItem=menu.findItem(R.id.actionsearch);
        SearchView searchView=(SearchView) MenuItemCompat.getActionView(menuItem);
        searchView.setOnQueryTextListener(this);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onQueryTextSubmit(String query) {
        return false;
    }
    @Override
    public boolean onQueryTextChange(String newText) {
        newText=newText.toLowerCase();
        ArrayList<Name>newlist=new ArrayList<>();
        for(Name name:nameArrayList)
        {
            String getName=name.getName_val().toLowerCase();
            if(getName.contains(newText)){
                newlist.add(name);

            }
        }
        adapter.filter(newlist);
        return true;
    }
}

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.