In this tutorial, we will learn ScrollView and Horizontal ScrollView in android.

In Android, ScrollView is a view group used to create a vertical scroll view. The scroll view contains only a single direct child. To place multiple views in a scroll view, we need to make a group of views (such as LinearLayout) as a direct child, and then define multiple views in it.

Note: In Android, ScrollView is used by default to scroll items in the vertical direction. If you want to scroll items horizontally, you need to implement a horizontal scrollView.

vertical ScrollView code -By default

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </ScrollView>

What is Horizontal ScrollView?

The horizontal scroll view provided by the android.widget.HorizontalScrollView class. Used to scroll the subviews horizontally.

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </HorizontalScrollView>

Vertical ScrollView Example:

• A vertical LinearLayout has numerous child components in this example. As can be seen, it requires a space with sufficient height. However, because the screen size is limited, it is necessary to use a ScrollView.

File: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_foreground" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_foreground" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />


        </LinearLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

File: Mainactivity.kt

package com.sagar.scrollviewandhorizontalscrollview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

    }
}

Horizontal ScrollView Example:

Preview

File: activity_main.xml

–> In activity_main.xml add horizontalScrollView inside constraintlayout and linear layout in horizontalScrollView and after that add ImageViews in a linear layout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="210dp"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_foreground" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_foreground" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher_background" />


        </LinearLayout>
    </HorizontalScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

File: MainActivity.kt

–> In MainActivity.kt file we have done nothing so keep it as it is.

package com.sagar.scrollviewandhorizontalscrollview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

    }
}

• We hope that this guide will assist you in quickly creating a simple Scrollview Android app. If you have any problems, please post them in the comments section and we will gladly assist you.