Scrollview extends beyond screen bottom

Question

I suddenly have the problem that Scrollview extends beyond the bottom of the screen so that even if you scroll all the way down it does not show all its content. The XML is:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="#FFBBBBBB"
        android:orientation="vertical" >
        <View
            android:layout_width="100dp"
            android:layout_height="300dp"
            android:layout_margin="15dp"
            android:layout_gravity="center_horizontal"
            android:background="#FFDDDDFF"/>
        <View
            android:layout_width="100dp"
            android:layout_height="300dp"
            android:layout_margin="15dp"
            android:layout_gravity="center_horizontal"
            android:background="#FFDDDDFF"/>
    </LinearLayout>
</ScrollView>

It doesn't get any simpler than that. Once you have scrolled all the way down (as indicated by the shape of the scroller) you should see the bottom white margin but instead this is what it looks like:

bottom of the scrollview

Compare with the top:

top of the scrollview

The bottom should look like the top, only reversed. This happens in the emulator, on real devices and in pretty much every Android version I have tried. I am at a loss as to what I am doing wrong (if anything...).

Please no guesses and no shooting from the hip! Only tested answers. I wasted enough time on this already as it is. Thanks.

score 10 · Answer 1 · edited May 23 '17 at 10:30

After wasting much time in dead alleys I was finally put on the right track by this other SO thread: the issue was the layout margin on the LinearLayout. Apparently ScrollView doesn't like that, just as it doesn't like its child to be centered (an issue flagged by many other people but not my problem here) and who knows what else. Very choosy widget. It's issues like this that make me reconsider my commitment to Android: it's just too time-consuming relative to alternative platforms and, even if you enjoy the challenge, time is money.

Anyway, for the benefit of those who will flop here later, here is a side-by-side demonstration of a broken layout (a simpler version of the one above) on the left and a working one on the right. The trick is to emulate the verboten margin with padding on an extra container.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#00FFFF"
    android:orientation="horizontal"
    android:baselineAligned="false">
    <ScrollView        
        android:layout_width="0dp"
        android:layout_weight="1"    
        android:layout_height="match_parent"
        android:background="#FFFFFFFF">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:background="#FFBBBB22"
            android:orientation="vertical">
            <View
                android:layout_width="100dp"
                android:layout_height="1000dp"
                android:layout_margin="15dp"
                android:layout_gravity="center_horizontal"
                android:background="#FFDDDDFF"/>
        </LinearLayout>
    </ScrollView>
    <View 
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#FF000000"/>
    <ScrolllView 
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:background="#FFFFFFFF">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp"
            android:background="#FFFFFF"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFBBBB22"
                android:orientation="vertical">
                <View
                    android:layout_width="100dp"
                    android:layout_height="1000dp"
                    android:layout_margin="15dp"
                    android:layout_gravity="center_horizontal"
                    android:background="#FFDDDDFF"/>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

score 0 · Answer 2 · answered Jun 02 '13 at 08:05

try putting a padding on the bottom of the scroll view, so that you see a white line at the bottom - your view indeed does scroll all the way down , i tried it with this code and the result is this:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:background="#FFFFFFFF"
    android:padding="5dp" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    android:background="#FFBBBBBB"
    android:orientation="vertical" >

    <View
        android:layout_width="100dp"
        android:layout_height="1500dp"
        android:layout_gravity="center_horizontal"
        android:layout_margin="15dp"
        android:background="#FFDDDDFF" />

    <View
        android:layout_width="100dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal"
        android:layout_margin="15dp"
        android:background="#FFDDDDFF" />

    <View
        android:layout_width="100dp"
        android:layout_height="10dp"
        android:layout_gravity="center_horizontal"
        android:layout_margin="15dp"
        android:background="#FF00FF00" />
</LinearLayout>

enter image description here

Once can indeed try to play games like that but it's a hack, not a true solution. — olefevre, Jun 02 '13 at 16:33
PS: Seeing some white at the bottom isn't an end in itself! Since there is a margin on all sides of the LinearLayout, seeing the bottom margin is the sign that you have truly reached bottom; that's all. — olefevre, Jun 02 '13 at 17:00

Mosius · Answer 3 · 2018-01-07T09:47:16.460

Just try putting the LinearLayout inside another one Like this:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:background="#FFBBBBBB"
            android:orientation="vertical">

            <View
                android:layout_width="100dp"
                android:layout_height="300dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="15dp"
                android:background="#FFDDDDFF" />

            <View
                android:layout_width="100dp"
                android:layout_height="300dp"
                android:layout_gravity="center_horizontal"
                android:layout_margin="15dp"
                android:background="#FFDDDDFF" />
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Scrollview extends beyond screen bottom

3 Answers3

Linked