Android fillViewport property of Scroll View | Tips Tricks

We will work with Android ScrollView’s fillViewport property in this tutorial.

In this post, I will cover the important information regarding scrollview’s fillViewport property.

I tried to get some view from android developer’s official site but they have written just one line : “Defines whether the scrollview should stretch its content to fill the viewport.”

Obviously I did not get enough idea from above single line about what actually fillViewport does for scroll view.

So I did a lot of research on internet to dig more information about this mysterious topic.

Main aim of this property is to take care about User Interaction when the total height of scrollview is less than the height of the device’s screen size.

Let us understand this with the help of the example.

So create a new project in the android studio.

Step 1. Insert long string

In the res->values->strings.xml file, add the below line

Above is the long text which will give plenty of height to our scroll view.

Now, full source code for strings.xml file is looking like the below file

First string holds the app name.

Second is the short text and third one is the long text. We will see the main usage of the fillViewport with the help of the short and long text.

Step 2. Main XML file

In the activity_main.xml file, add the below source code

The root tag of this layout is the linearlayout.

Then it’s child is the scroll view. Here, our main code starts.

Inside this scroll view, there is one child which is linearlayout with vertical orientation.

First child of this linearlayout is the text view. This textview will contain small or long texts.

Now above code will make below preview with

    long text and fillViewport = “false”

android fillviewport

Now in the code of activity_main.xml file, set the fillViewport = true.

So now we have below case

          long text and fillViewport = “true”

From the above two cases, we can conclude that if the height of the scroll view is more than the height of the device’s screen size then the value of fillViewport in the scroll view does not matter.

So we are left with two cases. 1. short text with fillViewport = false and 2. short text with fillViewport = true

Now in the source code of activity_main.xml file, make two changes.

Change the text from long text to short text and set the fillViewport as false.

Now the code block of activity_main.xml file is as the below

So our new case as :

           short text and fillViewport = “false”

Output for this case is as the following image

android fillviewport
Here is the problem exists. We have scroll view with match_parent height but still, two buttons which want to keep at the bottom, are right below the small text.

It does mean that the height of scroll view is considered as wrap_content even if the value of android:layout_height is match_parent.

fillViewport will help us in this situation. In the code of activity_main.xml file, just change the fillViewport to true.

So the case is now

          short text and fillViewport = “true”

See the following image which is the output of above case

And you can see the magic of fillViewport in the above image. Height of the scroll view is now full and both the buttons are at the bottom.

One important thing

Look at the below code

Here is the linearlayout with horizontal orientation.

Two buttons are the children of this linearlayout. We want these two buttons at the bottom.

So make sure below things to use fillViewport properly.

  1. android:layout_height for linearlayout must be “match_parent
  2. android:gravity in linearlayout must be “bottom
  3. fillviewport  in <ScrollView> must be “true

Thus, we have seen that fillView port allows scroll view to extend it’s height equals to the full height of device screen’s height in the cases when the child of scroll view has less height.

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *