How To Place Buttons Over Image In Android?

Question

I want to create a custom view like this. I tried the following

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"

enter image description here

Example layout

Baca Juga

<RelativeLayoutandroid:layout_width="300dp"android:layout_height="300dp"><ImageViewandroid:id="@+id/img"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#ffaadd"android:layout_margin="20dp" /><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_alignParentRight="true"android:text="btn1" /><Buttonandroid: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>

snapshot

Solution 3:

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

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

Solution 5:

This solved for me

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns: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" ><ImageViewandroid: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" /><ImageButtonandroid: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>

Android Coder