Android ScrollView Example | Scrolling Widgets – Vertically or Horizontally

The Android ScrollView is an important widget in Android Studio that can help you arrange all other widgets in a layout when they can’t fit in the visible area of the screen.

Android ScrollView Types

There are two types of ScrollView that can help you arrange widgets:

1. Vertical ScrollView: To scroll widgets vertically.
2. Horizontal ScrollView: To scroll widgets horizontally

Here is an example project we have built in which we are sharing XML codesfor both Horizontal and Vertical Scroll Views.

Vertical ScrollView

Note: Vertical ScrollView can have one one child layout, therefore you’ll notice in the code below that inside the <ScrollView> tab, we have LinearLayout with vertical orientation having other LinearLayouts with further information.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#14000000"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbarSize="0dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="News of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read news of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="Jokes of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read jokes of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="Toungue Twist of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read TT of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="News of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read news of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="News of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read news of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

    </LinearLayout>
    
</ScrollView>

We’ve also used ScrollBarSize attribute to determine the size of scrollBar. (Set to 0dp in the example above)

Learn more about styling your Buttons using XML Codes here.

Horizontal ScrollView

Note: Just like the Vertical ScrollView, the Horizontal ScrollView can have one one child layout, therefore you’ll notice in the code below that inside the <ScrollView> tab, we have LinearLayout with horizontal orientation having other LinearLayouts with further information.

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#14000000"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarSize="0dp"
    tools:context=".MainActivity">

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

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="News of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read news of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="Jokes of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read jokes of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="Toungue Twist of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read TT of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="News of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read news of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

        <LinearLayout
            android:background="#FFFFFF"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="30sp"
                android:layout_margin="10dp"
                android:text="News of the day"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:layout_marginBottom="10dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:textStyle="bold"
                android:text="Updated 12 hrs ago"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="17sp"
                android:layout_margin="10dp"
                android:autoLink="web"
                android:text="Read news of the Day"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Visit Blog"
                android:textAllCaps="false"
                android:layout_gravity="end"
                android:paddingStart="20dp"
                android:paddingEnd="20dp"
                android:layout_margin="10dp"/>

        </LinearLayout>

    </LinearLayout>

</HorizontalScrollView>

We’ve also used ScrollBarSize attribute to determine the size of scrollBar. (Set to 0dp in example above)