How to place buttons over Image in android?

Question

I want to create a custom view like this.

I tried the following

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/customView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/sample_image" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|top"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:text="Button" />

</FrameLayout>

How can i create a view like this? How can i place buttons over imageview like this?

Thanks in Advance

Answer 1

you can try to use relative layout to do this,

for btn1;

android:layout_alignParentTop="true"
android:layout_alignParentRight="true"

for btn1;

android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" 

[EDIT 1]

to give space for button use margin, android:layout_margin="20dp"

Example layout

<RelativeLayout android:layout_width="300dp"
    android:layout_height="300dp">


    <ImageView
        android:id="@+id/img"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffaadd" 
        android:layout_margin="20dp" />


    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="btn1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"       
        android:text="btn2" />

</RelativeLayout>

Answer 2

Use a RelativeLayout. This will allow you to have different Views overlap on the screen.

Answer 3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_weight="1"
    android:padding="60dp"
    android:src="@drawable/abs__ab_stacked_solid_dark_holo" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button1"
    android:layout_alignBottom="@+id/button1"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="30dp"
    android:background="@drawable/ic_launcher" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="32dp"
    android:layout_marginTop="102dp"
    android:background="@drawable/ic_launcher" />
</RelativeLayout>

Answer 4

Here is a tutorial I always use http://www.learn-android.com/2010/01/05/android-layout-tutorial/ You should find what you need. It is good explained, so you shouldn't have any problems.

Answer 5

This solved for me

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src = "@drawable/basic"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/button1"
        android:layout_alignEnd="@+id/button1" />


    <ImageButton
        android:id="@+id/button1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="btn1"
        android:background="@drawable/ic_cancel_black"/>



 </RelativeLayout>

Answer 6

This is my solution programatically, for diferent size of devices. I have three buttons that i have to positioning in the right place of an image 1080x1920 on positions (157,927), 387,927), (617,927)

    final ImageView iv = (ImageView)findViewById( R.id.imageView );
    iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        public void onGlobalLayout() {
            // Once data has been obtained, this listener is no longer needed, so remove it...
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            } else {
                iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
            RectF bounds = new RectF();
            Drawable drawable = iv.getDrawable();
            if (drawable != null) {
                iv.getImageMatrix().mapRect(bounds, new RectF(drawable.getBounds()));
            }
            float x = bounds.left;
            float y = bounds.top;
            float new_width = bounds.right - x;
            float new_height = bounds.bottom - y;
            int original_width = 1080;
            int original_height = 1920;

            int x1 = (int) (x + (new_width*157/original_width));
            int x2 = (int) (x + (new_width*387/original_width));
            int x3 = (int) (x + (new_width*617/original_width));
            int newY = (int) (y + (new_height*927/original_height));

            enroll.setX(x1);
            ccfront.setX(x2);
            verify.setX(x3);
            enroll.setY(newY);
            ccfront.setY(newY);
            verify.setY(newY);
        }
    });