Horizontal and Vertical Scroll in RecyclerView — Android

Enable horizontal scroll in vertical oriented recyclerview.

We loved RecyclerView. It was great invention in android application development. Overall every app in play store have RecyclerView.

Here we are going to implement vertical recyclerview than make it scroll horizontally with help of horizontal scroll view.

And, Here’s a link to nested recyclerview. If you are searching for vertical & horizontal scroll recyclerview.

https://link.medium.com/hUwUDDdqBgb

Ok, lets get started…

The output of what we are going to make is shown below.

Output

Don’t forget to Clap & Share :)

Manifests.xml

The android:configChanges will helps to remain in activity state while the screen is rotated.

The android:launchMode will help to create your activity instance only one. other activity instance will be destroyed.

<application
    android:name=".helper.XborgApplication"
    android:allowBackup="true"
    android:icon="@drawable/xborg_logo"
    android:label="@string/app_name"
    android:roundIcon="@drawable/datcon_logo"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    tools:replace="android:icon">
    <activity
        android:name=".activities.boq.BOQActivity"
        android:configChanges="orientation|screenSize"
        android:launchMode="singleTask" />
</application>

The tricky part is making UI that fits with the orientation of other element alignment.

activity_boq.xml

FIRST, Put your RecyclerView inside horizontal HorizontalScrollView.

<?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:background="@color/colorWhite">
....
   
        <HorizontalScrollView
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

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

        </HorizontalScrollView>

 .....


</RelativeLayout>

AND, Recycler View will contains two types of view TYPE_HEADER & TYPE_ITEM.

REMEMBER

Make header and other item view same as possible for contents to be in a straight line otherwise, your view will look distorted.

TYPE_HEADER

item_boq_content_header

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/boq_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/bold"
        android:gravity="center"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Item No."
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />


    <TextView
        android:id="@+id/boq_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3.5"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Description"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />


    <TextView
        android:id="@+id/boq_unit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Unit"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />

    <TextView
        android:id="@+id/boq_quantity"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:padding="8dp"
        android:text="Quantity"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />


    <TextView
        android:id="@+id/boq_rate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:padding="8dp"
        android:text="Rate"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2.5"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Rate In Words"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"

        android:layout_weight="1.5"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Amount"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"

        android:layout_weight="2"
        android:fontFamily="@font/bold"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Remarks"
        android:textAllCaps="true"
        android:textColor="@color/colorBlack" />

</LinearLayout>

TYPE_ITEM

item_boq_content

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bottom_stroke_only"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/boq_label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/bold"
        android:gravity="center"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Item No."
        android:textColor="@color/colorDarkGrey" />


    <TextView
        android:id="@+id/boq_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3.5"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:padding="8dp"
        android:text="Description"
        android:textColor="@color/colorDarkGrey" />


    <TextView
        android:id="@+id/boq_unit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Unit"
        android:textColor="@color/colorDarkGrey" />

    <TextView
        android:id="@+id/boq_quantity"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:padding="8dp"
        android:text="Quantity"
        android:textColor="@color/colorDarkGrey" />


    <TextView
        android:id="@+id/boq_rate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:padding="8dp"
        android:text="Rate"
        android:textColor="@color/colorDarkGrey" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2.5"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Rate In Words"
        android:textColor="@color/colorDarkGrey" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:maxLines="1"
        android:padding="8dp"
        android:text="Amount"
        android:textColor="@color/colorDarkGrey" />


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:fontFamily="@font/normal"
        android:includeFontPadding="false"
        android:padding="8dp"
        android:text="Remarks"
        android:textColor="@color/colorDarkGrey" />

</LinearLayout>

Here’s how i did setup work.. too tired to truncate code. see what’s necessary and do implement. :)

BOQActivity.java

This activity contents recyclerview and horizontal scroll view.

Doing RecyclerView Setup Work like network request and shared prefrence work form Utilities functions! ;) Comment are always welcome (if you have any queries)

Thank you. Have a wonderful day.

You can also buy me coffee to support me

Thank you. Catch you guys in the next one.