Android Working with Recyclerview and Cardview

Post Views: 5,777

Android Working with Recyclerview and Cardview.Hello guys, i am back with another tutorial on Recyclerview. RecyclerView and CardView got introduced in android Lollipop. Basically The RecyclerView widget is a more advanced and flexible version of ListView. When we need to display a scrolling list of elements based on large data sets we use Recyclerview. As the name suggests, anrdoid RecyclerView is used to reuse cells when scrolling up and down by recycling the items in the list.

Android CardView UI component shows information inside cards. This component is generally used to show contact information. In this tutorial we will show some information inside the CardView using RecyclerView.

So lets start..

Android Working with Recyclerview and Cardview

Lets start by creating a new project i am giving it name RecyclerViewTest.

Creating Android Project

Create a new project in Android Studio File–>New–>New Project.
Enter Application Name, Package Name, Select Empty Activity and click on finish.

Adding RecyclerView and CardView

Now we will add RecyclerView and CardView to our project by adding their Dependencies on our project.
Add Dependencies on gradle.

implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'

1 2	implementation 'com.android.support:recyclerview-v7:26.1.0' implementation 'com.android.support:cardview-v7:26.1.0'

Now sync your project.

Creating RecyclerView Layouts

RecyclerView

Create a RecyclerView inside your activity_main.xml.
Give it a id myRecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.androidcodefinder.recyclerviewtest.MainActivity">

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

</RelativeLayout

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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"

tools:context="com.androidcodefinder.recyclerviewtest.MainActivity">

<android.support.v7.widget.RecyclerView

android:id="@+id/myRecyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent">

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

</RelativeLayout

RecyclerView Item Layout using CardView

We need to create separate layout for for items for RecyclerView.
For that we will use CardView.
So we can create a desired design inside CardView.
CardView is not mandatory. CardView gives a nice elevated look that’s why we are using it in our project.
In our project we are simply displaying one Heading and one Description using TextView.
Create a new layout resource file named list_item.xml and use the following xml code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textViewHead"
                android:text="Heading"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textViewDes"
                android:text="Description"/>


        </LinearLayout>

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

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="wrap_content">

<android.support.v7.widget.CardView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="5dp">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:padding="10dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textViewHead"

android:text="Heading"

android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textViewDes"

android:text="Description"/>

</LinearLayout>

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

</LinearLayout>

Creating Model Class

Here we don’t have a single item for our list, and that is why it can’t be stored in a String array. We need a class to store all the attributes that we have for item in our list.
In our project we have Heading and Description as list item.
So to store these attributes we need to create a class let’s name it ListItem.java.
Write the following code.

package com.androidcodefinder.recyclerviewtest;

/**
 * Created by Sumeet Jain on 18-10-2018.
 */

public class ListItem {

    private String head;
    private String desc;

    public ListItem(String head, String desc) {
        this.head = head;
        this.desc = desc;
    }

    public String getHead() {
        return head;
    }

    public String getDesc() {
        return desc;
    }
}

package com.androidcodefinder.recyclerviewtest;

/**

* Created by Sumeet Jain on 18-10-2018.

public class ListItem {

private String head;

private String desc;

public ListItem(String head, String desc) {

this.head = head;

this.desc = desc;

}

public String getHead() {

return head;

}

public String getDesc() {

return desc;

}

Creating RecyclerView Adapter

To manage and display the data of our RecyclerView we need a class that will extend RecyclerView.Adapter. Inside this class we need RecyclerView.ViewHolder. Now what are these two?
RecyclerView.ViewHolder represents the views of our RecyclerView and the RecyclerView.Adapter represents the data that is to be shown with the ViewHoder.
We have 3 methods inside RecyclerView.Adapter that we need to override.
1. RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
  - This method returns a new instance of our ViewHolder.
2. void onBindViewHolder(ProductViewHolder holder, int position)
  - This method binds the data to the view holder.
3. int getItemCount()
  - This returns the size of the List.
So lets create our Adapter. For this create a new class named MyAdapter.java and write the following code.

package com.androidcodefinder.recyclerviewtest;


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.TextView;
import android.widget.Toast;

import java.util.List;

/**
 * Created by Sumeet Jain on 19-10-2018.
 */

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    //we are storing all the products in a list
    private List<ListItem> listItemList;

    //this context we will use to inflate the layout
    private Context context;


    //getting the context and product list with constructor
    public MyAdapter(List<ListItem> listItemList, Context context) {
        this.listItemList = listItemList;
        this.context = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //inflating and returning our view holder
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item,parent,false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, final int position) {

        //getting the item of the specified position
        final ListItem listItem = listItemList.get(position);

        holder.textViewHead.setText(listItem.getHead());
        holder.textViewDesc.setText(listItem.getDesc());

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context,listItem.getHead(),Toast.LENGTH_SHORT).show();
            }
        });

    }

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

    public class ViewHolder extends RecyclerView.ViewHolder{

        public TextView textViewHead,textViewDesc;

        public ViewHolder(View itemView) {
            super(itemView);

            textViewHead = (TextView)itemView.findViewById(R.id.textViewHead);
            textViewDesc = (TextView)itemView.findViewById(R.id.textViewDes);
        }
    }
}

package com.androidcodefinder.recyclerviewtest;

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

