Create a custom List with RecyclerView using CardView

RecyclerView is a UI (user interface) component of the Android app. With it, you can show a list of items in Horizontal, Vertical, grid, and segregated manner. For example, If you have to show a list of data sets then you can use RecyclerView. The RecyclerView widget is a more advanced and flexible version of ListView. In this example, we are going to use simple RecyclerView with a custom layout (Vertical scroll).

Let’s Build a Simple app for List with RecyclerView

This example, we will show the simple item in the list. This item has generated in dynamically using a loop.

Step 1. Create new project follow this tutorial

Step 2. Add design library in build.gradle (Module app)

implementation 'com.android.support:design:28.0.0-alpha1'

it’s for RecyclerView API and its updating from time to time please check with google doc or add from “open modules settings“

Step 3. Add RecyclerView in activity_main.xml file

The Recycler view

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:background="@color/colorGrey"
    app:cardUseCompatPadding="true"
    tools:context="in.eyehunt.recyclerviewExample.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="467dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scrollbars="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Note : “@color/colorGrey” is added in res/values/color.xml resources, in <resource> tag

<color name="colorGrey">#e7e7e7</color>

Step 4. create new XML file row_user.xml (for items in the list) and add following code.

Add TextView in CardView (you can add more widget in a row)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="33dp"
    android:layout_marginBottom="1dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp" />

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

Step 5.  Create model class Users.java

Add variables int id and String login and generate Getter and setter.

package in.eyehunt.recyclerviewExample;

public class Users {
    private int id;
    private String login;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getLogin() {
        return login;
    }

    public void setLogin(String login) {
        this.login = login;
    }
}

Step 6. Create adapter class Myadapter.class

The adapter class is a bridge between a data and view.

package in.eyehunt.recyclerviewExample;

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

public class Myadapter extends RecyclerView.Adapter<Myadapter.MyViewHolder> {

    private List<Users> mDataList;

    public Myadapter(List<Users> listOfusers) {
        mDataList = listOfusers;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_user, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.tv_login.setText(mDataList.get(position).getLogin());
    }

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

    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tv_login;
        public MyViewHolder(View itemView) {
            super(itemView);
            tv_login = (TextView)itemView.findViewById(R.id.tv_login);
        }
    }
}

Step 7. final add following code in MainActivity

It’s an Activity class where all thing is done like creating data and pass data to UI using adapters.

package in.eyehunt.recyclerviewExample;

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

import com.android.volley.RequestQueue;

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

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    RequestQueue queue;
    List<Users> listOfusers;

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

        listOfusers = new ArrayList<Users>();

        //adding items in list
        for (int i =0 ; i < 5 ; i++){
            Users user = new Users();
            user.setId(i);
            user.setLogin("Eyehunt " + i);
            listOfusers.add(user);
        }

        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        mRecyclerView.setHasFixedSize(true);

        mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        mRecyclerView.setLayoutManager(mLayoutManager);

        mAdapter = new Myadapter(listOfusers);
        mRecyclerView.setAdapter(mAdapter);

    }
}

Step 8. Now Run the application, in an emulator or On your Android device

Output: custom List with RecyclerView using CardView

Download source code android RecyclerView and source code

https://github.com/EyeHunts/Recyclerviewexample

Note: This example (Project) is developed in Android Studio 3.0.1, tested on Android 7.1.1 ( Android Nougat), build-tools version API 27+: Android API 27, P preview (Preview)

MinSdkVersion=”15″

TargetSdkVersion=”26″

Coding in JAVA