Android ScrollView

suppose that we use Linear or relative layouts to display lots of data. the data may span the size of the screen so that some of it may not appear.
to overcome this we use ScrollView which gives us a scrollable layout for large data.
Suppose that our activity displays a large number of controls or content like this layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />

    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 1"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 2"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 3"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 4"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 5"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 6"
    />
</LinearLayout>

This is a linear layout that displays a TextView with large text and some Buttons. As we can see, not all the buttons are displayed and that the layout does not fit in the device screen.

The solution to this problem is to use ScrollView as a container for the controls and a scroll bar to make the layout fit in the screen.

We will now change the layout with this code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />

    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 1"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 2"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 3"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 4"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 5"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 6"
    />
</LinearLayout>
</ScrollView>

As you can see the result is a scroll bar that we can use to see all the controls within the layout like this:

Remember, the ScrollView can have only one child control, so we can make a container (Linear, relative, Table Layouts) the child of the ScrollView and put all the controls inside this child.

So what do we do if we want to display this layout Horizontally ? In this case we're going to use another container which is HorizontalScrollView. This container acts the same as the ScrollView except that it scrolls child controls horizontally.

Now our layout will be like this:

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/txt"
    />

    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 1"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 2"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 3"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 4"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 5"
    />
    <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button 6"
    />
</LinearLayout>
</HorizontalScrollView>

In order to achive the Horizontal scrolling, we had to change the Orientation of the child LinearLayout to Horizontal.

You may have noticed that the scroll bar disappears (fades out) after scrolling, you can set the time interval in which the scroll bar fades out by setting this time interval (in milli-seconds) through the android:scrollbarFadeDuration property. To make the scroll bar always visible we set the time interval to zero: android:scrollbarFadeDuration="0".