CardView with RecyclerView in Android Example

To use CardView and RecyclerView in Android you need to add following dependencies:

dependencies {
    compile 'com.android.support:recyclerview-v7:23.0.1'
    compile 'com.android.support:cardview-v7:23.0.1'
}

In this example we need to create:

    Activity

         AllUsers.java: contains java file and xml layout file
            AllUsersActivity.java
            activity_all_users.xml

    Adapter

        AllUsersAdapter.java
        Create a constructor to receive List of Users passed by the Activity Class
       
        Create a class UserViewHolder.java that will extends RecyclerView.ViewHolder
       
        Implement RecyclerView.Adapter and override three methods:
            onCreateViewHolder(…)
            onBindViewHolder (…)
            getItemCount(…)

CardView in Android

    Layout

        single_cardview_layout.xml
        for single User CardView inside RecyclerView

 

Source Code:

activity_all_users.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"
    tools:context=".AllUsers">

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

</RelativeLayout>

single_cardview_layout.xml

<?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"
    android:padding="16dp">

    <android.support.v7.widget.CardView
        android:id="@+id/cvSingleUser"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp">

            <ImageView
                android:id="@+id/ivProfilePic"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginRight="16dp" />

            <TextView
                android:id="@+id/tvProfileName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp"
                android:layout_toRightOf="@id/ivProfilePic" />

            <TextView
                android:id="@+id/tvPhoneNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tvProfileName"
                android:layout_toRightOf="@id/ivProfilePic" />

            <TextView
                android:id="@+id/tvEmailId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tvPhoneNumber"
                android:layout_toRightOf="@id/ivProfilePic"/>

        </RelativeLayout>

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

</RelativeLayout>

AllUsersAdapter.java

package com.sonevalley.sushil.cardview;

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 AllUsersAdapter extends RecyclerView.Adapter<AllUsersAdapter.UserViewHolder>{

    private List<AllUsers.User> userList;
    private Context context;
    public AllUsersAdapter(List<AllUsers.User> userList, Context context) {
        this.userList = userList;
        this.context = context;
    }

    @Override
    public UserViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.single_cardview_layout, null);
        UserViewHolder userViewHolder = new UserViewHolder(view);
        return userViewHolder;
    }

    @Override
    public void onBindViewHolder(UserViewHolder holder, int position) {
        AllUsers.User user = userList.get(position);

        holder.ivProfilePic.setImageResource(user.getImageResourceId());
        holder.tvProfileName.setText(user.getProfileName());
        holder.tvPhoneNumber.setText(user.getPhoneNumber());
        holder.tvEmailId.setText(user.getEmailId());
    }

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

    public static class UserViewHolder extends RecyclerView.ViewHolder {

        ImageView ivProfilePic;
        TextView tvProfileName;
        TextView tvPhoneNumber;
        TextView tvEmailId;
        public UserViewHolder(View itemView) {
            super(itemView);
            ivProfilePic = (ImageView) itemView.findViewById(R.id.ivProfilePic);
            tvProfileName = (TextView) itemView.findViewById(R.id.tvProfileName);
            tvPhoneNumber = (TextView) itemView.findViewById(R.id.tvPhoneNumber);
            tvEmailId = (TextView) itemView.findViewById(R.id.tvEmailId);
        }
    }
}

AllUsers.java

package com.sonevalley.sushil.cardview;

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.Menu;
import android.view.MenuItem;

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

public class AllUsers extends AppCompatActivity {

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

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvAllUsers);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        AllUsersAdapter allUsersAdapter = new AllUsersAdapter(getUserInformation(), this);
        recyclerView.setAdapter(allUsersAdapter);
    }

    private List<User> getUserInformation() {

        List<User> userList = new ArrayList<>();
        userList.add(new User(R.mipmap.ic_launcher,
                "Amit", "9988776655",
                "amit@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "John", "9988776655",
                "john@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "rakesh", "9988776655",
                "rakesh@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "akash", "9988776655",
                "akash@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "Tanu", "9988776655",
                "tanu@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "Manu", "9988776655",
                "manu@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "Prakash", "9988776655",
                "prak@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "Jyoti", "9988776655",
                "jyoti@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "Puja", "9988776655",
                "puja@sonevalley.com"));
        userList.add(new User(R.mipmap.ic_launcher,
                "Aarti", "9988776655",
                "aarti@sonevalley.com"));

        return userList;
    }

    public class User {
        private int imageResourceId;
        private String profileName;
        private String phoneNumber;
        private String emailId;

        public int getImageResourceId() {
            return imageResourceId;
        }
        public String getProfileName() {
            return profileName;
        }
        public String getPhoneNumber() {
            return phoneNumber;
        }
        public String getEmailId() {
            return emailId;
        }

        public User(int imageResourceId, String profileName, String phoneNumber, String emailId) {
            this.imageResourceId = imageResourceId;
            this.profileName = profileName;
            this.phoneNumber = phoneNumber;
            this.emailId = emailId;
        }
    }
}

Screen Preview

CardView with RecyclerView in Android

SHARE