import android.widget.Toast;

import java.util.List;

/**

* Created by Sumeet Jain on 19-10-2018.

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

//we are storing all the products in a list

private List<ListItem> listItemList;

//this context we will use to inflate the layout

private Context context;

//getting the context and product list with constructor

public MyAdapter(List<ListItem> listItemList, Context context) {

this.listItemList = listItemList;

this.context = context;

}

@Override

public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

//inflating and returning our view holder

View v = LayoutInflater.from(parent.getContext())

.inflate(R.layout.list_item,parent,false);

return new ViewHolder(v);

}

@Override

public void onBindViewHolder(final ViewHolder holder, final int position) {

//getting the item of the specified position

final ListItem listItem = listItemList.get(position);

holder.textViewHead.setText(listItem.getHead());

holder.textViewDesc.setText(listItem.getDesc());

holder.itemView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(context,listItem.getHead(),Toast.LENGTH_SHORT).show();

}

});

}

@Override

public int getItemCount() {

return listItemList.size();

}

public class ViewHolder extends RecyclerView.ViewHolder{

public TextView textViewHead,textViewDesc;

public ViewHolder(View itemView) {

super(itemView);

textViewHead = (TextView)itemView.findViewById(R.id.textViewHead);

textViewDesc = (TextView)itemView.findViewById(R.id.textViewDes);

}

Setting Adapter to RecyclerView

The last step to show RecyclerView. Come inside MainActivity and write the following code.

package com.androidcodefinder.recyclerviewtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.List;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    //a list to store all the products
    private List<ListItem> listItemList;

    //the recyclerview
    private RecyclerView recyclerView;

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

        //getting the recyclerview from xml
        recyclerView = (RecyclerView) findViewById(R.id.myRecyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        //initializing the productlist
        listItemList = new ArrayList<>();

        listItemList.add(
                new ListItem(
                        "McDonalds","I’m Lovin’ It"
                ));
        listItemList.add(
                new ListItem("Kit Kat","Have a Break, Have a Kit Kat")
        );
        listItemList.add(
                new ListItem("Subway","Eat Fresh")
        );
        listItemList.add(
                new ListItem("KFC","Finger Lickin’ Good")
        );
        listItemList.add(
                new ListItem("Dr Pepper","What’s the Worst That Could Happen?")
        );
        listItemList.add(
                new ListItem("Carlsberg","Probably the Best Beer in the World")
        );
        listItemList.add(
                new ListItem("Maybelline","Maybe She’s Born With It, Maybe It’s Maybelline")
        );
        listItemList.add(
                new ListItem("Ronseal","It Does Exactly What it Says on the Tin")
        );
        listItemList.add(
                new ListItem("Energizer","It Keeps Going, and Going, and Going...")
        );


        //creating recyclerview adapter
        MyAdapter adapter = new MyAdapter(listItemList, this);

        //setting adapter to recyclerview
        recyclerView.setAdapter(adapter);

    }
}

package com.androidcodefinder.recyclerviewtest;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import java.util.List;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

//a list to store all the products

private List<ListItem> listItemList;

//the recyclerview

private RecyclerView recyclerView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//getting the recyclerview from xml

recyclerView = (RecyclerView) findViewById(R.id.myRecyclerView);

recyclerView.setHasFixedSize(true);

recyclerView.setLayoutManager(new LinearLayoutManager(this));

//initializing the productlist

listItemList = new ArrayList<>();

listItemList.add(

new ListItem(

"McDonalds","I’m Lovin’ It"

));

listItemList.add(

new ListItem("Kit Kat","Have a Break, Have a Kit Kat")

);

listItemList.add(

new ListItem("Subway","Eat Fresh")

);

listItemList.add(

new ListItem("KFC","Finger Lickin’ Good")

);

listItemList.add(

new ListItem("Dr Pepper","What’s the Worst That Could Happen?")

);

listItemList.add(

new ListItem("Carlsberg","Probably the Best Beer in the World")

);

listItemList.add(

new ListItem("Maybelline","Maybe She’s Born With It, Maybe It’s Maybelline")

);

listItemList.add(

new ListItem("Ronseal","It Does Exactly What it Says on the Tin")

);

listItemList.add(

new ListItem("Energizer","It Keeps Going, and Going, and Going...")

);

//creating recyclerview adapter

MyAdapter adapter = new MyAdapter(listItemList, this);

//setting adapter to recyclerview

recyclerView.setAdapter(adapter);

}

You can see we have our RecyclerView. The items are looking nice in the Cards.
I have tried to my best to explain if you have any doubts feel free to comment below or mail me at csesumeet@gmail.com

Android Working with Recyclerview and Cardview

Download Complete Project

Recyclerview and Cardview

Subscribe To Our YouTube Channel

Like Us On Facebook

Android Code Finder

Other Tutorials-

Android Working with Recyclerview and Cardview

Android Working with Recyclerview and Cardview

Creating Android Project

Adding RecyclerView and CardView

Creating RecyclerView Layouts

RecyclerView

RecyclerView Item Layout using CardView

Creating Model Class

Creating RecyclerView Adapter

Setting Adapter to RecyclerView

Android Working with Recyclerview and Cardview

Download Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Other Tutorials-

RECENT POST

Leave a Reply Cancel reply