Search code examples
androidandroid-scrollview

ScrollView adds large space at the bottom


My main Activity has a number of buttons, that fit below each other on a large Tablet screen, but not on a smaller Phone screen. I added a ScrollView, so that the user can scroll down to the other buttons if the screen size requires it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:background="@drawable/bg"
          android:gravity="center_horizontal">

    <TextView
        android:id="@+id/trackSelectorText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"                
            android:gravity="center_horizontal">

        <Button                    
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="foo" />
        <!-- More buttons -->
        </LinearLayout>
    </ScrollView>
</LinearLayout>

This kinda works, however I have a large blank space below the last button (i.e. the ScrollView can scroll down too far). Both on an actual Tablet and on the emulator with a Phone configuration. If I center the inner LinearLayout (instead of center_horizontal), the space is evenly spread between the top and the bottom, which I don't want neither. How do I fix this layout?

I hope this image makes it more clear, imagine that the ScrollView has been completely scrolled down and showing the last buttons. The blank space I mean is the one below Button 6 on the right image:

enter image description here


Solution

  • Actually, it wasn't really related to the layout (unless I'm missing something). I tried commenting out the background attributed, and it suddenly worked. The background imaged (@drawable/bg) was simply too big and caused the scrolling. I converted the background into a 9-patch image, so it could be scaled automatically, and voilà, the additional space was gone. Still, if this would've been achievable without 9-patch, I'd still be interested to hear if this can be done in the XML file.