How can I overlap a button over an ImageView?

Question

enter image description here

Hello, to achive a view like the image above that has an attached reomve button i have tried the following xml Linearlayout and setting its background a round image but to achive proportonate picture It would be better to use ImageView,

Sorry that my english is not so good but i just wanted to ask how can i achive this by using ImageView in place of LayoutBackground...

<LinearLayout
                android:id="@+id/imagePreview"
                android:layout_width="140dp"
                android:layout_height="140dp"
                android:background="@drawable/profile_image_holder"
                android:orientation="vertical"
                android:padding="0dp" >
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <Button
                        android:id="@+id/searchGroupButton"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_marginLeft="94dp"
                        android:layout_marginTop="5dp"
                        android:background="@drawable/icn_delete"
                        android:onClick="removeImage"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:paddingTop="5dp"
                        android:paddingBottom="0dp"
                        android:textColor="#fff" />
                </LinearLayout>
             </LinearLayout>

Example @ http://stackoverflow.com/questions/4182486/placing-overlappingz-index-a-view-above-another-view-in-android/4685019#4685019 — Raghunandan, Jul 15 '14 at 04:16

score 7 · Accepted Answer · answered Jul 15 '14 at 04:16

7

You can do that with a Relative Layout, just insert the two childs and position the elements as desired:

<RelativeLayout
    android:id="@+id/imagePreview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="0dp" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/yourImage"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/searchGroupButton"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="94dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/icn_delete"
        android:textColor="#fff" />

</RelativeLayout>

Hope it helps!

Regards!

answered Jul 15 '14 at 04:16

Martin Cazares

13,637
10
47
54

Since nothing is being layed-out relatively to anything, the same effect could also be achieved using `FrameLayout`, with the `ImageView` having a `layout_gravity="center"` and the button not specifying any layout params since views, by default, are in the top left corner. `FrameLayout` will be slightly more efficient at measuring and laying-out than the `RelativeLayout` – sddamico Jul 15 '14 at 04:20
That is a really good comment, indeed is another option but FrameLayout is not very device fragmentation friendly and this is just an example, he might come up with an anchor object or something more complicated eventually... – Martin Cazares Jul 15 '14 at 04:23
thanks,with this solution you made it clear to me the usage of relative Layouts in android – NavinRaj Pandey Jul 15 '14 at 04:26

score 1 · Answer 2 · answered Jul 15 '14 at 04:23

Try this way,hope this will help you to solve your problem.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="150dp"
    android:layout_height="150dp">

    <ImageView
        android:layout_width="140dp"
        android:layout_height="140dp" 
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"/>

    <Button
        android:id="@+id/searchGroupButton"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/ic_launcher"
        android:onClick="removeImage"
        android:layout_gravity="top|right"
        android:textColor="#fff" />

</FrameLayout>

How can I overlap a button over an ImageView?

2 Answers2