Open In App

Horizontal Scrollview in Android

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Since there is no change in the Java/Kotlin MainActivity File, we’ve only provided the XML File Code.

Output:



Last Updated : 20 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads