Working With RecyclerView in Android Studio

This is my first article that using English. Actually this site based on Indonesia Language. For some reason i also using English in several article.

Today i gonna show you how to working with Recyclerview. A simple tutorial in order to you are easy to understand.

PREPARATION 

In this tutorial you just need to create three java classes, there are :

1. MainActivity.java
2. UserModel.java
3. UserAdapter.java

And two xml layouts, there are :

1. activity_main.xml
2. item_user.xml

IMPLEMENTATION

First, compile the Recyclerview library on your build.gradle(Module:app), like the following :

	apply plugin: 'com.android.application'
	android {
	compileSdkVersion 25
	buildToolsVersion '23.0.1'
	defaultConfig {
	applicationId "com.putuguna.workingwithrecyclerview"
	minSdkVersion 16
	targetSdkVersion 25
	versionCode 1
	versionName "1.0"
	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
	}
	buildTypes {
	release {
	minifyEnabled false
	proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
	}
	}
	}
	dependencies {
	compile fileTree(include: ['*.jar'], dir: 'libs')
	androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
	exclude group: 'com.android.support', module: 'support-annotations'
	})
	compile 'com.android.support:appcompat-v7:25.0.0'
	testCompile 'junit:junit:4.12'
	//just add this line
	compile 'com.android.support:recyclerview-v7:25.0.1'
	}

view raw build.gradle hosted with ❤ by GitHub

Modify your activity_main.xml, like the following 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:id="@+id/activity_main"
	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.putuguna.workingwithrecyclerview.MainActivity">
	<android.support.v7.widget.RecyclerView
	android:id="@+id/recyclerview"
	android:layout_width="match_parent"
	android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

Next, create one more layout for the item, in this project named as item_user.xml :

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:id="@+id/text_view_user_name"
	android:layout_width="match_parent"
	android:layout_height="50dp"
	android:gravity="center"
	android:text="user name"/>
	</LinearLayout>

view raw user_item.xml hosted with ❤ by GitHub

Now, it's time to modify our java class, first we need to create a model for our user. In this project named UserModel.java

Second, we modify UserAdapter.java, this adapter have to extend RecyclerView.Adapter<>. But before do that, the first thing you should do is write the inner class and give name as ViewHolder and this inner class extends RecyclerView.ViewHolder. So the UserAdapter.java look like below :

	package com.putuguna.workingwithrecyclerview;
	import android.support.v7.widget.RecyclerView;
	import android.view.View;
	import android.view.ViewGroup;
	/**
	* Created by putuguna on 22/11/16.
	*/
	public class UserAdapter {
	public class ViewHolder extends RecyclerView.ViewHolder{
	public ViewHolder(View itemView) {
	super(itemView);
	}
	}
	}

view raw UserAdapter.java hosted with ❤ by GitHub

Next step, you have to extend the UserAdapter.java to RecyclerView.Adapter<UserAdapter.ViewHolder>. ViewHolder comes from inner class that view have created before.

Next, implement all method that required to be implemented. After you implement all method, the Adapter look like this :

	package com.putuguna.workingwithrecyclerview;
	import android.support.v7.widget.RecyclerView;
	import android.view.View;
	import android.view.ViewGroup;
	/**
	* Created by putuguna on 22/11/16.
	*/
	public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder>{ // if you not yet implement the method, this line will coloring red
	@Override
	public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
	return null;
	}
	@Override
	public void onBindViewHolder(ViewHolder holder, int position) {
	}
	@Override
	public int getItemCount() {
	return 0;
	}
	public class ViewHolder extends RecyclerView.ViewHolder{
	public ViewHolder(View itemView) {
	super(itemView);
	}
	}
	}

view raw UserAdapter.java hosted with ❤ by GitHub

That all, the first thing we do, to setup our RecyclerView Adapter. Now just add some attribute that relevant with our required.

Full code of UserAdapter.java :

	package com.putuguna.workingwithrecyclerview;
	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.List;
	/**
	* Created by putuguna on 22/11/16.
	*/
	public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder>{
	private List<UserModel> mListUser;
	private Context mContexl;
	public UserAdapter(List<UserModel> mListUser, Context mContexl) {
	this.mListUser = mListUser;
	this.mContexl = mContexl;
	}
	@Override
	public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
	View view = LayoutInflater.from(parent.getContext())
	.inflate(R.layout.item_user,parent,false);
	return new ViewHolder(view);
	}
	@Override
	public void onBindViewHolder(ViewHolder holder, int position) {
	//get the user by its position
	UserModel user = mListUser.get(position);
	holder.tvUserName.setText("User Name : " + user.getName() +"\n" +
	"User Age : " + user.getAge());
	}
	@Override
	public int getItemCount() {
	return mListUser.size();
	}
	/**
	* inner class
	* here we define all of attribute item in our layout
	*/
	public class ViewHolder extends RecyclerView.ViewHolder{
	public TextView tvUserName;
	public ViewHolder(View itemView) {
	super(itemView);
	tvUserName = (TextView) itemView.findViewById(R.id.text_view_user_name);
	}
	}
	}

view raw UserAdapter.java hosted with ❤ by GitHub

After you finish with your Adapter, now time to modify your MainActivity.java. Do Like code below :

	package com.putuguna.workingwithrecyclerview;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.support.v7.widget.DefaultItemAnimator;
	import android.support.v7.widget.LinearLayoutManager;
	import android.support.v7.widget.RecyclerView;
	import java.util.ArrayList;
	import java.util.List;
	public class MainActivity extends AppCompatActivity {
	private RecyclerView rvUser;
	private List<UserModel> mListUser;
	private UserAdapter mUserAdapter;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	rvUser = (RecyclerView) findViewById(R.id.recyclerview);
	mListUser = new ArrayList<>();
	//create data user
	UserModel user1 = new UserModel("John","24");
	UserModel user2 = new UserModel("Moon","22");
	UserModel user3 = new UserModel("Meikel","20");
	UserModel user4 = new UserModel("Peter","19");
	UserModel user5 = new UserModel("Josh","34");
	UserModel user6 = new UserModel("Andrea","44");
	UserModel user7 = new UserModel("Ronaldo","20");
	UserModel user8 = new UserModel("Jangkar","10");
	UserModel user9 = new UserModel("Loker","23");
	UserModel user10 = new UserModel("Brotowalo","30");
	//add object user to list
	mListUser.add(user1);
	mListUser.add(user2);
	mListUser.add(user3);
	mListUser.add(user4);
	mListUser.add(user5);
	mListUser.add(user6);
	mListUser.add(user7);
	mListUser.add(user8);
	mListUser.add(user9);
	mListUser.add(user10);
	//passing to adapter
	mUserAdapter = new UserAdapter(mListUser, this);
	rvUser.setLayoutManager(new LinearLayoutManager(this));
	rvUser.setItemAnimator(new DefaultItemAnimator());
	rvUser.setAdapter(mUserAdapter);
	mUserAdapter.notifyDataSetChanged();
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

The output will show like below :

Recyclerview output