Android Layout not working as expected

Question

I am having an issue with my layout, here is my code for the layout:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ScrollView
            android:id="@+id/Scroll"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TableLayout
                android:id="@+id/Table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            </TableLayout>
        </ScrollView>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"

        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <ImageView
            android:id="@+id/BookingStatus"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/BookingBtn"
            android:src="@drawable/statusbarcomplete"/>

        <Button
            android:id="@+id/BookingBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/Red"
            android:text="Place My Booking"
            android:textAllCaps="true"
            android:textColor="@color/White"
            android:textStyle="bold"/>
    </RelativeLayout>

</RelativeLayout>

Here is how it looks on a small device:

Here is how it looks on a large device

Now as you can see the issue is with the small device, the button and the image seem to "float" over the top of the layout whereas I want them on the buttom of the layout at all times. Therefor the user will need to scroll on a small device BUT the image and the button at the bottom will ALWAYS be at the bottom and ALWAYS visible! The scrollview will take up the rest of the screen so that the user can see the information.

You can view the full code for the xml file here. I deleted all of the tablerows to keep this thread tidy and because the code was over 300 lines

Answer 1

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



        <ScrollView
            android:id="@+id/Scroll"
            android:layout_above="@+id/relative"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:paddingBottom="10dp"
            android:orientation="vertical" >

            <TableLayout
                android:id="@+id/Table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TableLayout>
        </ScrollView>

    <LinearLayout
        android:id="@+id/relative"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true" >

        <ImageView
            android:id="@+id/BookingStatus"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/BookingBtn" />

        <Button
            android:id="@+id/BookingBtn"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@color/Red"
            android:text="Place My Booking"
            android:textAllCaps="true"
            android:textColor="@color/White"
            android:textStyle="bold" />
    </LinearLayout>

</RelativeLayout>

Try this. Just place the scrollview above the relative layout containing image and button.

Answer 2

Try with this.. place this in last RelativeLayout.

android:layout_gravity="bottom"