Android ScrollView Examples

May 05, 2017 by Srinivas

If you have so many widgets in a layout hierarchy that they can’t fit or be displayed on the screen, you should use ScrollView. ScrollView allows users to scroll view hierarchy allowing users to see all widgets in a view hierarchy when view hierarchy is longer than the physical display.

ScrollView is a subclass of frame layout. As frame layout allows only one child, you can place only one child view in scroll view. Child of scroll view can contain entire view hierarchy.

For just TextView and ListView, you don’t need to use scroll view as scrolling is taken care of by those views themselves.

Vertical scrolling can be created using ScrollView, but to create horizontal scrolling you need to use HorizontalScrollView.

To create nested scrolling, meaning parent view and child view can have separate scrolling in a layout, you need to use NestedScrollView.

ScrollView and ConstraintLayout Example

Below layout shows scroll view with constraint layout. To know more about constraint layout, you can read constraint layout article.

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="com.zoftino.androidui.ActivityScroll">
    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button One"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="32dp"></Button>
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Two"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"></Button>
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Three"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button3"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"></Button>
        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Four"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button4"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"></Button>
        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Five"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button6"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"></Button>
        <Button
            android:id="@+id/button8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Six"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button7"></Button>
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Seven"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button8" ></Button>
        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Eight"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button2"></Button>
        <Button
            android:id="@+id/button10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Nine"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/button9"></Button>
    </android.support.constraint.ConstraintLayout>
</ScrollView>

ScrollView fillViewport Property

ScrollView occupies required space on the screen to display its child views; it doesn’t consider entire physical screen or view port when view hierarchy is smaller than the physical display. To change this behavior, you need to set fillViewport property of scrollview to true.

Below screen shows how scroll view displays when fillViewport set to true and false.

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    android:fillViewport="true"
    tools:context="com.zoftino.androidui.ActivityScroll">
    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button One"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="8dp"></Button>
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Two"
            android:layout_marginLeft="8dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/button"
            android:layout_marginRight="8dp"
            app:layout_constraintRight_toRightOf="parent"></Button>
    </android.support.constraint.ConstraintLayout>
</ScrollView>

HorizontalScrollView with ConstraintLayout Example

If you want to enable horizontal scrolling in your layout, you need to use HorizontalScrollView. Below layout shows how to use horizontalscrollview with constraintlayout. I first added two buttons to layout with required constraints using layout editor then added additional buttons with same type of constraint by editing layout xml.

horizontal scroll view constraint layout example

 <?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView 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="com.zoftino.androidui.ActivityScroll">
    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button One"
            app:layout_constraintLeft_toRightOf="parent"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"></Button>
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Two"
            app:layout_constraintLeft_toRightOf="@+id/button"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"></Button>
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Three"
            app:layout_constraintLeft_toRightOf="@+id/button3"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"></Button>
        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Four"
            app:layout_constraintLeft_toRightOf="@+id/button4"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"></Button>
        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Five"
            app:layout_constraintLeft_toRightOf="@+id/button6"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"></Button>
        <Button
            android:id="@+id/button8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Six"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/button7"></Button>
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Seven"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/button8" ></Button>
    </android.support.constraint.ConstraintLayout>
</HorizontalScrollView>

NestedScrollView Example

To enable scrolling of view hierarchy within the scrolling of parent view, you need to use NestedScrollView. Below example layout shows how to use NestedScrollView.

Below are parent scrolling and child view scrolling screens.

nestedscrollview parent scrolling example

nestedscrollview child scrolling example

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="com.zoftino.androidui.ActivityScroll">
    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
        android:layout_height="128dp"
        android:layout_marginTop="64dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button One"
            android:layout_marginLeft="8dp"></Button>
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Two"
            android:layout_marginLeft="8dp"></Button>
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Three"
            android:layout_marginLeft="8dp"></Button>
        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button Four"
            android:layout_marginLeft="8dp"></Button>
    </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
        <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
            android:layout_height="128dp"
            android:layout_marginTop="64dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <Button
                    android:id="@+id/button20"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button One"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button23"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Two"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button24"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Three"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button26"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Four"
                    android:layout_marginLeft="8dp"></Button>
        </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
        <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
            android:layout_height="128dp"
            android:layout_marginTop="64dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <Button
                    android:id="@+id/button30"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button One"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button33"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Two"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button34"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Three"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button36"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Four"
                    android:layout_marginLeft="8dp"></Button>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
        <android.support.v4.widget.NestedScrollView android:layout_width="match_parent"
            android:layout_height="128dp"
            android:layout_marginTop="64dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <Button
                    android:id="@+id/button40"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button One"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button43"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Two"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button44"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Three"
                    android:layout_marginLeft="8dp"></Button>
                <Button
                    android:id="@+id/button46"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Button Four"
                    android:layout_marginLeft="8dp"></Button>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
</LinearLayout>
</ScrollView>