Android | Horizontal RecyclerView with Examples

Last Updated : 06 Jan, 2025

Recycler View is a ViewGroup added to Android Studio as a successor of the GridView and ListView. It is an improvement on both of them and can be found in the latest v-7 support packages. It has been created to make possible construction of any lists with XML layouts as an item which can be customized vastly while improving on the efficiency of ListViews and GridViews. This improvement is achieved by recycling the views which are out of the visibility of the user.

For example: if a user scrolled down to a position where the items 4 and 5 are visible; items 1, 2 and 3 would be cleared from the memory to reduce memory consumption.

In this article, we will learn how to create a Recycler View which can be scrolled in a horizontal direction. Here are the detailed steps:

Step 1: Add the dependency of Recycler View widget in your project

In modern android studio projects, Recycler View is already present, so there is no need to add a dependency for RecyclerView explicitly. However, if you are unable to use Recycler View, you can add the following dependency in your app > build.gradle.kts (module: app) file

Latest dependency for Recycler View is:

implementation("androidx.recyclerview:recyclerview:1.3.2")

Also add the dependency for Card View. Latest dependency for Card View is:

implementation("androidx.cardview:cardview:1.0.0")

Step 2: Setting up the activity_main.xml layout file The activity_main.xml layout file consists of:

Constraint layout which contains the recycler view
Recycler view widget

Here is complete code for activity_main.xml:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Setting up the item.xml layout file for Recycler view

Make a new layout file 'item.xml' in your app > res > layout folder. The item.xml layout file consists of the layout for an item of Recycler View. Item Layout contains a Card View with Text view in it with some text. Here is complete code for item.xml:

item.xml

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

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:backgroundTint="#0000FF"
        android:layout_marginHorizontal="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        
        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:gravity="center"
            android:textColor="@color/white"
            android:text="Hello World"/>
    
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Setting up the code for Recycler View Adapter

The adapter is the main code responsible for RecyclerView. It holds all the important methods dealing with the implementation of RecylcerView.Create a new java class called 'adapter.java' in your app > java > com.package.package folder.

The basic methods for a successful implementation are:

onCreateViewHolder
onBindViewHolder
getItemCount

The adapter is used to set data to Recycler View from Data source. Here is complete code for adapter.java:

Javapackage com.ishaanbhela.recyclerviewexample;

Adapter.java

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class adapter extends RecyclerView.Adapter<adapter.holder> {
	// List that holds every item to be displayed in RecyclerView
    List<String> texts;

    public adapter(List<String> texts){
        this.texts = texts;
    }

    @NonNull
    @Override
  	// This function inflated the list_item and fits it into the Recycler View Widget
    public adapter.holder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
        return new holder(view);
    }

    @Override
  	// This funciton binds the Content with the components of the Recycler View.
    public void onBindViewHolder(@NonNull adapter.holder holder, int position) {
        holder.text.setText(texts.get(position));
    }

    @Override
    public int getItemCount() {
        return texts.size();
    }
	
  	// This class holds the components of the Recycler View
    public static class holder extends RecyclerView.ViewHolder {
        public TextView text;
        public holder(@NonNull View itemView) {
            super(itemView);
            text = itemView.findViewById(R.id.text);
        }
    }
}

Step 5. Setting up the code for MainActivity.java file for Recycler view

The MainActivity contains RecyclerView. Set Layout Manager on Recycler view using LinearLayoutManager class. Here is complete code for MainActivity.java:

Java

package com.ishaanbhela.recyclerviewexample;
import android.os.Bundle;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    List<String> texts;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
      
        setContentView(R.layout.activity_main);
      
        ViewCompat.setOnApplyWindowInsetsListener(
            findViewById(R.id.main), (v, insets) -> {
                Insets systemBars = insets.getInsets(
                    WindowInsetsCompat.Type.systemBars());
                v.setPadding(
                    systemBars.left, systemBars.top,
                    systemBars.right, systemBars.bottom);
                return insets;
            });

        recyclerView = findViewById(R.id.recycler);
        
      	// This piece of line is what makes the Recycler
        // View horizontal.
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL,false));
        
      	AddItemsToRecyclerViewArrayList();
        adapter ada = new adapter(texts);
        recyclerView.setAdapter(ada);
    }

    // Function to add items in RecyclerView.
    public void AddItemsToRecyclerViewArrayList()
    {

        // Adding items to ArrayList
        texts = new ArrayList<>();
        texts.add("gfg");
        texts.add("is");
        texts.add("best");
        texts.add("site");
        texts.add("for");
        texts.add("interview");
        texts.add("preparation");
    }
}