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

 android_layout_width="fill_parent"
 android_layout_height="wrap_content"
>
<LinearLayout 
 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 were 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 

 android_layout_width="fill_parent"
 android_layout_height="wrap_content"
>
<LinearLayout 
 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".

Related Posts by Categories