Recyclerview in android

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

RecyclerView :

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 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 .
RecyclerView

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. 

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="2dp"/>

</RelativeLayout>

4. Create a Layout Resource file

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="2dp"
    android:elevation="6dp"
    android:background="@android:color/background_light"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imgcar"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:src="@drawable/icon1" />

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

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Title Here"
            android:textColor="@android:color/holo_orange_light"
            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:layout_margin="4dp"
            android:textColor="@android:color/darker_gray"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

5. Create Custom Adapter class

Now create a custom adapter class to find the view of a row, set it into recycler view adapter and add recyclerview onclicklistener .

package net.technxt.recyclerviewtesting;

import android.content.Context;
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 com.squareup.picasso.Picasso;

import androidx.recyclerview.widget.RecyclerView;

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(final ViewGroup parent,
                                           final int viewType) {
        final View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recyclerview_layout, 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);


        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext,"Position : "+i,Toast.LENGTH_LONG).show();
            }
        });

    }

    @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.recyclerviewtesting;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    RecyclerView rv;

    Integer[] drawableArray = {R.drawable.icon1, R.drawable.icon2, R.drawable.icon1,
            R.drawable.icon2, R.drawable.icon1,R.drawable.icon2, R.drawable.icon1, R.drawable.icon2,
            R.drawable.icon1, R.drawable.icon2};
    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
    protected 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.setLayoutManager(new LinearLayoutManager(this));
        rv.setHasFixedSize(true);
        rv.setAdapter(ad);

    }
}

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

%d bloggers like this: