Android RecyclerView tutorial: Build an awesome List View and Grid View

Guys,

Hello. Are you still implementing ListView to show List View? yes? Okay you are doing it right.

 

Just kidding.

Time’s over for ListView. Now we’ll use android RecyclerView to build awesome List Views, Grid Views or Vertical Lists – actually we can make everything we want. So flexible, Right?

 

Okay, let’s make an awesome list first with RecyclerView.

To make a List View we have to follow these steps:

1. Make an xml layout to display a row.

2. Make an Adapter class and Inflate this layout into the adapter and pass this view into a view holder.

3. View Holder is a class that represents a single row where we have to initialize those components that belongs to the single row.

4. Make a data model that holds single row data.

 

Okay Lets start.

-> First, Open build.gradle (App Module) and add this line on compile dependency.

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

 

sync gradle and you are good to go.

-> Create single_item.xml layout that represents the single row.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent" android:layout_height="match_parent">

	<LinearLayout android:layout_width="fill_parent"
		android:layout_height="50sp" android:layout_margin="20sp"
		android:gravity="center_vertical" android:orientation="horizontal">

		<ImageView android:id="@+id/itemIcon" android:layout_width="30dp"
			android:layout_height="30dp" android:src="@mipmap/ic_launcher" />

		<TextView android:id="@+id/itemText" android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:paddingLeft="10dp"
			android:text="Dummy Text Text" android:textSize="20sp" />

	</LinearLayout>

</RelativeLayout>

 

Here I created an xml which has only an ImageView to show icon and a TextView to display the title.

> Create a data model class SingleItemData.java that has two variable. One itemId for icon resourse id and title for title string.

public class SingleItemData {
	private int iconId;
	private String title;

	public int getIconId() {
		return iconId;
	}

	public void setIconId(int itemId) {
		this.iconId = itemId;
	}

	public String getTitle() {
		return title;
	}

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

 

-> Lets make an adapter. Create a java class MyAdapter.java that extends RecyclerView.Adapter and override three methods. onCreateViewHolder, onBindViewHolder and getItemCount. Make a class MyViewHolder inside MyAdapter class.

 

package sayem.picosoft.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 java.util.List;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
LayoutInflater inflater;
List<SingleItemData> data;

public MyAdapter(Context context,List<SingleItemData> data) {
inflater = LayoutInflater.from(context);
this.data = data;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int i) {
View view = inflater.inflate(R.layout.single_item,parent,false);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}

@Override
public void onBindViewHolder(MyViewHolder myViewHolder, int position) {
SingleItemData currentData = this.data.get(position);
myViewHolder.icon.setImageResource(currentData.getIconId());
myViewHolder.title.setText(currentData.getTitle());
}

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

class MyViewHolder extends RecyclerView.ViewHolder{

ImageView icon;
TextView title;

public MyViewHolder(View itemView) {
super(itemView);
icon = (ImageView) itemView.findViewById(R.id.itemIcon);
title = (TextView) itemView.findViewById(R.id.itemText);
}
}
}

 

These three methods deserve some explanation, so I’m gonna explain briefly.

We created a MyViewHolder class that extends RecyclerView.ViewHolder is actually the class that takes a view inflated from an xml layout. We used that view to find the components inside it  and initialize them. But onCreateViewHolder method creates the instance of View Holder, in this case MyViewHolder and returns that view holder to onBindViewHolder method. onBindViewHolder stands for binding the values from the data objects to the view.

Okay, chill. We’ve passed the critical part. We’ve made an adapter and now we just have to use it.

-> Add recycler view to that layout where you want to use it. I placed it into my activity_main.xml

<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="sayem.picosoft.recyclerview.MainActivity">

<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/recyclerView"/>

</RelativeLayout>

 

-> Open Activity (here MainActivity.java), initialize RecyclerView and set the adapter.

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MainActivity extends ActionBarActivity {
RecyclerView recyclerView;

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

recyclerView = (RecyclerView) this.findViewById(R.id.recyclerView);
recyclerView.setAdapter(new MyAdapter(getApplicationContext(), getData()));

// for grid view

// recyclerView.setLayoutManager(new GridLayoutManager(getApplicationContext(),3));

recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
}

// get data from resources and store into the data model SingleItemData
// make an arraylist of data model instance
private List<SingleItemData> getData() {
List<SingleItemData> list = new ArrayList<>();
int iconResources[] = {R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher};
String titles[] = {"The Flash", "Spiderman", "Superman", "Increadible Hulk", "Thor"};

for (int i = 0; i < titles.length && i < iconResources.length; i++) {
SingleItemData data = new SingleItemData();
data.setIconId(iconResources[i]);
data.setTitle(titles[i]);
list.add(data);
}

return list;
}

}

 

Congratulations! You’ve just made an awesome List View / Grid View with flexible recyclerview.