How to create cross button in RelativeLayout

Question

I am going to create a cross delete button for an icon in RelativeLayout.

It should look like this:

Unfortunately I can't place the delete button outside the icon.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/icon"
        android:src="@mipmap/delete_button"/>
</RelativeLayout>

If I add some margin to the delete button, the button will be smaller but it is still inside the icon.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@id/icon"
    android:layout_marginLeft="45dp"
    android:src="@mipmap/delete_button"/>

---

After I add margin to icon imageview, the position still incorrect, if I delete the layout_alignRight of delete button, it is right position on the left.

Answer 1

You can't place nested view outside of the parent view rectangle (actually you can, but it will be cropped with parent view rectangle).

Try to do something like this (add layout_margin to the icon):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
<!-- 1st solution with RelativeLayout (icon size 32x32dip, margin 10dip, layout w(h) = icon size + 2 * margin) -->
<RelativeLayout android:layout_width="52dip"
                android:layout_height="52dip">
    <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dip"
            android:src="@drawable/ic_action_add"/>

    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:src="@drawable/star"/>
</RelativeLayout>
<!-- 2nd solution with FrameLayout -->
<FrameLayout android:layout_width="wrap_content"
             android:layout_height="wrap_content">
    <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dip"
            android:src="@drawable/ic_action_add"/>

    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:src="@drawable/star"/>
</FrameLayout>
</LinearLayout>

Remove android:layout_alignRight="@id/icon" and your layout will be a little bit better.