RecyclerView Implementation With CardView Basic Example In Android

RecyclerView

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&lt;RvAdapter.RvViewHolder&gt;{

    Context context;
    ArrayList&lt;Rvdata&gt; rvdata;

    public RvAdapter(Context context,ArrayList&lt;Rvdata&gt; 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:


 

Screenshot:

RecyclerView and CardView

 

 

RecyclerView Implementation With CardView Basic Example In Android
Tagged on:

5 thoughts on “RecyclerView Implementation With CardView Basic Example In Android

  • April 2, 2018 at 12:40 am
    Permalink

    I am new in android. Like you see some more post related to this.

    Reply
    • April 3, 2018 at 11:47 pm
      Permalink

      thanks this code works 🙂

      Reply
  • April 2, 2018 at 1:04 pm
    Permalink

    Can you make it more descriptive like why we use certain commands. Why you create certain variable and all.

    Reply
  • April 2, 2018 at 5:56 pm
    Permalink

    With havin so much written content do you ever run into any
    issues of plagorism or copyright infringement? My site has a lot of unique content I’ve either authored myself or
    outsourced but it seems a lot of it is popping it up all over the web without my
    agreement. Do you know any solutions to help prevent content from being ripped off?
    I’d really appreciate it.

    Reply
  • April 18, 2018 at 10:46 pm
    Permalink

    Thanks so much pertaining to giving us an update on this matter on your website. Please realize that if a brand new post becomes available or if perhaps any modifications occur about the current posting, I would want to consider reading more and finding out how to make good usage of those approaches you share. Thanks for your efforts and consideration of other individuals by making this blog available.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *