Create horizontal RecylerView in android

Using RecyclerView we can efficiently display large sets of data. You would have used vertical RecyclerView. Do you know we can use RecyclerView to display the data horizontally? In this post, we will learn how to create a horizontal RecyclerView.

I have creted a simple app ‘Amazing books‘ to demonstrate horizontal RecyclerView.

To display data horizontally in RecyclerView you need to follow these two steps –

Set the orientation attribute of RecyclerView to horizontal
When setting the LinearLayoutManager set the parameters like this – LinearLayoutManager(this, RecyclerView.HORIZONTAL, false). The 2 parameters are easily understandable and the third parameter is the reverseLayout parameter. Setting it to true reverses the swiping direction.

Now let’s see the code.

(You can also see this code on GitHub. Click here.)

activity_main.xml

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" />
</LinearLayout>

See in the code above. I have set orientation attribute of RecylerView to horizontal.

books_card.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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/card"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_marginStart="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="12dp"
    android:layout_marginEnd="15dp"
    android:layout_marginRight="15dp"
    app:cardBackgroundColor="@color/cardview_light_background"
    app:cardElevation="12dp">


    <ImageView
        android:id="@+id/book_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:srcCompat="@tools:sample/avatars" />
</androidx.cardview.widget.CardView>

MainActivity.java

package com.example.amazingbooks;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    // Data to display.
    int[] books = {
            R.drawable.android_apprentice,
            R.drawable.android_app_development,
            R.drawable.android_programming_for_beginners,
            R.drawable.android_programming,
            R.drawable.head_first_android,
            R.drawable.hello_android,
            R.drawable.practical_android,
            R.drawable.practical_android};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView=findViewById(R.id.recyclerView);
        //Pass adapter to RecyclerView
        recyclerView.setAdapter(new BooksAdapter(books));

        //layout manager specifies how to arrange the views. Here I am using LinearLayoutManager.
        //Recycler view gives you more
        //options. You can choose to display views in a linear list, a grid, or
        //a staggered grid.
        recyclerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.HORIZONTAL, false));
    }
}

Notice the parameters of LinearlayoutManager.

BooksAdapter.java

package com.example.amazingbooks;

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

import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.core.content.ContextCompat;
import androidx.recyclerview.widget.RecyclerView;

public class BooksAdapter extends RecyclerView.Adapter<BooksAdapter.BooksViewHolder>{

    int[] books;
    BooksAdapter(int[] books)
    {
        this.books =books;
    }

    //RecyclerView will call this method when it needs to create a ViewHolder
    @NonNull
    @Override
    public BooksViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        CardView cardView=(CardView) LayoutInflater.from(parent.getContext())
                .inflate(R.layout.books_card,parent,false);
        return new BooksViewHolder(cardView);
    }

    //RecyclerView will call this method when it needs a ViewHolder for new piece of data.
    //This method will set the data to the ViewHolder.
    @Override
    public void onBindViewHolder(@NonNull BooksViewHolder holder, int position) {

        ImageView bookImage=holder.bookCard.findViewById(R.id.book_image);
        bookImage.setImageDrawable(ContextCompat.getDrawable(bookImage.getContext(),books[position]));

    }


    @Override
    // Number of items to display
    public int getItemCount() {
        return books.length;
    }

    //Each ViewHolder will hold a CardView
    public static class BooksViewHolder extends RecyclerView.ViewHolder
    {
        private CardView bookCard;

        public BooksViewHolder(@NonNull CardView v) {
            super(v);
            bookCard =v;
        }
    }
}

Output :

That’s all about creating horizontal RecyclerView.

Goodbye.

DeveloperXon

Create horizontal RecylerView in android

Like this:

Leave a Reply Cancel reply

Create horizontal RecylerView in android

Share this:

Like this:

Leave a Reply Cancel reply