How to place buttons over Image in android?

Devu Soman picture Devu Soman · Jan 8, 2013 · Viewed 29.9k times · Source

I want to create a custom view like this.enter image description here

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

Talha picture Talha · Jan 8, 2013

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"

enter image description here

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>