android scrollview

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

android scrollview
android 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

android scrollview
android 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)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.