ScrollView’s handy trick

ScrollView is one of Android’s most commonly used widget and is also one of the easiest to use. When something is too big to fit on screen, drop it inside a ScrollView and you’re done. You can’t even get it wrong since a ScrollView accepts only one child at a time. There is, however, one use case a bit trickier to get right; unless you’ve carefully read the documentation.

Let’s imagine that your application needs to display a piece of text and a couple of buttons. The length of the text can vary and be longer or shorter than the screen. You want to put the text inside a scroll view and you want the buttons to scroll along with the text, probably to encourage the user to read the text before clicking any of the button. Depending on the length of the text, your application would look like one of the following screenshots:

In attempt to achieve this effect, I have seen several Android developers try to set the height of the view inside the scroll view to fill_parent. Doing so does not work and leads to the following result:

To understand this result, you must remember that android:layout_height=”fill_parent” means “set the height to the height of the parent.” This is obviously not what you want when using a ScrollView. After all, the ScrollView would become useless if its content was always as tall as itself. To work around this, you need to use the ScrollView attribute called android:fillViewport. When set to true, this attribute causes the scroll view’s child to expand to the height of the ScrollView if needed. When the child is taller than the ScrollView, the attribute has no effect.

The XML I wrote to create the correct version of this example can be found below. In line 32, I’ve set the android:layout_weight of the TextView to 1.0. By doing so I am forcing the text to use the available empty space when it is shorter than the ScrollView. This can only work when android:fillViewport=”true” is set on the scroll view.

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="6dip"
            android:paddingRight="6dip"
            android:paddingTop="6dip"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Welcome to My Application" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dip"
            android:background="#ff106510"
            android:layout_marginLeft="6dip"
            android:layout_marginRight="6dip"
            android:layout_marginTop="6dip"
            android:layout_marginBottom="12dip" />

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"

            android:paddingLeft="6dip"
            android:paddingRight="6dip"
            android:paddingBottom="6dip"

            android:text="@string/hello" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"

            android:background="@android:drawable/bottom_bar"
            android:gravity="center_vertical">
            <Button
                android:layout_width="0dip"
                android:layout_weight="1.0"
                android:layout_height="wrap_content" 

                android:text="Accept" />
            <Button
                android:layout_width="0dip"
                android:layout_weight="1.0"
                android:layout_height="wrap_content" 

                android:text="Refuse" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Last but not least, I realized while writing this that the documentation of ScrollView does not mention the fillViewport XML attribute, even though it shows the equivalent Java API, setFillViewport(). This is a stupid mistake on my part that I will fix next week for a future release of Android. In the meantime, please accept my apologies :) just fixed.