How to implement Recycler view in android app ?

In this tutorial, we will look into what recycler view in android is, how it is implemented, how we can design the layout using it and finally understand how to define each single item elements using a recyclerview example .

RecyclerView example

RecyclerView is an advanced version of ListView and GridView with improved performance and other benefits.It is more flexible and efficient than ListView and GridView .

RecyclerView is a ViewGroup, which is used to display both vertical and horizontal scrolling list of elements based on large set of data items. RecyclerView is a widget of android support-v7 version.

RecyclerView widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views and the elements change at runtime based on user action or network events.

RecyclerView provides three kinds of Layout Manager to change their view very efficiently :

LinearLayoutManager which shows items in a vertical or horizontal scrolling list.
GridLayoutManager which shows items in a grid.
StaggeredGridLayoutManager which shows items in a staggered grid .

1. Create a New Project :

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from templates to implement recycler view in android using android studio.

2. Implement support library :

Implement RecyclerView library and Picasso library inside your project build.gradle file .

implementation 'com.android.support:recyclerview-v7:28.0.0-rc01'
implementation 'com.squareup.picasso:picasso:2.5.2'

Try to add the latest version of the RecyclerView and Picasso library. Once that’s done, save the file and perform a Gradle sync.

3. Add RecyclerView to your activity_main.xml or main layout

Add RecyclerView to your main layout.

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="2dp">

Now open res -> layout -> activity_main.xml file and just implement the following xml code .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="2dp">

    </android.support.v7.widget.RecyclerView>

</RelativeLayout>

4. Create a Layout Resource file :

Now create a Layout Resource file , which renders the view of a single row named it as rview.xml to implement recycler view in android .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:background="@android:color/holo_blue_dark"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/imgcar"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        android:padding="4dp"
        android:layout_margin="4dp"
        android:src="@drawable/abc" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_margin="2dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Title Here"
            android:textColor="@color/colorAccent"
            android:textSize="40sp"
            android:textStyle="bold" />
        <TextView
            android:id="@+id/subtitle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Subtitle here"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />

    </LinearLayout>


</LinearLayout>

5. Create a Custom Adapter class :

Now we create a custom adapter class to find the view of a row and set it into recycler view adapter .

package net.technxt;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
    private Context mContext;
    private Integer[] mImage;
    private String[] mTitle;
    private String[] msubTitle;

    public static class MyViewHolder extends RecyclerView.ViewHolder {

        TextView title;
        TextView subtitle;
        ImageView imgView;

        public MyViewHolder(View itemView) {
            super(itemView);

            this.title = (TextView) itemView.findViewById(R.id.title);
            this.subtitle = (TextView) itemView.findViewById(R.id.subtitle);
            this.imgView = (ImageView) itemView.findViewById(R.id.imgcar);
        }
    }

    public CustomAdapter(Context mContext, Integer[] image,String[] title,String[] subTitle) {
        this.mContext = mContext;
        this.mImage = image;
        this.mTitle = title;
        this.msubTitle = subTitle;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent,
                                           int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.rview, parent, false);

        MyViewHolder myViewHolder = new MyViewHolder(view);
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int i) {


        holder.title.setText(mTitle[i]);
        holder.subtitle.setText(msubTitle[i]);
        Picasso.with(mContext).load(mImage[i]).into(holder.imgView);


    }

    @Override
    public int getItemCount() {
        return mTitle.length;
    }
}

6. Now open your MainActivity.java and add following code :

Now create an instance of CustomAdapter and setAdapter( ) to RecyclerView or just implement the following code .

package net.technxt;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {
    RecyclerView rv;

    Integer[] drawableArray = {R.drawable.abc, R.drawable.xyz, R.drawable.abc,
            R.drawable.xyz, R.drawable.abc,R.drawable.xyz, R.drawable.abc, R.drawable.xyz,
            R.drawable.abc, R.drawable.xyz};
    String[] titleArray = {"Title1","Title2","Title3","Title4","Title5","Title6","Title7","Title8","Title9","Title10"};
    String[] subtitleArray = {"subtitle1","subtitle2","subtitle3","subtitle4","subtitle5","subtitle6","subtitle7","subtitle8","subtitle9","subtitle10"};
    CustomAdapter ad;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv = (RecyclerView)findViewById(R.id.rv);
        ad = new CustomAdapter(MainActivity.this,drawableArray,titleArray,subtitleArray);
        rv.setAdapter(ad);
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setHasFixedSize(true);

    }
}

Now run the project/app to test RecyclerView in android app through android device or any Emulator .