How To Create Custom Recycler View In Android

RecyclerView is a advanced version of listview. In this tutorial we are going to learn how to create a custom Recycler view in android

Create new Project

Open android studio =>new =>Project=>Select Empty Activity

Adding Dependency

Open build.gradle(Module:app) and add below recycler view dependency and rebuild project

compile 'com.android.support:recyclerview-v7:25.3.1'

Creating Recycler View Design

After finishing gradle build Open activity_main.xml file and paste the below code to create a
Recycler view widget in your Activity

acitvity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.androidheap.recyclerview.MainActivity">

    <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"

        />
</RelativeLayout>

Designing the Row of Recycler View

Create new xml file in your layout Which defines how each row of Recycler view to be displayed,.
Paste the below code to create a row design

row_design.xml

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#b2c7ac"
        android:id="@+id/relativeLayout">
     <!-- icon -->

        <ImageView
          android:id="@+id/item_icon"
            android:background="@drawable/edit_drawable"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="1dp"

            android:layout_marginBottom="1dp"
            android:contentDescription="icon"
            />

        <!-- title -->

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/edit_drawable"
            android:layout_toRightOf="@+id/item_icon"
            android:layout_alignBaseline="@+id/item_icon"
            android:textColor="@android:color/holo_orange_dark"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp"
            android:textSize="20dp"
            />
    </RelativeLayout>
    //adds a black line after each row

    <View
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="#000"/>
</LinearLayout>

Create AdapterClass

Creating a java Bean class which stores the data.
create Class named Item_Data.java
and paste the below code ,this Class is used to create array of item data

Item_Data.java

package com.example.androidheap.recyclerview;
public class ItemData
{
    private String title;    private int imageUrl;
    public ItemData(String title, int imageUrl) 

   {
        this.title = title;        this.imageUrl = imageUrl;    }

    public String getTitle() {
        return title;    }

    public void setTitle(String title) {
        this.title = title;    }

    public int getImageUrl() {
        return imageUrl;    }

    public void setImageUrl(int imageUrl) {
        this.imageUrl = imageUrl;    }
}

create a adapter class

Adapter class is a subclass of RecyclerView.Adapter which provides view that represent items in data set

Create adapter class named MyAdapter.java and paste the below code. and in the  onCreateViewHolder()method inflates row_design.xml.

package com.example.androidheap.recyclerview;
import android.content.Context;
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 android.widget.Toast;
import java.util.ArrayList;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private Item_Data[] itemsData;

    Context context;
    public MyAdapter(Item_Data[] itemsData, Context context) {

        this.itemsData = itemsData;
        this.context = context;

    }

    // Create new views (invoked by the layout manager)

    @Override

    public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {

        // create a new view
        View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_design, null, false);

        // create ViewHolder
        MyViewHolder viewHolder = new MyViewHolder(itemLayoutView);
        viewHolder.CustomViewHolder(itemLayoutView);
        return viewHolder;
    }

    // Replace the contents of a view (invoked by the layout manager)

    @Override
    public void onBindViewHolder(MyViewHolder viewHolder, final int position) {

        // - get data from your itemsData at this position

        // - replace the contents of the view with that itemsData

        viewHolder.txtViewTitle.setText(itemsData[position].getTitle());
        viewHolder.imgViewIcon.setImageResource(itemsData[position].getImageUrl());
        viewHolder.txtViewTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, itemsData[position].getTitle(), Toast.LENGTH_SHORT).show();
            }

        });
    }

    // inner class to hold a reference to each item of RecyclerView
    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView txtViewTitle;
        public ImageView imgViewIcon;

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

        public void CustomViewHolder(View itemView) {

            txtViewTitle = (TextView) itemView.findViewById(R.id.textView);
            imgViewIcon = (ImageView) itemView.findViewById(R.id.item_icon);

        }

    }

    // Return the size of your itemsData (invoked by the layout manager)

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

Now Open MainActivity.java file and paste below code.

Pass the item data array to the Adapter class

And set that adapter to recycler view

MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView rv=(RecyclerView)findViewById(R.id.recyclerView);

        //array of items 

        Item_Data itemsData[] = {
                new ItemData("Android", R.mipmap.ic_launcher),
                new ItemData("Kitkat",R.mipmap.ic_launcher),
                new ItemData("Lollipop", R.mipmap.ic_launcher),
                new ItemData("Marshmallow", R.mipmap.ic_launcher),
                new ItemData("Nougat", R.mipmap.ic_launcher)
                             };

        // 2. set layoutManger
        rv.setLayoutManager(new LinearLayoutManager(this));

        // 3. create an adapter
        MyAdapter mAdapter = new MyAdapter(itemsData,getApplicationContext());

        // 4. set adapter
        rv.setAdapter(mAdapter);
    }
}

Result :