RecyclerView Implementation With CardView Basic Example In Android

RecyclerView is like a ListView but with more advanced and powerful features, it helps to display a large amount of data in your app. In Android RecyclerView with CardView, we can create normal lists as well as grids and style list item easily. It provides a feature to implement the list in form of horizontal, vertical and Expandable. Layout Manager is the mainly used component of a RecyclerView, it helps in measuring and positioning item views.

In this post, we learn multiple things to create RecyclerView like how to use CardView, how to create an adapter class, about modal class etc. We learn this all things with the help of an example of a list of blog posts.

Components (we will use it for the appearance and functionality)

1) RecyclerView: We will use this component to display a large amount of data in a list, this is the basic and important component of this app.It provides a feature to implement the list in form of horizontal, vertical and Expandable.

2) CardView: This component helps in creating a good looking UI, we use it in this app to design RecyclerView item.With the help of this component, we can work on shadow, elevation, corner radius etc.

Demo

Create New Project

Before Implementing the following code first create a new project in Android Studio, go to File  => then go to New => then select New Project option. In Add an activity option select default activity(Blank Activity) and proceed.

Structure Of Code

Code

Code for build.gradle (Module: app )

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.example.asus.recyclerv"
        minSdkVersion 21
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
   
    implementation 'com.android.support:recyclerview-v7:26.1.0'
    implementation 'com.android.support:cardview-v7:26.1.0'
}

Code for MainActivity.java file.

package com.example.asus.recyclerv;

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

import com.example.asus.recyclerv.adapter.RvAdapter;
import com.example.asus.recyclerv.model.Rvdata;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RecyclerView rvTechSolPoint;

    private final Integer rank_value[] = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
            11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
            21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            31, 32, 33, 34, 35, 36, 37, 38, 39, 40};

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

        ArrayList<Rvdata> rvdata = getData();

        rvTechSolPoint = findViewById(R.id.rv_techsolpoint);
        rvTechSolPoint.setHasFixedSize(true);
        LinearLayoutManager layoutManager = new 
        LinearLayoutManager(getApplicationContext(),LinearLayoutManager.VERTICAL,false);
        rvTechSolPoint.setLayoutManager(layoutManager);

        RvAdapter rvAdapter = new RvAdapter(getApplicationContext(),rvdata);
        rvTechSolPoint.setAdapter(rvAdapter);

    }

    private ArrayList<Rvdata> getData() {

        ArrayList<Rvdata> item_ids = new ArrayList<>();
        for (int i= 0;i<rank_value.length;i++)
        {
            Rvdata rvdata = new Rvdata();
            rvdata.setId(rank_value[i]);
            item_ids.add(rvdata);
        }
        return item_ids;
    }
}

Code for activity_main.xml file.

<?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:background="#eee"
tools:context="com.example.asus.recyclerv.MainActivity">

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

</LinearLayout> 

Code for RvAdapter.java file.

package com.example.asus.recyclerv.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.asus.recyclerv.R;
import com.example.asus.recyclerv.model.Rvdata;

import java.util.ArrayList;

/**
 * Created by  techsolpoint.com on 3/18/2018.
 */

public class RvAdapter extends RecyclerView.Adapter<RvAdapter.RvViewHolder>{

    Context context;
    ArrayList<Rvdata> rvdata;

    public RvAdapter(Context context,ArrayList<Rvdata> rvdata){
        this.context = context;
        this.rvdata = rvdata;
    }

    View view;
    @Override
    public RvAdapter.RvViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        view = inflater.from(parent.getContext()).inflate(R.layout.rv_item,parent,false);
        RvViewHolder rvViewHolder = new RvViewHolder(view);
        return rvViewHolder;
    }

    @Override
    public void onBindViewHolder(RvAdapter.RvViewHolder holder, int position) {
    }

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

    public class RvViewHolder extends RecyclerView.ViewHolder {
        public RvViewHolder(View itemView) {
            super(itemView);
        }
    }
}

Code for rv_item.xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="5dp"
android:layout_height="190dp">

<android.support.v7.widget.CardView
app:cardCornerRadius="10dp"
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:background="#000000"
android:layout_height="100dp">
<ImageView
android:alpha="0.5"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/seo1"/>
<TextView
android:id="@+id/article_name"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:text="My First Article on RecyclerView"
android:textColor="#ffffff"
android:textSize="18sp"
android:textStyle="bold"
android:gravity="center"/>
<TextView
android:background="@drawable/bg_button"
android:layout_centerInParent="true"
android:layout_below="@+id/article_name"
android:layout_width="100dp"
android:layout_height="30dp"
android:text="Read"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="#1ff8e9"
android:gravity="center"/>
</RelativeLayout>
<TextView
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#000"
android:textSize="15sp"
android:text="This is My Blog This is My Blog This is My Blog This is My Blog This is My Blog This is My Blog This is My Blog..."/>

</LinearLayout>

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

</LinearLayout>

Code for Rvdata.java file.

package com.example.asus.recyclerv.model;

/**
 * Created by techsolpoint.com on 3/18/2018.
 */

public class Rvdata {
    public int id;

    public int getId() {
        return id;
    }

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


Article for you to read next:

• Fetch JSON data using Volley library and display it in RecyclerView — Android Studio

Screenshot: