Android Articles » Simple RecyclerView and RecyclerView Using CardView

Introduction

RecyclerView is the advanced technique in displaying a list or tabular data. It is much flexible and efficient as compared to the conventional ListView. In order to use RecyclerView, we have to declare the adapter and a layout manager.

Adapter - The Adapter provides the binding between the data set and the views, which is to be displayed in the RecyclerView.
Layout Manager – Layout Manager is responsible for the positioning of the items in the RecyclerView, which is presently displayed and helps in determining when to reuse the items, which is not presently displayed.

We can use RecyclerView with any kind of data, say Array, ArrayList, JSON, XML etc.

Here, in our sample, we are going to see, how we could use it using ArrayList.

First let us see how we could populate a Simple RecyclerView using ArrayList.

Then we will see how to enhance the RecyclerView using CardView.

1. Simple RecyclerView

This is a simple RecyclerView using ArrayList.

Here is a live demo of the expected output(demo-1).

When we start a new project, the MainActivity java class and activity_main.xml will be created by default.

In the activity_main.xml, we will place a RecyclerView widget as this is our main Layout.

					  
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin">
   
       <android.support.v7.widget.RecyclerView
           android:id="@+id/recycler_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:paddingBottom="70dp"
           android:scrollbars="vertical" />
   
       <RelativeLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true">
   
           <Button
               android:id="@+id/btn_card"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_centerHorizontal="true"
               android:layout_marginTop="10dp"
               android:background="#3b94e1"
               android:padding="5dp"
               android:text="RecyclerView with CardView" />
       </RelativeLayout>
   
   </RelativeLayout>

Add the (following) dependency for the RecyclerView in the build.gradle(Module:app)

compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'

Now, create a new layout resource file(Right click res folder > layout > layout resource file) and give the name as items_recycler. This Layout contains the widgets to be viewed inside the RecyclerView.

					  
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="#90d1ff"
       android:clickable="true"
       android:orientation="vertical"
       android:paddingLeft="8dp"
       android:paddingRight="8dp"
       android:paddingTop="5dp">
   
       <RelativeLayout
           android:id="@+id/layout1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
   
           <TextView
               android:id="@+id/txt_people"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_alignParentTop="true"
               android:layout_toLeftOf="@+id/txt_dob"
               android:text="Famous People"
               android:textColor="#000"
               android:textSize="25dp"
               android:textStyle="bold" />
   
   
           <TextView
               android:id="@+id/txt_dob"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentRight="true"
               android:text="DOB"
               android:textColor="#111" />
       </RelativeLayout>
   
       <View
           android:layout_width="match_parent"
           android:layout_height="0.5dp"
           android:layout_below="@id/layout1"
           android:background="#000000" />
   </LinearLayout>

Next, we will be creating a model class. Inside this class, we will declare two strings to store the name and the date of birth. Name this class as People :

					  
   public class People {
       String name, year;
   
       public People() {
       }
   
       public People(String name, String year) {
           this.name = name;
           this.year = year;
       }
   
       public String getName() {
           return name;
       }
   
       public void setName(String name) {
           this.name = name;
       }
   
       public String getYear() {
           return year;
       }
   
       public void setYear(String year) {
           this.year = year;
       }
   }

Next, to add the data inside the RecyclerView we will need an adapter class. For this , we will create another java class.(Right click java > "your_package_name" > new > java class). Name this class as RecyclerAdapter :

					  
   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 RecyclerAdapter extends RecyclerView.Adapter {
   
       //List
       private List peopleList;
   
       public class MyViewHolder extends RecyclerView.ViewHolder {
           TextView name, birthday;
   
           public MyViewHolder(View view) {
               super(view);
               //initialize textviews
               name = (TextView) view.findViewById(R.id.txt_people);
               birthday = (TextView) view.findViewById(R.id.txt_dob);
           }
       }
   
       //constructor
       public RecyclerAdapter(List nameList) {
           this.peopleList = nameList;
       }
   
       @Override
       public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           //layout inflator-set view of each item of recyclerview
           View itemView = LayoutInflater.from(parent.getContext())
                   .inflate(R.layout.items_recycler, parent, false);
           return new MyViewHolder(itemView);
       }
   
       @Override
       public void onBindViewHolder(MyViewHolder holder, int position) {
           //get item at position
           People people = peopleList.get(position);
           //setText from item to textview
           holder.name.setText(people.getName());
           holder.birthday.setText(people.getYear());
       }
   
       @Override
       public int getItemCount() {
           return peopleList.size();
       }
   }

