How to create a button on top of ImageView and align it to the bottom of the screen?

Question

I want to have a button on top of ImageView using my xml file. When I run this code, the button appears to the left hand side of the screen on top of other buttons.

Does anyone have any idea on what to do to have a button on TOP of ImageView but at the bottom of the screen.

So far I have the following:

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

    <ImageView
        android:id="@+id/filter_image_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_toRightOf="@id/filter_linear_layout" />

//this is the button I want to have on top of the ImageView
    <Button
        android:id="@+id/display_RGB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/button_blue_red_transluscent"
        android:text="@string/display_RGB"
        android:textColor="@android:color/white" />

</RelativeLayout>

Not too fussy as long as its somewhere at the bottom of the screen but in the center.

Answer 1

You can put them in their own RelativeLayout, then you can manipulate the location of the button relative to the ImageView quite easily.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_toRightOf="@id/filter_linear_layout" >

    <ImageView
        android:id="@+id/filter_image_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        />

    <Button
        android:id="@+id/display_RGB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_blue_red_transluscent"
        android:text="@string/display_RGB"
        android:textColor="@android:color/white"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/filter_image_view"
         />
</RelativeLayout>

If this is not what you are looking, you'll need to post a sample image of how it currently looks and how you wants it to look.

[Edit] Edited the XML layout. If you want the ImageView to center horizontally, add this to ImageView:

    android:layout_centerHorizontal="true"

And you'll probably want to add some spacing between ImageView and Button by adding this to Button:

    android:layout_marginTop="8dp"

Answer 2

Try this.

<Button
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:padding="16dip"
        android:text="hi"
        android:textColor="@color/black"
         />