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:

ScrollView with short textScrollView with long text

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:

ScrollView without fillViewport

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.

33 Responses to “ScrollView’s handy trick”

  1. bactisme says:

    (de l’art d’etre hors-sujet)

    … 8h40pm … your working to late … :P

  2. Jumonline says:

    I might be wrong, but i think you forgot the android:fillViewport on the ScrollView in your exemple.

  3. drjunior says:

    @Jumonline Yeah, true.

    The attribute android:fillViewport=”true” should applied to the first LinearLayout that appears within the ScrollView.

    Exemple:

  4. Alocaly says:

    @ drjunior :
    Are you sure ?
    I understand this article as ‘You need to add android:fillViewport=”true” to your scrollview’.
    And setFillViewport is a method of scrollview, not of any view…

  5. Ciaran says:

    “probably to encourage the user to read the text” – I’ve only seen such a thing in the context of some kind of license agreement, so I think you mean “to force the user to scroll through all the text without reading it, before being allowed to press the button”. ;)

  6. Romain Guy says:

    I did forget fillViewport=”true” on the ScrollView tag. Sorry about that, it’s fixed now.

  7. drjunior says:

    My mistake! Sorry..

  8. Teo says:

    Is it possible to have ScrollView generate a prominent thumb thingie like you can see in the Contacts app? The android:scrollbarSize attribute doesn’t seem to work that way…

  9. Dan says:

    You guys (Android Team) make life so much easier!
    You have helped put the Open in Open Source, Thanks again!

    Peace,
    Dan

  10. sergiu says:

    I might be missing something, but in your case, wouldn’t layout_width=”fill_parent” on the ScrollView do the job ?

  11. Romain Guy says:

    The problem here is the height, not the width. And if you think layout_height=”fill_parent” would solve the issue, you did not read the article :)

  12. Romain Guy says:

    @Teo: You need to use a FastScroller, but it’s intended mostly for ListView.

  13. vovkab says:

    Helpfull for novice, but nothing new to devs.

  14. Felix says:

    This would’ve saved a lot of headaches if I had read it two months ago. I think I banged my head against this specific problem a whole day or so.

  15. Barsum says:

    Good what you’re blogging about coding again. Photos are nice, but coding is nicer :D

  16. Romain Guy says:

    @Barsum: I disagree, photos are nicer and more interesting :P

  17. I’ve been coding for several hours now and my eyes crossed have been doing backflips. So, I came to a big UI problem with a small fix (as it usually happens right).

    All I needed was android:orientation=”vertical”. I did not have that in my nested layout views UI XML code’s LinearLayout.

    Oh, the pain. I kept only seeing the first element in my ScrollView’s content.

    Lesson learned… and moving on.

    FWIW, thanks for the code, it got me the answer I needed (and I was about to wrap it up for the night without the solution).

    :-)

  18. Felix says:

    This actually took me 20 hours and 51 minutes to figure out (before your post), according to this StackOverflow question (which I ended up answering myself):

    http://stackoverflow.com/questions/2599837/linearlayout-not-expanding-inside-a-scrollview

  19. Braj says:

    I want to fix the height of ScrollView means in this example fix the button (Accept and Refuse) at the bottom of the Screen and ScrollView only applied within text area.When i scroll then only text area will be scrolled not the last button .

  20. schwiz says:

    can’t seem to get this to work :(

  21. schwiz says:

    key part of this is that textview has a weight of 1 doesn’t work without it

  22. anticafe says:

    Very useful article.

  23. add scroll view to one more Linearlayout (root) . then it will work fine

  24. Blundell says:

    Thanking you sir!!