Now, we will go to the MainActivity class. Inside the onCreate() of this class, we will declare the RecyclerView and a function prepareAndroidData() to store the details to be added into the RecyclerView items. Let's look at the code:

					  
   import android.content.Intent;
   import android.support.v7.app.AppCompatActivity;
   import android.os.Bundle;
   import android.support.v7.widget.DefaultItemAnimator;
   import android.support.v7.widget.LinearLayoutManager;
   import android.support.v7.widget.RecyclerView;
   import android.view.View;
   import android.widget.Button;
   
   import java.util.ArrayList;
   import java.util.List;
   
   public class MainActivity extends AppCompatActivity {
       private List cList = new ArrayList<>();
       private RecyclerView recyclerView;
       private RecyclerAdapter vAdapter;
       Button button;
   
       @Override
       protected void onCreate(final Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           //initialize button and recyclerview
           button = (Button) findViewById(R.id.btn_card);
           recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
           //initialize Adapterclass with List
           vAdapter = new RecyclerAdapter(cList);
           //set layout Manager of recyclerview
           RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
           recyclerView.setLayoutManager(mLayoutManager);
           recyclerView.setItemAnimator(new DefaultItemAnimator());
           recyclerView.setAdapter(vAdapter);//add adapter to recyclerview
           preparePeopleData();//call function to add data to recyclerview
   
           button.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                   Intent i = new Intent(getApplicationContext(), SecondMain.class);
                   startActivity(i);
               }
           });
       }
   
       //function to add data to List
       private void preparePeopleData() {
           People name = new People("Abraham Lincoln", "1809");
           cList.add(name);
           name = new People("John F. Kennedy", "1917");
           cList.add(name);
           name = new People("Bill Gates ", "1955");
           cList.add(name);
           name = new People("Muhammad Ali ", "1942");
           cList.add(name);
           name = new People("Christopher Columbus ", "1451");
           cList.add(name);
           name = new People("George Orwell", "1903");
           cList.add(name);
           name = new People("Charles Darwin ", "1809");
           cList.add(name);
           name = new People("Elvis Presley", "1935");
           cList.add(name);
           name = new People("Albert Einstein", "1879");
           cList.add(name);
           name = new People("Queen Victoria", "1819");
           cList.add(name);
           name = new People("Jawaharlal Nehru", "1889");
           cList.add(name);
           name = new People("Leonardo da Vinci", "1452");
           cList.add(name);
           name = new People("Pablo Picasso", "1881");
           cList.add(name);
           name = new People("Vincent Van Gogh", "1853");
           cList.add(name);
           name = new People("Thomas Edison", "1847");
           cList.add(name);
           name = new People("Henry Ford", "1863");
           cList.add(name);
           name = new People("Michael Jordan", "1963");
           cList.add(name);
           name = new People("Oscar Wilde", "1854");
           cList.add(name);
           name = new People("Adolf Hitler", "1889");
           cList.add(name);
           name = new People("Madonna", "1958");
           cList.add(name);
           name = new People("Steve Jobs", "1955");
           cList.add(name);
           name = new People("Roger Federer", "1981");
           cList.add(name);
           name = new People("Carl Lewis", "1961");
           cList.add(name);
   
           //notify datasetChanged to show the added items to the list in recyclerview
           vAdapter.notifyDataSetChanged();
       }
   }

With this the setup is complete. Now try running the app & you should get the output, as seen in the live demo-1.

2. RecyclerView with CardView

Now, we will see how to implement the CardView into the RecyclerView.

Here is a live demo of the expected output.(demo-2)

In the same project we are working in, create another Layout named item_recycler_cardview. In this layout, place a CardView widget and textView inside this CardView:

					  
   <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:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">
   
   
       <android.support.v7.widget.CardView
           android:id="@+id/card_view"
           android:layout_width="match_parent"
           android:layout_height="70dp"
           android:layout_centerHorizontal="true"
           android:layout_margin="3dp"
           android:clickable="true"
           android:padding="4dp"
           app:cardBackgroundColor="#90d1ff">
   
           <RelativeLayout
               android:id="@+id/layout1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:padding="4.5dp">
   
               <TextView
                   android:id="@+id/txt_people"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:layout_alignParentTop="true"
                   android:layout_toLeftOf="@+id/txt_dob"
                   android:text="Famous People"
                   android:textColor="#000"
                   android:textSize="25dp"
                   android:textStyle="bold" />
   
               <TextView
                   android:id="@+id/txt_dob"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_alignParentRight="true"
                   android:layout_marginTop="15dp"
                   android:text="DOB"
                   android:textColor="#111" />
           </RelativeLayout>
       </android.support.v7.widget.CardView>
   </LinearLayout>

Add the dependency for the CardView in the build.gradle(Module:app)

compile 'com.android.support:cardview-v7:26.0.0-alpha1'

Now, create a new activity SecondMain with corresponding layout second_main.xml. In this layout, place a RecyclerView widget :

					  
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin">
   
       <android.support.v7.widget.RecyclerView
           android:id="@+id/recycler_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:scrollbars="vertical" />
   
   </RelativeLayout>

Then go to the MainActivity class used earlier in the project and declare the button. Inside the onClickListener() of this button use Intent to navigate to the next activity SecondMain java class:

					  
   Button button = (Button) findViewById(R.id.btn_card);
   button.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           Intent i = new Intent(getApplicationContext(), SecondMain.class);
           startActivity(i);
       }
   });

