RecyclerView is the most advanced version of ListView and also it overcomes many disadvantages of ListView. Another greater advantage is that it provides default animations for addition and removal of items.

CardView widget can be used to create simple cards. It also provides rounded edges and elevation. In this tutorial we are going to create a Android app with basic RecyclerView and CardView widgets.

Here i have created a Android Studio project with package com.learn2crack.recyclerview also Activity as MainActivity and layout as activity_main.

You can download the complete project as zip or fork from our Github repository.

We need to add the RecyclerView and CardView support libraries before proceeding. Open your app’s build.gradle file and add the following dependencies.

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

Then sync the project. The dependencies will be downloaded.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.learn2crack.recyclerview"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:recyclerview-v7:23.1.1'
    compile 'com.android.support:cardview-v7:23.1.1'
}

Our main layout has only one RecyclerView widget.

<LinearLayout 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"
    tools:context="com.learn2crack.recyclerview.MainActivity">

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

</LinearLayout>

The next layout is for RecyclerView list item. It has a CardView ViewGroup with child as TextView to display country name. The corner radius can be set by cardCornerRadius property.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    card_view:cardCornerRadius="5dp">

        <TextView
            android:id="@+id/tv_country"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_gravity="center"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold" />

</android.support.v7.widget.CardView>

Before implementing RecyclerView in Activity we need to create a adapter for RecyclerView to set data to individual list items. DataAdapter is the RecyclerView adapter class. We also create a inner ViewHolder class which extends to RecyclerView.ViewHolder class. Here we initailize the layout TextView.

Our parent DataAdapter class extend to RecyclerView.Adapter class. Our constructor has ArrayList<String> as argument by which we pass and set data. In the onCreateViewHolder() method we inflate the row layout as a View and return as ViewHolder object. In onBindViewHolder() method we set the TextView text from ArrayList object. The getItemCount() method returns the size of the data.

package com.learn2crack.recyclerview;

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.ArrayList;

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {
    private ArrayList<String> countries;

    public DataAdapter(ArrayList<String> countries) {
        this.countries = countries;
    }

    @Override
    public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_row, viewGroup, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(DataAdapter.ViewHolder viewHolder, int i) {

        viewHolder.tv_country.setText(countries.get(i));
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder{
        private TextView tv_country;
        public ViewHolder(View view) {
            super(view);

            tv_country = (TextView)view.findViewById(R.id.tv_country);
        }
    }

}

There are three predefined layout managers for RecyclerView. They are

1. LinearLayoutManager
2. GridLayoutManager
3. StaggeredGridLayoutManager

For our example we are going to use the LinearLayoutManager for our RecyclerView. LinearLayoutManager shows items in horizantal or vertical scrolling list.

We create a new ArrayList and add data to list. The adapter is initialized using new DataAdapter(countries), where countries is the ArrayList object. The adapter is set using setAdapter() method.

To handle clicks in RecyclerView list item we attach RecyclerView.OnItemTouchListener() interface. The click can be handled in the onInterceptTouchEvent() method. We use GestureDetector to detect whether it is a single tap. The click position can be obtained by calling getChildAdapterPosition() method on the RecyclerView object by passing the child View object. The child view can be obtained by findChildViewUnder() method. Here I am displaying a Toast message.

package com.learn2crack.recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ArrayList countries;

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

    private void initViews(){
        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
        recyclerView.setHasFixedSize(true);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        recyclerView.setLayoutManager(layoutManager);
        countries = new ArrayList<>();
        countries.add("Australia");
        countries.add("India");
        countries.add("United States of America");
        countries.add("Germany");
        countries.add("Russia");
        RecyclerView.Adapter adapter = new DataAdapter(countries);
        recyclerView.setAdapter(adapter);

        recyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
            GestureDetector gestureDetector = new GestureDetector(getApplicationContext(), new GestureDetector.SimpleOnGestureListener() {

                @Override public boolean onSingleTapUp(MotionEvent e) {
                    return true;
                }

            });
            @Override
            public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {

                View child = rv.findChildViewUnder(e.getX(), e.getY());
                if(child != null && gestureDetector.onTouchEvent(e)) {
                    int position = rv.getChildAdapterPosition(child);
                    Toast.makeText(getApplicationContext(), countries.get(position), Toast.LENGTH_SHORT).show();
                }

                return false;
            }

            @Override
            public void onTouchEvent(RecyclerView rv, MotionEvent e) {

            }

            @Override
            public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

            }
        });
    }
}

Enjoy Coding 🙂