How to place ImageButton properly aligned to the background image in Android?

Question

In Android UI design using XML, how is it possible to put an ImageButton to align exactly with the background of the activity xml file.

Suppose, I have two images, one acts as the background image for the activity, and the second one acts as the image button source.

This is the background image. http://i.stack.imgur.com/e1Ow5.png

This is the button image. http://i.stack.imgur.com/m0tUU.png

I will set the first image as background to the activity. My question is how will I properly place and align the second image,that is the button to be exactly inside the "central rectangle" of the background. The "central rectangle" is the place holder, and it can be anywhere in the screen.

Not: I tried using relative layout, but, couldn't really place the button depending on the background.

Edit:- Actually the rectangle and the rounded-rectangle at the center of the background is just a place-holder. It can be anything, even nothing. Or it can be anywhere. It might not be at the center. Consider the whole image, I need to put the button image where the place-holder is. That is my intention. Say for example , consider a radio application, where there is a turning button acting as volume rocker. Everything else in the image is the background, and the volume rocker might be a different image.

Answer 1

The answer is its impossible the way your are trying to do it.

What you want to do is cut the background up further so the button is centered.

So using your images as an example, here is how the view hierarchy would look

->FrameLayout1
---->Framelayout2
-------->Button

FrameLayout1 would be the background without the inner square

FrameLayout2 would be the inner square

Button would the button asset and placed centered in FrameLayout 2.

There are other techniques on top of this you will need to make it look pixel perfect, like using 9 patch drawables.

Answer 2

Considering you are trying out in landscape mode( your images seems so) You can try the following code.

bg : your background

img: your center image

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/img" />

</RelativeLayout>

Answer 3

    <?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" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/img_bg" />

    </RelativeLayout>

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

        <item android:drawable="@drawable/bg">
        </item>
        <item android:drawable="@drawable/fr">
        </item>

    </layer-list>

or

    <?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" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/bg" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignTop="@+id/imageView1"
            android:src="@drawable/fr" />

    </RelativeLayout>

bg.png and fr.png are transparent image with same height and width.