RecyclerView is another version of ListView which is introduced in Material design. With the combination of RecyclerView and CardView, we can design attractive UI as compare to ListView. RecyclerView provides both list layout and grid layout in a single element.

See my previous blog Android working with RecyclerView and CardView with example for vertical List Layout and Grid Layout.

In this blog, we will learn How to design Horizontal ListView using RecyclerView and CardView in Android with example of food list. RecyclerView would be combined with CardView to design horizontal ListView.

Step 1. Create an Android Project with an empty Activity called MainActivity. You need some food images for this example, so please download it and put it to the drawable folder.

Step 2. Open app/build.gradle file and add dependencies for RecyclerView and CardView. After adding dependencies Sync your project.

app/build.gradle

apply plugin: 'com.android.application'

  

android {

    compileSdkVersion 25

    buildToolsVersion "28.0.3"

  

    defaultConfig {

        applicationId "com.example.dell.androidrecyclerviewwithcardview"

        minSdkVersion 15

        targetSdkVersion 25

        versionCode 1

        versionName "1.0"

    }

    buildTypes {

        release {

            minifyEnabled false

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

        }

    }

}

  

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    testCompile 'junit:junit:4.12'

    compile 'com.android.support:appcompat-v7:25.3.1'

    compile 'com.android.support:recyclerview-v7:25.3.1' /* Add this dependency */

    compile 'com.android.support:cardview-v7:25.3.1' /* Add this dependency */

}

Step 3. As we have created project with empty Activity, two files activity_main.xml and MainActivity.java will be created in its correspondent folders. Open activity_main.xml, modify it by putting RecyclerView in it.

activity_main.xml

<?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:paddingTop="10dp"

    tools:context=".MainActivity">

  

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingBottom="5dp"

        android:paddingLeft="5dp"

        android:text="Popular Brands"

        android:textColor="#000000"

        android:textSize="20dp"

        android:textStyle="bold" />

  

    <android.support.v7.widget.RecyclerView

        android:id="@+id/recyclerView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:clipToPadding="false"

        android:scrollbars="vertical" />

  

</LinearLayout>

Step 4. Now create an XML layout file which presents item/card to display in RecyclerView. Simply it is a design file that shows how each item/card will display in RecyclerView. I have created a file with the name cardinterface.xml.

Step to create xml Layout file: Right click to layout folder-> New-> Layout resource file.

cardinterface.xml

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

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/cardView"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_gravity="center"

    app:cardCornerRadius="4dp"

    app:cardElevation="3dp"

    app:cardUseCompatPadding="true">

  

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical">

  

        <ImageView

            android:id="@+id/imgRestaurant"

            android:layout_width="140dp"

            android:layout_height="100dp"

            android:scaleType="fitXY"

            android:src="@drawable/pizza" />

  

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical"

            android:padding="5dp">

  

            <TextView

                android:id="@+id/txtRestaurantName"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Restaurant Name"

                android:textColor="#000000"

                android:textSize="15dp" />

  

            <TextView

                android:id="@+id/txtDesc"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Description"

                android:textSize="10dp" />

  

        </LinearLayout>

  

    </LinearLayout>

  

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

Step 5. Create a DataModel.java file which contains properties to set and get the value of ArrayList. This values will be displayed in CardView.

Step to create java file: Right click to "com.example. androidrecyclerviewwithcardview" inside java folder-> New-> Java Class.

DataModel.java

package com.example.androidrecyclerviewwithcardview;

  

public class DataModel {

  

    private String RestaurantName = "";

    private String Desc = "";

    private Integer imgSrc;

  

    public void setRestaurantName(String _RestaturantName) {

        this.RestaurantName = _RestaturantName;

    }

    public String getRestaurantName() {

        return this.RestaurantName;

    }

  

    public void setDesc(String _Desc) {

        this.Desc = _Desc;

    }

    public String getDesc() {

        return this.Desc;

    }

  

    public void setImgSrc(Integer _imgSrc) {

        this.imgSrc = _imgSrc;

    }

    public Integer getImgSrc() {

        return this.imgSrc;

    }

}

Step 6. Create a MyCustomAdapter.java file which will contain below code to fill adapter. Follow the previous step to create a java file.

