Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scrollview extends beyond screen bottom

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.

like image 897
olefevre Avatar asked Jun 02 '13 06:06

olefevre


1 Answers

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>
like image 79
olefevre Avatar answered Nov 04 '22 14:11

olefevre