Android RecyclerView Tutorial

Google was introduced the Material Design in Lollipop 5.0 API 21 which RecyclerView is one of the Material design.   Android RecyclerView is much more better than old generation ListView because it is more advanced and more flexible version of ListView. Besides, it can control the layout of the list by using the LayoutManager unlike ListView are always remain the vertical list. Moreover, the CardView widget is a new component that display the item in RecyclerView to make it look better.

In this tutorial, I will teach you some simple steps to coding the RecyclerView in your application. You will just take a little time to complete and make you easy to understand.

Creating a new Project

1. Open Android Studio IDE in your computer.
2. Create a new project and Edit the Application name to “RecyclerViewExample”.
(Optional) You can edit the company domain or select the suitable location for current project tutorial. Then click next button to proceed.
3. Select Minimum SDK (API 15:Android 4.0.3 (IceCreamSandwich). I choose the API 15 because many android devices currently are support more than API 15. Click Next button.
4. Choose “Empty Project” and Click Next button
5. Lastly, press finish button.

Add Dependency in build.gradle

To activate the RecyclerView in your project, you should add dependency in your build.gradle (Module:app). Just add “compile ‘com.android.support:recyclerview-v7:23.3.0′” in your dependencies.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:recyclerview-v7:23.3.0'
}

Create a new class

After add your dependency, create a new java class and name it as MyAdapter. This class is the adapter of data set.

Edit MyAdapter.java class

In the MyAdapter.java class extends RecyclerView.Adapter to get the RecycleView method in the class. This class will handler the views (eg. textview) of recyclerview.

RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
– It will automatically called when the RecyclerView need the ViewHolder to represent an item.

void onBindViewHolder(RecyclerView.ViewHolder holder, int position)
– It called by the RecyclerView to display data in specific position.

int getItemCount()
– It return a total item in the dataset.

import android.support.v7.widget.RecyclerView;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by HP on 10/5/2016.
 */
class MyAdapter extends RecyclerView.Adapter {

    class ViewHolder extends RecyclerView.ViewHolder {

        private TextView tv;

        public ViewHolder(TextView textView) {
            super(textView);
            tv = textView;
        }

        public TextView getTv() {
            return tv;
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(new TextView(parent.getContext()));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ViewHolder vh = (ViewHolder) holder;
        vh.getTv().setText("Item " + position);
    }

    @Override
    public int getItemCount() {
        return 10;
    }
}

Edit activity.main.xml layout

In the layout, open activity.main.xml and add recyclerview widget to your layout.

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.questdot.recyclerviewexample.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />
</RelativeLayout>

Edit MainActivity.java class

After that, copy below code to your MainActivity.java. This activity set RecyclerView to linear layout and set the adapter that you created above “MyAdapter” class. You also able to set your layout to Grid View by using GridLayoutManager. In this example, I am using LinearLayoutManager to display the recyclerview.

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 {

    private RecyclerView rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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


        rv.setLayoutManager(new LinearLayoutManager(this));

        rv.setAdapter(new MyAdapter());

    }

}

Run you Project

Now, you can start your project in your emulator or android device. RecyclerView is very easy to implement, you just need more practice and understanding the source code.

(Android RecyclerView)

Source Code

[sociallocker][/sociallocker]