I can't get the button to the bottom of the layout

Question

I'm trying to get the button to the bottom the layout, and it just won't work... The button is displaying it self on the image that should be above it.

Here is the xml code:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    android:layout_gravity="center"
     >
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
         >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="28dp"
            android:layout_marginTop="32dp" />

        <TextView
            android:id="@+id/txtAppName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageView1"
            android:layout_marginLeft="22dp"
            android:layout_toRightOf="@+id/imageView1"
            android:text=""
            android:textSize="36px"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtAppAuthor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/txtAppName"
            android:layout_below="@+id/txtAppName"
            android:layout_marginTop="5px"
            android:text=""
            android:textSize="24px"
            android:textStyle="normal" />


        <TextView
            android:id="@+id/txtAppDesc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imageView1"
            android:layout_below="@+id/imageView1"
            android:layout_marginTop="20dp"
            android:maxHeight="350px"
            android:text=""
            android:width="600px"
            android:maxLines="10"
            android:scrollbars = "vertical"
             /> 

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/txtAppDesc"
            android:layout_below="@+id/txtAppDesc"
            android:layout_marginTop="30dp" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageView2"
            android:layout_toRightOf="@+id/imageView2" />


        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageView3"
            android:layout_toRightOf="@+id/imageView3"
            android:visibility="visible" />


        <Button
            android:id="@+id/btnInstall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_alignBottom="@+id/imageview4"
            android:text="Download &amp; Install" />

    </RelativeLayout>
</ScrollView>

And the result is:

enter image description here

Thanx upfront.

AMerle · Accepted Answer · 2012-07-13T16:28:39.223

You used android:layout_alignBottom="@+id/imageview4"

This means you align the bottom of your button with the bottom of your image.

You have to use android:layout_below="@+id/imageview4"

EDIT: I don't say this is the best solution, because of multiple layouts (for optimisation...) but this should work:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/ScrollView01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:fillViewport="true"
            android:layout_gravity="center"
        >
    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">


        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center"
                >

            <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginLeft="28dp"
                    android:layout_marginTop="32dp"/>

            <TextView
                    android:id="@+id/txtAppName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@+id/imageView1"
                    android:layout_marginLeft="22dp"
                    android:layout_toRightOf="@+id/imageView1"
                    android:text=""
                    android:textSize="36px"
                    android:textStyle="bold"/>

            <TextView
                    android:id="@+id/txtAppAuthor"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/txtAppName"
                    android:layout_below="@+id/txtAppName"
                    android:layout_marginTop="5px"
                    android:text=""
                    android:textSize="24px"
                    android:textStyle="normal"/>


            <TextView
                    android:id="@+id/txtAppDesc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/imageView1"
                    android:layout_below="@+id/imageView1"
                    android:layout_marginTop="20dp"
                    android:maxHeight="350px"
                    android:text=""
                    android:width="600px"
                    android:maxLines="10"
                    android:scrollbars="vertical"
                    />

            <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignLeft="@+id/txtAppDesc"
                    android:layout_below="@+id/txtAppDesc"
                    android:layout_marginTop="30dp"/>

            <ImageView
                    android:id="@+id/imageView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@+id/imageView2"
                    android:layout_toRightOf="@+id/imageView2"/>


            <ImageView
                    android:id="@+id/imageView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@+id/imageView3"
                    android:layout_toRightOf="@+id/imageView3"
                    android:visibility="visible"/>

        </RelativeLayout>


        <Button
                android:id="@+id/btnInstall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Download &amp; Install"/>
    </LinearLayout>
</ScrollView>

I added a linear layout in which I put the content, and the button. Hope this will work.

Thanx for you help, but - I tried it right now and it still doesn't work, the result is the same (I added a screenshot) — Eli Revah, Jul 13 '12 at 16:10
Remove the android:layout_alignParentBottom="true" and use android:layout_below="@+id/imageview4". — Scen, Jul 13 '12 at 16:11
Still doesn't work, now the button is at the top of the layout, here is a screenshot: http://img816.imageshack.us/img816/35/resultl.png — Eli Revah, Jul 13 '12 at 16:14
@EliRevah I edited my code. Hope this will work. tell me if not — AMerle, Jul 13 '12 at 16:29

score 1 · Answer 2 · answered Jul 13 '12 at 16:17

Do you just want the image that the button is over to shrink in order to make room for it? If so, you need to put the Imageview that contains that image as the very last item in your relative layout. It's going to allocate space for everything but the image, and then give the remaining space to the image, which is why it needs to be last.

Also, I suggest giving your imageViews more informative names than "imageView#", since it's kind of difficult to tell which is which.

And I'm saying it's hard to tell you what to change if I can't tell the imageViews apart. — Michael, Jul 13 '12 at 16:21

score 0 · Answer 3 · edited May 23 '17 at 12:19

You might want to wrap you images in a HorizontalScrollView to maintain full height and width of all your images. I changed a lot of the ViewGroups' widths and heights to accommodate the HorizontalScrollView, finally I set the Button below the images:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:fillViewport="true" >

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="28dp"
            android:layout_marginTop="32dp" />

        <TextView
            android:id="@+id/txtAppName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imageView1"
            android:layout_marginLeft="22dp"
            android:layout_toRightOf="@+id/imageView1"
            android:text=""
            android:textSize="36px"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtAppAuthor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/txtAppName"
            android:layout_below="@+id/txtAppName"
            android:layout_marginTop="5px"
            android:text=""
            android:textSize="24px"
            android:textStyle="normal" />

        <TextView
            android:id="@+id/txtAppDesc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imageView1"
            android:layout_below="@+id/imageView1"
            android:layout_marginTop="20dp"
            android:maxHeight="350px"
            android:maxLines="10"
            android:scrollbars="vertical"
            android:text=""
            android:width="600px" />

        <HorizontalScrollView
            android:id="@+id/images"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txtAppDesc"
            android:layout_marginTop="30dp" >

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

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <ImageView
                    android:id="@+id/imageView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <ImageView
                    android:id="@+id/imageView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>
        </HorizontalScrollView>

        <Button
            android:id="@+id/btnInstall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/images"
            android:layout_centerHorizontal="true"
            android:text="Download &amp; Install" />
    </RelativeLayout>

</ScrollView>

Understand that nesting a HorizontalScrollView inside a ScrollView (or vica versa) does not create a smooth scrolling effect in the x & y directions simultaneously. But you can create this effect as discussed here: Scrollview vertical and horizontal in android.

I can't get the button to the bottom of the layout

3 Answers3