Please Like our Facebook Page

How to Create Android Horizontal Scrolling RecyclerView


horizontal scrolling RecyclerView



A good example of android horizontal scrolling RecyclerView is the kind of recyclerView found on the play store app. Horizontal scrolling RecyclerView is commonly used in scenarios where products or data is loaded in categories or maybe when trying to do some fancy design on your app. Today you are going to learn how to easily implement horizontal scrolling recyclerView in android.

Download Test App

How to create android horizontal scrolling recycler view

Also Read, Android Endless Scrolling RecyclerView

If you have a Basic Introduction to ReyclerView, then this tutorial will just be a walk throuth.

To achieve horizontal scrolling list on a recyclerView, just add RecyclerView orientation parameter to your LayoutManager as shown in the code below.



RecyclerView recyclerView = findViewById(id);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

That alone will make your RecyclerView Lists to scroll horizontally. I found problems when I added recyclerView.setHasFixedSize(true);, ignore recyclerView.setHasFixedSize(true); for now, but if it works for you, just go with it.

Also Read, How to hide android floating action button as one scrolls RecyclerView

Project on how to Create Horizontal Scrolling RecyclerView in Android

Go ahead and create a new android project from File > New Project. Fill in all the necessary details, when prompted to select an activity, select Basic Activity and proceed.

First create items.xml layout from layout > new > Layout Resources File. This file will represent a single row item in our reyclerView but since we are using horizontal scrolling reyclerView, we can as well call it a single column item.

android horizontal scrolling recyclerView item layout file



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:background="#ffff"
    android:padding="7dp">

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="10dp"
        android:src="@drawable/picture1" />

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_image"
        android:layout_centerHorizontal="true"
        android:text="Item Title"
        android:textColor="#000"
        android:textSize="16sp"
        android:textStyle="bold" />

</RelativeLayout>

Add the following code into your content_main.xml file, you can also replace the ConstraintLayout with any other layout such as RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:padding="10dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

We are going to create two classes for our ReyclerView. First class is a model class that will contain image and text. The second class will be our ReyclerView adapter. So go ahead and add the following code into your model class.



package hack.hacksmile.hacksmiletutorials;

public class HackSmileModelClass {
    private int image;
    private String title;

    public HackSmileModelClass(int image, String title) {
        this.image = image;
        this.title = title;
    }

    public int getImage() {
        return image;
    }

    public String getTitle() {
        return title;
    }
}

Add the following code into your ReyclerView adapter class.
CustomAdapter.java

package hack.hacksmile.hacksmiletutorials;

import android.content.Context;
import android.support.annotation.NonNull;
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 CustomAdapter extends RecyclerView.Adapter<CustomAdapter.CustomViewHolder> {

    private Context context;
    private ArrayList<HackSmileModelClass> items;

    public CustomAdapter(Context context, ArrayList<HackSmileModelClass> items) {
        this.context = context;
        this.items = items;
    }

    @NonNull
    @Override
    public CustomViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new CustomViewHolder(LayoutInflater.from(context).inflate(R.layout.custom_item_layout, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull CustomViewHolder holder, int position) {
        holder.itemTitle.setText(items.get(position).getTitle());
        holder.itemImage.setImageResource(items.get(position).getImage());
    }

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

    public class CustomViewHolder extends RecyclerView.ViewHolder {

        private ImageView itemImage;
        private TextView itemTitle;

        public CustomViewHolder(View view) {
            super(view);
            itemImage = view.findViewById(R.id.item_image);
            itemTitle = view.findViewById(R.id.item_title);
        }
    }
}

Now it’s time to implement horizontal scrolling list on RecyclerView. Add the following code into your MainActivity.java class.

package hack.hacksmile.hacksmiletutorials;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        ArrayList<HackSmileModelClass> items = new ArrayList<>();
        CustomAdapter adapter = new CustomAdapter(this, items);

        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

        recyclerView.setAdapter(adapter);

        // let's create 10 random items

        for (int i = 0; i < 10; i++) {
            items.add(new HackSmileModelClass(R.drawable.Picture1, "Title " + i));
            adapter.notifyDataSetChanged();
        }

    }


}