Как создать кросс-кнопку в RelativeLayout

Question

Я собираюсь создать кнопку удаления креста для значка в RelativeLayout.

Он должен выглядеть следующим образом:

К сожалению, я не могу поместить кнопку удаления вне значка.

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

Если я добавлю несколько полей на кнопку удаления, кнопка будет меньше, но она все еще находится внутри значка.

<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"/> 

---

После добавить маржу значок ImageView, положение по-прежнему неправильно, если удалить layout_alignRight из удаления кнопки, это правильная позиция на левой стороне.

Answer 1

Вы не можете поместить вложенными вид вне родительского вида прямоугольника (на самом деле можно, но это будет обрезано с родительским видом прямоугольника).

Попробуйте сделать что-то вроде этого (добавить layout_margin к иконке):

<?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> 

Удалить андроида: layout_alignRight = «@ ID/значок» и макет будет немного лучше.