Android RecyclerView and CardView Tutorial

In this tutorial we will start off RecylerView, it’s very similar to ListView, but RecyclerView is much more faster and efficient than ListView. In this particular example we will be generating a list of Employees using CardView & RecyclerView with custom adapter. If you are not familar with CardView you can check previous turorial. so let’s begin

Step 1 : Add the following dependency to your app level gradle

	compile 'com.android.support:recyclerview-v7:25.0.1'
	compile 'com.android.support:cardview-v7:25.0.1'

view raw Dependencies.java hosted with ❤ by GitHub

Step 2 : Let’s create the model class for employee using which we will be adding an arraylist of employees. Create a new java class and name it ‘Employee.java’. Add the following code to the file

	public class Employee {
	private String employeeName;
	private String employeeEmail;
	private String employeePhone;
	public Employee(String employeeName, String employeeEmail, String employeePhone) {
	this.employeeName = employeeName;
	this.employeeEmail = employeeEmail;
	this.employeePhone = employeePhone;
	}
	/*Getters and setters to access the private members*/
	public String getEmployeeName() {
	return employeeName;
	}
	public void setEmployeeName(String employeeName) {
	this.employeeName = employeeName;
	}
	public String getEmployeeEmail() {
	return employeeEmail;
	}
	public void setEmployeeEmail(String employeeEmail) {
	this.employeeEmail = employeeEmail;
	}
	public String getEmployeePhone() {
	return employeePhone;
	}
	public void setEmployeePhone(String employeePhone) {
	this.employeePhone = employeePhone;
	}
	}

view raw Employee.java hosted with ❤ by GitHub

Step 3 : Now we will create layout file that will be utilized by the adapter of the RecyclerView to generate each item in the list. Add a new file to your ‘layout’ folder and give the filename as ‘row_employee.xml’. Add the following code to your file

	<?xml version="1.0" encoding="utf-8"?>
	<!-- START*** Root Container *** -->
	<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:card_view="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	card_view:cardCornerRadius="6dp"
	card_view:cardElevation="3dp"
	card_view:cardUseCompatPadding="true">
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="5dp"
	android:orientation="vertical"
	android:padding="5dp">
	<!-- TextView Employee Name -->
	<TextView
	android:id="@+id/txt_employee_name"
	android:layout_width="match_parent"
	android:layout_height="wrap_content" />
	<!-- TextView Employee Email -->
	<TextView
	android:id="@+id/txt_employee_email"
	android:layout_width="match_parent"
	android:layout_height="wrap_content" />
	<!-- TextView Employee Phone -->
	<TextView
	android:id="@+id/txt_employee_phone"
	android:layout_width="match_parent"
	android:layout_height="wrap_content" />
	</LinearLayout>
	</android.support.v7.widget.CardView>
	<!-- END*** Root Container *** -->

view raw row_employee.xml hosted with ❤ by GitHub

Step 4 : We will now create the adapter that will be used by the RecyclerView. Create a new java class in your package and name it EmployeeAdapter.java

	public class EmployeeAdapter extends RecyclerView.Adapter<EmployeeAdapter.EmployeeViewHolder> {
	private ArrayList<Employee> dataList;
	public EmployeeAdapter(ArrayList<Employee> dataList) {
	this.dataList = dataList;
	}
	@Override
	public EmployeeViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
	LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
	View view = layoutInflater.inflate(R.layout.row_employee, parent, false);
	return new EmployeeViewHolder(view);
	}
	@Override
	public void onBindViewHolder(EmployeeViewHolder holder, int position) {
	holder.txtEmpName.setText(dataList.get(position).getEmployeeName());
	holder.txtEmpEmail.setText(dataList.get(position).getEmployeeEmail());
	holder.txtEmpPhone.setText(dataList.get(position).getEmployeePhone());
	}
	@Override
	public int getItemCount() {
	return dataList.size();
	}
	class EmployeeViewHolder extends RecyclerView.ViewHolder {
	TextView txtEmpName, txtEmpEmail, txtEmpPhone;
	EmployeeViewHolder(View itemView) {
	super(itemView);
	txtEmpName = (TextView) itemView.findViewById(R.id.txt_employee_name);
	txtEmpEmail = (TextView) itemView.findViewById(R.id.txt_employee_email);
	txtEmpPhone = (TextView) itemView.findViewById(R.id.txt_employee_phone);
	}
	}
	}

view raw EmployeeAdapter.java hosted with ❤ by GitHub

Step 5 : Now we will add RecyclerView tags to activity_mail.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"
	tools:context="mathew.navjacinth.com.recyclerviewdemo.MainActivity">
	<android.support.v7.widget.RecyclerView
	android:id="@+id/recycler_view"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

Step 6 : Now in MainActivity.java we will add 4 dummy Employee object into ArrayList which will be passed to the adapter ‘EmployeeAdapter.java’ while instantiating the adapter, then set the adapter to the RecyclerView. The code for MainActivity.java is given below

	public class MainActivity extends AppCompatActivity {
	private RecyclerView recyclerView;
	private EmployeeAdapter adapter;
	private ArrayList<Employee> employeeArrayList;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	employeeArrayList = new ArrayList<>();
	employeeArrayList.add(new Employee("Employee1", "emp1@example.com", "123456789"));
	employeeArrayList.add(new Employee("Employee2", "emp2@example.com", "987654321"));
	employeeArrayList.add(new Employee("Employee3", "emp3@example.com", "789456123"));
	employeeArrayList.add(new Employee("Employee4", "emp4@example.com", "321654987"));
	recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
	adapter = new EmployeeAdapter(employeeArrayList);
	RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(MainActivity.this);
	recyclerView.setLayoutManager(layoutManager);
	recyclerView.setAdapter(adapter);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

Get the project code at GitHub