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.
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 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>
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.
<?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>
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.
<?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>