CODEWITHSUNDEEP
androidxmlbuttonscrollview
mikeappell
mikeappell

Reputation: 403

ScrollView keeps overlapping items below it

I have a ScrollView, and below it two horizontally aligned buttons. I want the buttons to be A) at the bottom of the window when the scrollview doesn't fill the entire window, and B) to stay below the scrollview when it IS larger than the window.

Currently, the buttons are successfully placed at the bottom of the screen when the scrollview isn't filling the whole window, but when the scrollview has too much data to fit in the window (e.g. when the phone is turned to landscape view) the scrollview data overlaps over the buttons.

I'm having some difficulty figuring out how to meet both of these conditions simultaneously just by using XML. Perhaps I've no choice but to introduce some programmatic checking? Anyway, here's my code:

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

    <TextView android:id="@+id/groupHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:textColor="#000000"
        android:textSize="25sp"
        android:text="@string/groupHeader" />     


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/groupHeader" >

        <LinearLayout
            android:layout_gravity="right"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/groupCreate" >
        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/groupcreate_button_new"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:text="@string/groupcreate_button_new" />

    <Button
        android:id="@+id/groupcreate_button_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="5dp"
        android:text="@string/groupcreate_button_next" />

</RelativeLayout>

Thanks for any and all assistance in advance.

EDIT:

I should probably mention that the LinearLayout "groupCreate" inside the ScrollView in question is created empty, but immediately has Views added to it programmatically, which is what causes it to take up space and sometimes overflow.

Upvotes: 1

Views: 4161

Answers (3)

blade
blade

Reputation: 853

I just encountered this problem myself. The solution of @A.R is working, but I feel is missing a bit of explanation. You have to use LinearLayout to be able to add android:layout_weight to the child views, which does all the "magic". Adding android:layout_weight = 1 to both views forces android to render both views, and excludes the overlapping. Example:

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/groupcreate_button_new"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

</LinearLayout>

Upvotes: 2

A.R.
A.R.

Reputation: 2641

Try this xml

I have made few changes in your xml, including id's and other stuff just to test on my device. Later you can change according to yours.

<LinearLayout 
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#FFFFFF"
       android:orientation="vertical">

    <TextView
        android:id="@+id/groupHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:gravity="center"
        android:text="Group Header"
        android:textColor="#000000"
        android:textSize="25sp" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        // You can put other View inside this scrollview

    </ScrollView>

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

        <Button
            android:id="@+id/groupcreate_button_new"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/groupcreate_button_next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next" />

    </LinearLayout>

</LinearLayout>

Hope this resolves your problem.

Upvotes: 1

stkent
stkent

Reputation: 20128

Check out the fillViewPort attribute of a ScrollView. Romain Guy has demonstrated its use well on his blog.

Upvotes: 1

Related Questions