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.
If you are a video person, you can check our tutorial video here:
Creating Horizontal RecylerView
- Create RecyclerView Layout
- Create RecyclerView Item Layout
- Create Required Variables
- Create Adapter and View Holder in RecylerView Activity
- Populate Source Data for RecyclerView
- Initialize LayoutManager, Adapter and Set to RecyclerView
- 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.