
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.
Leave a Reply