Android RecyclerView Tutorial

Android RecyclerView is advanced version of ListView with improved performance and other benfits.
Today we'll learn how to implement RecyclerView with custom Adapter.

Below is the RecyclerView widget with necessary attributes.

<android.support.v7.widget.RecyclerView

    android:id="@+id/recyclerview"

    android:layout_width="match_parent"

    android:layout_height="match_parent"/>

1. Creating New Project

1. In Android Studio go to File=>New Project and fill all required details to create a new project. When it prompt select Activity window then select Empty Activity.

2. Open build.xml and add dependancy for recycler view  com.android.support:recyclerview-v7:26.1.0 and rebuild the app 

build.xml

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26

    defaultConfig {
        applicationId "com.mobiknight.recyclerviewtutorial"

        minSdkVersion 15

        targetSdkVersion 26

        versionCode 1

        versionName "1.0"

        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

}

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:26.1.0'

   implementation 'com.android.support.constraint:constraint-layout:1.0.2'

   testImplementation 'junit:junit:4.12'

   androidTestImplementation 'com.android.support.test:runner:1.0.1'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

//  RecyclerView

i  mplementation 'com.android.support:recyclerview-v7:26.1.0'

}

3.Open activity_main.xml and add recycler view widget.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 

    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/recyclerview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>

2. Writing The Adapter Class

 After adding RecyclerView widget we'll create Adapter class which is same as ListView Adapter but Overriding Methods are different.

4. Create a class named CityData.java and declare cityname and famousplace. And also generate getter setter methods

CityData.java

package com.mobiknight.recyclerviewtutorial;

/** * Created by Vishnu Kumar Soni on 2/6/2018. */
public class CityData {
    private String cityname,famousplace;
    public CityData(String cityname, String famousplace){
        this.cityname = cityname;
        this.famousplace= famousplace;
    }

    public String getCityname() {
        return cityname;
    }

    public void setCityname(String cityname) {
        this.cityname = cityname;
    }

    public String getFamousplace() {
        return famousplace;
    }

    public void setFamousplace(String famousplace) {
        this.famousplace = famousplace;
    }
}

5. Now create a layout xml named city_list.xml with the below code. layout file renders a row to display in recyclerview by cityname and famousplace.

city_list.xml

<?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"

android:background="?android:attr/selectableItemBackground"

android:orientation="vertical">

<TextView

        android:id="@+id/cityname"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:textSize="18dp"

        android:text="asdfasfsf"

android:textColor="#000"

        android:paddingLeft="16dp"/>

    <TextView

        android:id="@+id/famousplace"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:textSize="14dp"

        android:text="asdfasfsf"

android:textColor="#000"

android:paddingLeft="32dp"

android:paddingBottom="5dp"/>

</LinearLayout>

6. Now create a Adapter class named CityAdapter.java with below code. Here onCreateViewHolder() method inflates city_list.xml. In onBindViewHolder() method CityData set to each row.

CityAdapter.java

package com.mobiknight.recyclerviewtutorial;

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.TextView;
import java.util.ArrayList;

/**
 * Created by Vishnu Kumar Soni on 2/6/2018.
 */

public class CityAdapter extends RecyclerView.Adapter<CityAdapter.Holder> {

    private Context context;
    private ArrayList<CityData>arrls;
    public CityAdapter(Context context, ArrayList<CityData>arrls){
        this.context = context;
        this.arrls = arrls;
    }
    @Override
    public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
        try {
            View view = LayoutInflater.from(context).inflate(R.layout.city_list, parent, false);
            Holder holder = new Holder(view);
            return holder;
        }catch (Exception e){
            e.fillInStackTrace();
        }
        return null;
    }

    @Override
    public void onBindViewHolder(Holder holder, int position) {
        CityData cityData = arrls.get(position);
        holder.cityname.setText(cityData.getCityname());
        holder.famousplace.setText(cityData.getFamousplace());
    }

    @Override
    public int getItemCount() {
        return arrls.size();
    }

    class Holder extends RecyclerView.ViewHolder{
        public TextView cityname,famousplace;
        public Holder(View itemView) {
            super(itemView);
            cityname = (TextView)itemView.findViewById(R.id.cityname);
            famousplace = (TextView)itemView.findViewById(R.id.famousplace);
        }
    }
}

7.Now open MainActivity.java  and do the below changes.Here prepareCityData() method adds  sample data to list.Here we'll display Vertical Scrolling.

MainActivity.java

package com.mobiknight.recyclerviewtutorial;

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

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private Context context;
    private RecyclerView recyclerView;
    private ArrayList<CityData>arrls;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        recyclerView = findViewById(R.id.recyclerview);
        LinearLayoutManager linearLayout = new LinearLayoutManager(context);
        recyclerView.setLayoutManager(linearLayout);
        prepareCityData();
        CityAdapter cityAdapter = new CityAdapter(context,arrls);
//        Adding Divider/Seperator        

        recyclerView.addItemDecoration(new DividerItemDecoration(this,

LinearLayoutManager.VERTICAL));

recyclerView.setAdapter(cityAdapter);
    }
    private void prepareCityData(){
        arrls = new ArrayList<>();
        arrls.add(new CityData("Jaipur","Hawa Mahal"));
        arrls.add(new CityData("Agra","Taj Mahal"));
        arrls.add(new CityData("Delhi","Lal Kila"));
        arrls.add(new CityData("Jodhpur","Ummaid Bhavan"));
        arrls.add(new CityData("Bikaner","Karni Mata Mandir"));
        arrls.add(new CityData("Jaipur","Hawa Mahal"));
        arrls.add(new CityData("Agra","Taj Mahal"));
        arrls.add(new CityData("Delhi","Lal Kila"));
        arrls.add(new CityData("Jodhpur","Ummaid Bhavan"));
        arrls.add(new CityData("Bikaner","Karni Mata Mandir"));
        arrls.add(new CityData("Jaipur","Hawa Mahal"));
        arrls.add(new CityData("Agra","Taj Mahal"));
        arrls.add(new CityData("Delhi","Lal Kila"))
    }
}

3.Displaying Horizontal Scrolling

8. For Displaying Horizontal scrolling we have to done following changes in MainActivity.java

//Horizontal Scrolling

LinearLayoutManager linearLayout = new LinearLayoutManager(context,

LinearLayoutManager.HORIZONTAL,false);

recyclerView.setLayoutManager(linearLayout);