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.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

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)

android_dvlprs

Learn Android development via comics... join us on Instagram!

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

Committing but forgetting to push the code. #andro

#android #androidusers #androiddeveloper #androidm

This feels so TRUE! 😢 #android #androidusers #a

Deploying my app now... #android #androidusers #an

No Java in my project dear God! #android #androidu

There are two types of Android Developer #android

When i choose Kotlin multiplatform over React Nati

Which theme do you use amigo? #android #androiduse

Omg! I can't keep repeating this... xoxo #android

This is impossible babe! #android #androidusers #a

Bruh... how old are you? #android #androidusers #a

Is it only me? #android #flutter #jetpack

Instagram post 18032791087441866

#android #androidusers #androiddeveloper #androidm

#android #androidusers #androiddeveloper #androidm

Load More Follow on Instagram