RecyclerView in Android @AndroidMonk
Published in
4 min readFeb 19, 2017
RecyclerView is one of the most important topic in android as it is widely used in almost every application to display data from internet. This blog is mainly for beginners in android.
Complete Code Link: https://github.com/rt4914/RecyclerView-Basics/tree/master/RecyclerViewDemo
Create New Empty Project
Name this project as ‘RecyclerViewDemo’
Gradle File
Add recyclerview dependency inside build.gradle(Module:app)
//TODO(1): Add RecyclerView Library in your gradle File
compile 'com.android.support:recyclerview-v7:25.1.1'Code for activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
>
<!--TODO(2): RecyclerView inside FrameLayout-->
<android.support.v7.widget.RecyclerView
android:id="@+id/rvStudents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
>
</android.support.v7.widget.RecyclerView>
<!--TODO(3): Create one layout resource with item_student.xml name-->
</FrameLayout>Create new xml file: item_student.xml
This file will act as UI for each individual item in our recyclerview.
<?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="wrap_content"
android:background="#d2d2d2"
android:id="@+id/llItemStudents"
android:layout_margin="8dp"
>
<!--TODO(4): Remember to change the height of LinearLayout to wrap_content and also add its ID-->
<!--TODO(5): Add two TextView which will display student name and mobile number respectively-->
<TextView
android:id="@+id/tvStudentName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
android:textSize="25sp"
android:textStyle="bold"
android:textColor="@color/colorPrimary"
/>
<TextView
android:id="@+id/tvMobileNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
android:textSize="22sp"
android:textStyle="bold"
android:textColor="@color/colorAccent"
/>
</LinearLayout>Code for MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.text.Layout;
import java.util.ArrayList;
/*
* Demo Code of Recycler View
* Created on: 19th Feb, 2017
* Author Name: Rajat Talesra
* Company Name: WiseL
* This code is for Android Monk Campus Program.
*/
/*
* Recycler View is mainly used to show dynamic list of data.
* Many applications including Whatsapp, Facebook, Gmail, etc. used RecyclerView
*
* RecyclerView mainly uses two main components LayoutManager and Adapter
*
* LayoutManger: Helps to arrange data in LinearLayout or GridLayout
*
* Adapter: Helps to connect our recycler view with the custom layout and display data on screen
*
* In this demo we will display students list with their names and mobile numbers.
*/
public class MainActivity extends AppCompatActivity {
//TODO(6): Create arrayList for student names and ids.
ArrayList<String> namesArrayList = new ArrayList<>();
ArrayList<String> mobileArrayList = new ArrayList<>();
//TODO(7): Declare below mentioned components.
RecyclerView rvStudentsList;
RecyclerView.LayoutManager rvLayoutManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//TODO(10): Add data to arrayList
namesArrayList.add("Student 1");
namesArrayList.add("Student 2");
namesArrayList.add("Student 3");
namesArrayList.add("Student 4");
namesArrayList.add("Student 5");
namesArrayList.add("Student 6");
namesArrayList.add("Student 7");
namesArrayList.add("Student 8");
namesArrayList.add("Student 9");
namesArrayList.add("Student 10");
mobileArrayList.add("8766986401");
mobileArrayList.add("8766986402");
mobileArrayList.add("8766986403");
mobileArrayList.add("8766986404");
mobileArrayList.add("8766986405");
mobileArrayList.add("8766986406");
mobileArrayList.add("8766986407");
mobileArrayList.add("8766986408");
mobileArrayList.add("8766986409");
mobileArrayList.add("8766986410");
//TODO(9): Connect UI elements with java objects.
rvStudentsList = (RecyclerView) findViewById(R.id.rvStudents);
//User this to display items vertically
rvLayoutManager = new LinearLayoutManager(this);
//User this to display items in Grid Layout with 2 columns
//rvLayoutManager = new GridLayoutManager(this,2);
//TODO(10): Attach layoutManager to recycler view
rvStudentsList.setLayoutManager(rvLayoutManager);
/*
* Now we need to create one adapter, so that we can display data row wise
* For this we will create our custom adapter, i.e. StudentAdapter.java
*/
//TODO(11): Create new java class StudentAdapter.java
//TODO(16): Pass data to our custom adapter
StudentAdapter studentAdapter = new StudentAdapter(this,namesArrayList,mobileArrayList);
//TODO(17): Attach studentAdapter to recycler view
rvStudentsList.setAdapter(studentAdapter);
//TODO(18): Run your app.
}
}Create StudentAdapter.java
Now create new java class with above name which will act as custom adapter for our 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.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
//TODO(12): StudentAdapter extends RecyclerView Adapter with ViewHolder class
public class StudentAdapter extends RecyclerView.Adapter<StudentAdapter.ViewHolder> {
//TODO(13): Create two empty arrayList and one context variable;
Context mainActivityContext;
ArrayList<String> namesArrayList = new ArrayList<>();
ArrayList<String> mobileArrayList = new ArrayList<>();
//TODO(14): Create one constructor with three parameters which will passed from MainActivity class
public StudentAdapter(Context mainActivityContext, ArrayList<String> namesArrayList, ArrayList<String> mobileArrayList) {
this.mainActivityContext = mainActivityContext;
this.namesArrayList = namesArrayList;
this.mobileArrayList = mobileArrayList;
}
//TODO(15): Complete each method as mentioned below
@Override
public StudentAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//Used to connect our custom UI to our recycler view
View v = LayoutInflater
.from(parent.getContext())
.inflate(R.layout.item_student, parent, false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(StudentAdapter.ViewHolder holder, int position) {
//Used to set data in each row of recycler view
String currentName = namesArrayList.get(position);
String currentMobileNumber = mobileArrayList.get(position);
holder.tvName.setText(currentName);
holder.tvMobileNumber.setText(currentMobileNumber);
}
@Override
public int getItemCount() {
//Returns total number of rows inside recycler view
return namesArrayList.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
//Used to work with the elements of our custom UI.
LinearLayout llItemStudents;
TextView tvName;
TextView tvMobileNumber;
public ViewHolder(View itemView) {
super(itemView);
tvName = (TextView) itemView.findViewById(R.id.tvStudentName);
tvMobileNumber = (TextView) itemView.findViewById(R.id.tvMobileNumber);
llItemStudents = (LinearLayout) itemView.findViewById(R.id.llItemStudents);
llItemStudents.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mainActivityContext,
"You clicked item number: "+ getAdapterPosition(),
Toast.LENGTH_SHORT).show();
}
});
}
}
}Flow diagram of code
You can the run the app to display your data inside recyclerview
Feel free to comment.
#AndroidMonk
#WiseL
#WiseLTeach
