androidkotlinandroid-recyclerviewandroid-xmlandroid-cardview

Howto create horizontal scrolling RecyclerView with Cards


Trying to setup a horizontal scrolling RecyclerView that takes in CardViews and scrolls them horizontally on the screen. I have attempted to set this by creating a LinearLayout and setting the RecyclerView orientation to horizontal and scrollbars to horizontal as well. Unfortunately, this doesn't work, and I'm still seeing the cards fill the entire vertical space and scroll vertically. Not sure why this is happening or how to fix it.

RecyclerView:


Save New Duplicate & Edit Just Text
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewModel"
            type="com.cloudhospital.app.ui.viewmodel.HospitalsVM" />
    </data>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.fragment.GeneralHealthFragment">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="0dp"
            android:orientation="horizontal"
            android:scrollbars="horizontal"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
             />

    </RelativeLayout>

</layout>

CardView:


Save New Duplicate & Edit Just Text
<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/hospital_item_card"
    android:padding="8dp"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_margin="10dp"
    app:cardBackgroundColor="@color/White"
    app:cardCornerRadius="7.5dp">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <ImageView
        android:id="@+id/itemImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toTopOf="@+id/name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.74" />

    <TextView
        android:id="@+id/name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="top|start"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toTopOf="@+id/itemDescription"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/itemImage"
        tools:text="Some date" />

    <TextView
        android:id="@+id/itemDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|start"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Solution

  • To have horizontal scrolling need to set horizontal layout manager to your recycler view programmatically like below.

     recyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL, false));
     recyclerView.setAdapter(yourAdapter);