Android RecyclerView and CardView

The new support library in Android L introduced two new UI widgets: RecyclerView and CardView. The RecyclerView is a more advanced and more flexible version of the ListView. This new component is a big step because the ListView is one of the most used UI widgets. The CardView widget, on the other hand, is a new component that does not "upgrade" an existing component. In this tutorial, I'll explain how to use these two widgets and show how we can mix them. Let's start by diving into the RecyclerView.

RecyclerView: Introduction

As I mentioned, RecyclerView is more flexible that ListView even if it introduces some complexities. We all know how to use ListView in our app and we know if we want to increase the ListView performances we can use a pattern called ViewHolder

CardView

The CardView UI component shows information inside cards. We can customise its corners, the elevation and so on. We want to use this component to show contact information. These cards will be the rows of RecyclerView and we will see later how to integrate these two components. By now, we can define our card layout:

Adding libraries

dependencies {
    compile 'com.android.support:cardview-v7:24.0.0'

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

}

actvity_main.xml

----------------------------

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.sgp.anil.recyclerviewexample.MainActivity"
    tools:showIn="@layout/activity_main">

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

mycardview.xml

-----------------------

<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"
    android:orientation="horizontal"
    card_view:cardCornerRadius="5dp"
    card_view:cardElevation="3dp"
    card_view:cardUseCompatPadding="true">
   
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/list_avatar"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/list_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/list_desc"
            android:layout_alignParentTop="true"
            android:layout_alignStart="@+id/list_desc"
            android:text="Androidwarriors "
            android:textAppearance="?attr/textAppearanceListItem"
            android:textColor="#000000"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/list_desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/list_title"
            android:layout_marginLeft="16dp"
            android:layout_toRightOf="@+id/list_avatar"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="Place to dive into android programming"
            android:textAppearance="?attr/textAppearanceListItem"
            android:textColor="#000000"
            android:textSize="14sp" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

Employee.Java

-----------------------

 package com.sgp.anil.recyclerviewexample.Model;

/**
 * Created by Anil on 18-01-2016.
 */
public class Employee {
    public String name;
   public String addrs;

    public Employee(String name, String addrs) {
        this.name = name;
        this.addrs = addrs;
    }
}

 RecyclerAdapter .Java

----------------------------

package com.sgp.anil.recyclerviewexample.Adapter;

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 com.sgp.anil.recyclerviewexample.Model.Employee;
import com.sgp.anil.recyclerviewexample.R;

import java.util.List;

/**
 * Created by Anil on 18-01-2016.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.VH> {

    List<Employee> list;
    Context context;

    public RecyclerAdapter(List<Employee> list, Context context) {
        this.list = list;
        this.context = context;
    }


    @Override
    public RecyclerAdapter.VH onCreateViewHolder(ViewGroup parent, int viewType) {
        return new RecyclerAdapter.VH(LayoutInflater.from(parent.getContext()).inflate(R.layout.mycardview, parent, false));
    }

    @Override
    public void onBindViewHolder(RecyclerAdapter.VH holder, int position) {
        holder.name.setText(list.get(position).name);
        holder.loc.setText(list.get(position).addrs);

    }

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

    public class VH extends RecyclerView.ViewHolder {
        TextView name;
        TextView loc;

        public VH(View itemView) {
            super(itemView);
            name = (TextView) itemView.findViewById(R.id.list_title);
            loc = (TextView) itemView.findViewById(R.id.list_desc);
        }

    }
}

MainActivity.Java

------------------------

package com.sgp.anil.recyclerviewexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

import com.sgp.anil.recyclerviewexample.Adapter.RecyclerAdapter;
import com.sgp.anil.recyclerviewexample.Model.Employee;

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

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    RecyclerAdapter recyclerAdapter;
    List<Employee> list;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        recyclerView=(RecyclerView)findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        createemplist();
        recyclerAdapter=new RecyclerAdapter(list,MainActivity.this);
        recyclerView.setAdapter(recyclerAdapter);



    }
    private void createemplist(){
        list=new ArrayList<>();
        list.add(new Employee("Anil","Tadipatri"));
        list.add(new Employee("Jayachandra","Srikalahasti"));
        list.add(new Employee("Aswartha","Jammalamadugu"));
        list.add(new Employee("Ashraff","Rayachoti"));
        list.add(new Employee("Mohan","Pileru"));
        list.add(new Employee("Kishore","Rajampeta"));
        list.add(new Employee("TulasiRam","Pulivendula"));
        list.add(new Employee("Mahendra","Kadapa"));
        list.add(new Employee("Venkatesh","Kurnool"));
        list.add(new Employee("Veera","Tadipatri"));
        list.add(new Employee("Sudhakar","Ananthapur"));
        list.add(new Employee("SurendraBabu","Ananthapur"));
    }
}