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.
Some photographs at curious-creature.org are licensed under Creative Commons Attribution-Noncommercial-Share Alike 2.0. All other photographs and all text at curious-creature.org are copyright Romain Guy and are presented for web browser viewing only.
All content © 2013 by Romain Guy Read more about me
(de l’art d’etre hors-sujet)
… 8h40pm … your working to late … :P
I might be wrong, but i think you forgot the android:fillViewport on the ScrollView in your exemple.
@Jumonline Yeah, true.
The attribute android:fillViewport=”true” should applied to the first LinearLayout that appears within the ScrollView.
Exemple:
…
…
@ 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…
[...] : http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/ fillViewport, [...]
“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”. ;)
I did forget fillViewport=”true” on the ScrollView tag. Sorry about that, it’s fixed now.
My mistake! Sorry..
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…
You guys (Android Team) make life so much easier!
You have helped put the Open in Open Source, Thanks again!
Peace,
Dan
I might be missing something, but in your case, wouldn’t layout_width=”fill_parent” on the ScrollView do the job ?
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 :)
[...] one does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
@Teo: You need to use a FastScroller, but it’s intended mostly for ListView.
[...] one does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
Helpfull for novice, but nothing new to devs.
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.
[...] one does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
[...] one does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
Good what you’re blogging about coding again. Photos are nice, but coding is nicer :D
@Barsum: I disagree, photos are nicer and more interesting :P
[...] one does have a simple answer, and our Romain Guy offers it in ScrollView?s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
[...] does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to [...]
[...] do I make a ScrollView behave?This one does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
[...] one does have a simple answer, and our Romain Guy offers it in ScrollView’s handy trick. It’s easy enough to do once you know how, which is harder to find out than you might think, [...]
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).
:-)
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
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 .
can’t seem to get this to work :(
key part of this is that textview has a weight of 1 doesn’t work without it
Very useful article.
add scroll view to one more Linearlayout (root) . then it will work fine
Thanking you sir!!