RecyclerView(Horizontal and Vertical Listing ), CardView

Android RecyclerView is more advanced version of ListView with improved performance and other benefits. In this tutorial i am using creating vertical and horizontal listing with card view.

Download Demo

Steps to use recycle view in your project.

1. Crate a project in android studio.
2. Open build.gradle(app) and add some dependency
   
   
   

   //add dependency for card view
   compile 'com.android.support:cardview-v7:21.0.+'
   
   //add dependency for recycler view
   compile 'com.android.support:recyclerview-v7:21.0.+'
   

     
3. Open your main_activity.xml and update it-
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:background="#30000000"
       android:padding="@dimen/activity_vertical_margin"
       tools:context="com.pankaj.recycler.cardview.demo.MainActivity">
   
       <!--title of the horizontal listing-->
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Horizontal Listing"
           android:textColor="@color/colorPrimary"
           android:textStyle="bold" />
   
       <!--recycler view for horizontal listing-->
       <android.support.v7.widget.RecyclerView
           android:id="@+id/rvHorizontal"
           android:layout_width="match_parent"
           android:layout_height="60dp" />
   
       <!--title of the vertical listing-->
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="10dp"
           android:text="Vertical Listing"
           android:textColor="@color/colorPrimary"
           android:textStyle="bold" />
   
       <!--recycler view for vertical listing-->
       <android.support.v7.widget.RecyclerView
           android:id="@+id/rvVertical"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
   </LinearLayout>
   

    
4. Create a custom child view for vertical listing(row_of_vertical_listing.xml).
   
   

   <?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="match_parent"
       android:orientation="vertical"
       android:padding="2dp">
   
       <!-- A CardView that contains a TextView -->
       <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_margin="2dp"
           android:elevation="3dp"
           android:foreground="?android:selectableItemBackground"
           card_view:cardCornerRadius="5dp"
           card_view:contentPadding="5dp">
   
           <!--contant of the row-->
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:orientation="vertical">
   
               <!--title text-->
               <TextView
                   android:id="@+id/tvTitle"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="title"
                   android:textStyle="bold" />
   
               <!--message text-->
               <TextView
                   android:id="@+id/tvMessage"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="message" />
   
           </LinearLayout>
       </android.support.v7.widget.CardView>
   </LinearLayout>
   

    
5. Create a custom child view for horizontal listing(row_of_horizontal_listing.xml).
   
   

   
   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:padding="2dp">
   
       <!-- A CardView that contains a TextView -->
       <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_margin="2dp"
           android:elevation="3dp"
           android:foreground="?android:selectableItemBackground"
           card_view:cardCornerRadius="5dp"
           card_view:contentPadding="5dp">
   
           <!--contant of the row-->
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:orientation="vertical">
   
               <!--title text-->
               <TextView
                   android:id="@+id/tvTitle"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="title"
                   android:textStyle="bold" />
   
               <!--message text-->
               <TextView
                   android:id="@+id/tvMessage"
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="message" />
   
           </LinearLayout>
       </android.support.v7.widget.CardView>
   </LinearLayout>
   

     
6. Create a custom recyclers view adapter (MyAdapter.JAVA)

   package com.pankaj.recycler.cardview.demo;
   
   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.ArrayList;
   /**
    * Created by android_studio on 7/12/16.
    */
   public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
   
       //________create number of objects according to your need
       private ArrayList<String> titleDataList;
       private ArrayList<String> messageDataList;
       boolean isHorizontalList;
   
       //________create  constructor with required parameter
       public MyAdapter(ArrayList<String> titleDataList, ArrayList<String> messageDataList, boolean isHorizontalList) {
   
           //________initialize
           this.titleDataList = titleDataList;
           this.messageDataList = messageDataList;
           this.isHorizontalList = isHorizontalList;
       }
   
       @Override
       public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           View itemView;
   
           //________show data in the horizontal listing
           if (isHorizontalList) {
               itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_of_horizontal_listing, parent, false);
           }
   
           //________show data in the vertical listing
           else {
               itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_of_vertical_listing, parent, false);
           }
   
           //________return child view
           return new ViewHolder(itemView);
       }
   
       @Override
       public void onBindViewHolder(ViewHolder holder, int position) {
           //________set data to the objects of each row widget
           holder.tvTitle.setText(titleDataList.get(position));
           holder.tvMessage.setText(messageDataList.get(position));
       }
   
       @Override
       public int getItemCount() {
           return titleDataList.size();
       }
   
       public static class ViewHolder extends RecyclerView.ViewHolder {
   
           //________create objects of each row widget
           public TextView tvTitle, tvMessage;
           public ViewHolder(View view) {
               super(view);
   
               //________initialize objects of each row widget
               tvTitle = (TextView) view.findViewById(R.id.tvTitle);
               tvMessage = (TextView) view.findViewById(R.id.tvMessage);
           }
       }
   }
   

    
7. Open your MainActivity.JAVA class and update it -
   

   package com.pankaj.recycler.cardview.demo;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.support.v7.widget.LinearLayoutManager;
   import android.support.v7.widget.RecyclerView;
   import java.util.ArrayList;
   public class MainActivity extends AppCompatActivity {
   
       //________create object
       private RecyclerView rvVertical, rvHorizontal;
       private ArrayList<String> titleDataList;
       private ArrayList<String> messageDataList;
       private RecyclerView.LayoutManager mLayoutManagerHorizontal;
       private RecyclerView.LayoutManager mLayoutManagerVertical;
       private MyAdapter verticalAdapter;
       private MyAdapter horizontalAdapter;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           //________initialize
           rvVertical = (RecyclerView) findViewById(R.id.rvVertical);
           rvHorizontal = (RecyclerView) findViewById(R.id.rvHorizontal);
           titleDataList = new ArrayList<>();
           messageDataList = new ArrayList<>();
   
           //________add dummy titles and message
           for (int i = 1; i <= 50; i++) {
               titleDataList.add("Title " + i);
               messageDataList.add("message " + i);
           }
   
           //________initialize adapters
           verticalAdapter = new MyAdapter(titleDataList, messageDataList, false);
           horizontalAdapter = new MyAdapter(titleDataList, messageDataList, true);
   
           //________initialize layout managers
           mLayoutManagerHorizontal = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
           mLayoutManagerVertical = new LinearLayoutManager(this);
   
           //________set layout managers
           rvHorizontal.setLayoutManager(mLayoutManagerHorizontal);
           rvVertical.setLayoutManager(mLayoutManagerVertical);
   
           //________set adapters
           rvHorizontal.setAdapter(horizontalAdapter);
           rvVertical.setAdapter(verticalAdapter);
       }
   }
   

   
   
8. Now all the development steps for recycler view and card view with horizontal and vertical listing has completed, Please run the application and see the screen of device.
   
   
   
   
   
   
   
   
   
   
   
9. Good bye, Thanks to read this blog.

Download Demo