How do you place an item behind another item in android?

Question

I'd like to place an ImageView behind an ImageButton. What's the best way to go about doing this?

Could I get a comment on the -1? – Charles W Jun 19 '14 at 02:21 — Charles W, Jun 19 '14 at 02:21

score 3 · Accepted Answer · answered Jun 19 '14 at 02:26

I believe the easiest way to do this is to wrap both the ImageView and ImageButton in a FrameLayout. eg:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/your_image" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" />
</FrameLayout>

score 1 · Answer 2 · answered Jun 19 '14 at 02:26

1

You can overlap views in certain layouts (e.g. FrameLayout, RelativeLayout).

Just place both views in the xml layout, so that the overlap (e.g. for FrameLayout, both with width and height as match_parent). The last one you add goes on top.

answered Jun 19 '14 at 02:26

matiash

54,791
16
125
154

score 0 · Answer 3 · edited May 23 '17 at 12:23

The easiest way is to use an ImageButton only.

ImageButton has a background attribute for the background image

and a src attribute for the image in the foreground.

See this existing example on StackOverflow.

<ImageButton
    android:id="@+id/ImageButton01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/album_icon"
    android:background="@drawable/round_button" />

enter image description here

score 0 · Answer 4 · answered Jun 19 '14 at 02:31

Alternatively you can use a RelativeLayout like matiash said:

Here's an example code for a custom header for a navigation drawer containing your profile facebook picture

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:facebook="http://schemas.android.com/apk/res-auto"
android:id="@+id/customHeader"
android:layout_width="match_parent" android:layout_height="match_parent">

 <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/green_gradient"/>

<com.facebook.widget.ProfilePictureView
    android:id="@+id/leftPic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    facebook:preset_size="small"
    android:paddingBottom="4dp"
    android:paddingLeft="3dp"
    />

</RelativeLayout>

enter image description here

RESULT

You can add an ImageButton where you would like, just add the following code into your layout

<ImageButton
android:id="@+id/myImageButton
android:layout_width="SET YOUR WIDTH"
android:layout_height="SET YOUR HEIGHT"
android:background="ADD YOUR BACKGROUND" />

How do you place an item behind another item in android?

4 Answers4