Horizontal Scrollview in Android

Last Updated : 20 Jul, 2022

ScrollView is a very essential part of Android App Development and can be seen in almost every Application. One of the most popular areas where its implementation can be seen is in the stories bar at the top of Instagram. In this article, we will learn how we can implement a Horizontal ScrollView in Android.

HorizontalScrollView

Horizontal ScrollView is a FrameLayout, used to provide the child View element horizontal scrolling property. The ChildView in itself can be a layout manager like the linear layout. The TextView class takes care of its own scrolling, But it can be placed inside a HorizontalScrollView to create more complex UI designs.

Note: HorizontalScrollView only provides horizontal scrolling, for vertical scrolling ScrollView can be used

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Project just refer to this article on How to Create New Project in Android Studio. The code can be implemented in both Java and Kotlin Programming Language for Android.

Step 2: Working with the activity_main.xml File

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <!-- syntax for HorizontalScrollView -->
    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginBottom="1dp"
        android:foregroundGravity="center_vertical">

        <!-- child view -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:foregroundGravity="center"
            android:gravity="center"
            android:orientation="horizontal">

            <!-- LinearLayout children -->
            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="15dp"
                android:text="GEEKS"
                android:textColor="#0F9D58"
                android:textSize="70sp" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="15dp"
                android:text="FOR"
                android:textColor="#0F9D58"
                android:textSize="70sp" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="15dp"
                android:text="GEEKS"
                android:textColor="#0F9D58"
                android:textSize="70sp" />

        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>