Now, we can use the same model class used earlier in this project because there is no extra data to be shown. The only difference is we are using the CardView inside the RecyclerView. So the same Model class may be used.

Now we need an AdapterClass to store data inside the RecyclerView. Name this adapter class as CardViewAdapter:

 
					  
   import android.support.v7.widget.CardView;
   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 CardViewAdapter extends RecyclerView.Adapter {
   
       //List
       private List nameList;
   
       public class MyViewHolder extends RecyclerView.ViewHolder {
           TextView name, year;
   
           public MyViewHolder(View view) {
               super(view);
               //initialize cardview
               CardView cardView = view.findViewById(R.id.card_view);
               cardView.setCardElevation(20);//setcardview elevation
               cardView.setRadius(15);       //set radius of cardview
               //initialize textviews
               name = (TextView) view.findViewById(R.id.txt_people);
               year = (TextView) view.findViewById(R.id.txt_dob);
           }
       }
   
       //constructor
       public CardViewAdapter(List nameList) {
           this.nameList = nameList;
       }
   
       @Override
       public CardViewAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           //layout inflator-set view of each item of recyclerview
           View itemView = LayoutInflater.from(parent.getContext())
                   .inflate(R.layout.item_recycler_cardview, parent, false);
           return new CardViewAdapter.MyViewHolder(itemView);
       }
   
       @Override
       public void onBindViewHolder(CardViewAdapter.MyViewHolder holder, int position) {
           //get item at position
           People people = nameList.get(position);
           //setText from item to textview
           holder.name.setText(people.getName());
           holder.year.setText(people.getYear());
       }
   
       @Override
       public int getItemCount() {
           return nameList.size();
       }
   }

Now, open the SecondMain java class. This class is the same as the MainActivity but the only difference is the Adapter used will be the CardViewAdapter instead of RecyclerAdapter.

					  
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.support.v7.widget.DefaultItemAnimator;
   import android.support.v7.widget.LinearLayoutManager;
   import android.support.v7.widget.RecyclerView;
   
   import java.util.ArrayList;
   import java.util.List;
   
   public class SecondMain extends AppCompatActivity {
       private List cList = new ArrayList<>();
       private RecyclerView recyclerView;
       private CardViewAdapter cAdapter;
   
       @Override
       protected void onCreate(final Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.second_main);
   
           //initialize recyclerview
           recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
   
           //initialize Adapterclass with List
           cAdapter = new CardViewAdapter(cList);
           //set layout Manager of recyclerview
           RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
           recyclerView.setLayoutManager(mLayoutManager);
           recyclerView.setItemAnimator(new DefaultItemAnimator());
           recyclerView.setAdapter(cAdapter);//add adapter to recyclerview
           preparePeopleData();//call function to add data to recyclerview
       }
   
       //function to add data to List
       private void preparePeopleData() {
           People name = new People("Abraham Lincoln", "1809");
           cList.add(name);
           name = new People("John F. Kennedy", "1917");
           cList.add(name);
           name = new People("Bill Gates ", "1955");
           cList.add(name);
           name = new People("Muhammad Ali ", "1942");
           cList.add(name);
           name = new People("Christopher Columbus ", "1451");
           cList.add(name);
           name = new People("George Orwell", "1903");
           cList.add(name);
           name = new People("Charles Darwin ", "1809");
           cList.add(name);
           name = new People("Elvis Presley", "1935");
           cList.add(name);
           name = new People("Albert Einstein", "1879");
           cList.add(name);
           name = new People("Queen Victoria", "1819");
           cList.add(name);
           name = new People("Jawaharlal Nehru", "1889");
           cList.add(name);
           name = new People("Leonardo da Vinci", "1452");
           cList.add(name);
           name = new People("Pablo Picasso", "1881");
           cList.add(name);
           name = new People("Vincent Van Gogh", "1853");
           cList.add(name);
           name = new People("Thomas Edison", "1847");
           cList.add(name);
           name = new People("Henry Ford", "1863");
           cList.add(name);
           name = new People("Michael Jordan", "1963");
           cList.add(name);
           name = new People("Oscar Wilde", "1854");
           cList.add(name);
           name = new People("Adolf Hitler", "1889");
           cList.add(name);
           name = new People("Madonna", "1958");
           cList.add(name);
           name = new People("Steve Jobs", "1955");
           cList.add(name);
           name = new People("Roger Federer", "1981");
           cList.add(name);
           name = new People("Carl Lewis", "1961");
           cList.add(name);
           //notify datasetChanged to show the added items to the list in recyclerview
           cAdapter.notifyDataSetChanged();
       }
   }

Before we run the project, make sure the SecondMain java class is declared in the AndroidManifest.xml. Declare this tag just before the end of the tag

With this the setup is complete. Now try running the app & you should get the output, as seen in the live demo-2.

Primary links

Android Articles » Simple RecyclerView and RecyclerView Using CardView

1. Simple RecyclerView

2. RecyclerView with CardView