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

Solution 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>

Solution 2

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

Solution 3

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

Comments

[Devu Soman]

I want to show some part of the button out of imageview.Please notice the image added.