How to Make Horizontal RecyclerView Easily – Android Studio Tutorial

We can make Horizontal RecyclerView or Horizontal Scrolling in RecyclerView in Android using LinearLayoutManager. If you’ve used LinearLayout, you might have noticed that you can set the layout orientation to both horizontal and vertical. Similarly, you can set the orientation of a RecyclerView using the LinearLayoutManager that we set to the recyclerView. Let’s see how we can achieve horizontal scrolling in RecyclerView in detail.

Horizontal Scrolling RecyclerView

If you are a video person, you can check our tutorial video here:

Youtube Tutorial

Creating Horizontal RecylerView

  1. Create RecyclerView Layout
  2. Create RecyclerView Item Layout
  3. Create Required Variables
  4. Create Adapter and View Holder in RecylerView Activity
  5. Populate Source Data for RecyclerView
  6. Initialize LayoutManager, Adapter and Set to RecyclerView
  7. Running and testing

Creating RecyclerView Layout

Create a new file called activity_horizontal_rv.xml in layout directory of resources.

<?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:id="@+id/relativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/horizontalRv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="horizontal" />
</LinearLayout>

Creating RecyclerView Item Layout

Create a new file called rv_item.xml in layout directory of resources.

<?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"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_margin="2dp"
    app:cardCornerRadius="12dp"
    app:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/camino" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:background="#595959"
            android:gravity="center"
            android:text="Text Is This"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />
    </RelativeLayout>
</androidx.cardview.widget.CardView>

Creating Required Variables

Here we’ll just add some required variables like adapter, datasource and more to the Activity where you want the Horizontal RecyclerView. Here’s the code.

    RecyclerView rv;
    ArrayList<String> dataSource;
    LinearLayoutManager linearLayoutManager;
    MyRvAdapter myRvAdapter;

Creating Adapter and ViewHolder

In the activity containing recylerView, create RecyclerView adapter and ViewHolder

class MyRvAdapter extends RecyclerView.Adapter<MyRvAdapter.MyHolder> {
        ArrayList<String> data;

        public MyRvAdapter(ArrayList<String> data) {
            this.data = data;
        }

        @NonNull
        @Override
        public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(ActivityHorizontalRV.this).inflate(R.layout.rv_item, parent, false);
            return new MyHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull MyHolder holder, int position) {
            holder.tvTitle.setText(data.get(position));
        }

        @Override
        public int getItemCount() {
            return data.size();
        }

        class MyHolder extends RecyclerView.ViewHolder {
            TextView tvTitle;

            public MyHolder(@NonNull View itemView) {
                super(itemView);
                tvTitle = itemView.findViewById(R.id.tvTitle);
            }
        }

    }

Populate Data For RecyclerView

In the onCreate method of your activity, populate data sources that will be used by the horizontal recyclerview.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //Setting the data source
        dataSource = new ArrayList<>();
        dataSource.add("Hello");
        dataSource.add("World");
        dataSource.add("To");
        dataSource.add("The");
        dataSource.add("Code");
        dataSource.add("City");
        dataSource.add("******");
    }

Initialize LinearLayoutManager, Adapter and Set to RecyclerView

Now we just need to initialize our LinearLayoutManager, Adapter and fit the pieces together and we’ll have our Horizontal ReyclerView Ready! The onCreate method looks like this after adding the required code.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horizontal_rv);
        rv = findViewById(R.id.horizontalRv);

        //Setting the data source
        dataSource = new ArrayList<>();
        dataSource.add("Hello");
        dataSource.add("World");
        dataSource.add("To");
        dataSource.add("The");
        dataSource.add("Code");
        dataSource.add("City");
        dataSource.add("******");

        linearLayoutManager = new LinearLayoutManager(ActivityHorizontalRV.this, LinearLayoutManager.HORIZONTAL, false);
        myRvAdapter = new MyRvAdapter(dataSource);
        rv.setLayoutManager(linearLayoutManager);
        rv.setAdapter(myRvAdapter);
    }

Running and Testing!

We’re done! just run it and you’ll have your horizontal recyclerview up and running! If this is a new activity, you’ll need to add it to the manifest file, if you added the code to an existing activity, you can just run and test. Hope it worked out well, and if you have any issues, feel free to let me know in the comment section below.
You can check more of our Android Tutorials here.

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

You’ve been successfully subscribed to our newsletter! See you on the other side!

Sharing is caring!

Leave a Comment

Your email address will not be published.

Exit mobile version