Extend MyCustomAdapter class with RecyclerView.Adapter<>. Adapter basically holds a list of records and then bind that list to RecyclerView.

MyCustomAdapter.java

package com.example.androidrecyclerviewwithcardview;

  

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import java.util.ArrayList;

  

public class MyCustomAdapter extends RecyclerView.Adapter<MyCustomAdapter.MyViewHolder> {

  

    ArrayList<DataModel> listDataModel = new ArrayList<DataModel>();

  

    public MyCustomAdapter(ArrayList<DataModel> _listDataModel) {

        this.listDataModel = _listDataModel;

    }

  

    @Override

    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardinterface, parent, false);

        MyViewHolder holder = new MyViewHolder(view);

        return holder;

    }

  

    @Override

    public void onBindViewHolder(MyViewHolder holder, int position) {

  

        DataModel objDataModel = listDataModel.get(position);

  

        holder.txtRestaurantName.setText(objDataModel.getRestaurantName().toString());

        holder.txtDesc.setText(objDataModel.getDesc().toString());

        holder.imgRestaurant.setImageResource(objDataModel.getImgSrc());

    }

  

    @Override

    public int getItemCount() {

        return listDataModel.size();

    }

  

    public class MyViewHolder extends RecyclerView.ViewHolder {

  

        TextView txtRestaurantName, txtDesc;

        ImageView imgRestaurant;

  

        public MyViewHolder(View view) {

            super(view);

            txtRestaurantName = (TextView) view.findViewById(R.id.txtRestaurantName);

            txtDesc = (TextView) view.findViewById(R.id.txtDesc);

            imgRestaurant = (ImageView) view.findViewById(R.id.imgRestaurant);

        }

    }

}

Step 7. Now merge MyCustomAdapter with RecyclerView and to do this we have to use setAdapter() method of RecylerView. Write below code to MainActivity.java file. LinearLayoutManager() is used to set Horizontal Layout.

MainActivity.java

package com.example.androidrecyclerviewwithcardview;

  

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

  

public class MainActivity extends AppCompatActivity {

  

    RecyclerView recyclerView;

  

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

  

        ArrayList<DataModel> _listDataModel = listArray();

  

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

        recyclerView.setHasFixedSize(true);

  

        /* Set Horizontal LinearLayout to RecyclerView */

        LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);

        mLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

        recyclerView.setLayoutManager(mLayoutManager);

  

        /* Set MyCustomAdapter to RecyclerView */

        recyclerView.setAdapter(new MyCustomAdapter(_listDataModel));

    }

  

    public ArrayList<DataModel> listArray() {

  

        ArrayList<DataModel> objList = new ArrayList<DataModel>();

        DataModel dm;

  

        dm = new DataModel();

        dm.setRestaurantName("India Restaurant");

        dm.setDesc("Pav Baji, Chinese, South Indian, Fast Food");

        dm.setImgSrc(R.drawable.pavbhaji);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Cream 'n' Crust");

        dm.setDesc("Pastry, Desserts, Ice Cream, Cakes, Foods");

        dm.setImgSrc(R.drawable.pastry);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Food on Truck");

        dm.setDesc("Sandwich, Fast Food, Beverages, Ice Cream");

        dm.setImgSrc(R.drawable.sandwich);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Dairy Don");

        dm.setDesc("Thickshake, Beverages, Desserts, Ice Cream, Snacks");

        dm.setImgSrc(R.drawable.thickshake);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Noodle Nest");

        dm.setDesc("Noodles, Chinese, Thai, Asian");

        dm.setImgSrc(R.drawable.noodles);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Pizza Squad");

        dm.setDesc("Pizza, Italian");

        dm.setImgSrc(R.drawable.pizza);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Burger Box");

        dm.setDesc("Fast Food");

        dm.setImgSrc(R.drawable.burger);

        objList.add(dm);

  

        dm = new DataModel();

        dm.setRestaurantName("Italian Food");

        dm.setDesc("Fast Food, Italian");

        dm.setImgSrc(R.drawable.italianfood);

        objList.add(dm);

  

        return objList;

    }

}

Step 8. Now run this application in AVD or in your mobile.

Output

Your Project Structure may look like,

I hope you like this blog. If you have any query, please comment below. Thank You… :)