Icon layout help

Question

I'm trying to replicate Apple's layout of its app icons. I'm having trouble using <merge> and <include> as it doesn't seem to show up in the app when I run it.

Here's the merge part:

<Button android:id="@+id/deleteContact"
        android:text="X"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<TextView android:id="@+id/personName"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:gravity="bottom|right"
          android:layout_gravity="bottom|right"
          android:textSize="20sp"
          android:text="asdfasdf"/>

<ImageView android:id="@+id/personImage"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:src="@drawable/icon"/>       

</merge>

The include is here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content">

<include layout="@layout/icon"/>

 </LinearLayout>

I'm putting those in a gridview here:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
              android:id="@+id/contactsGrid"
              android:layout_width="fill_parent"
              android:layout_weight="1"
              android:layout_height="fill_parent"
              android:numColumns="3"
              android:horizontalSpacing="3dip"
              android:verticalSpacing="3dip" />

We've managed to merge the image and the text so far using relativelayouts, however when we add the delete button, the whole icon itself can't be clicked anymore.

Answer 1

It looks like you are complicating things more than they may need to be. Try using a RelativeLayout as the parent view for the button, text, and imageview. For example take a look at the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="@+id/personImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<TextView android:id="@+id/personName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/personImage"
    android:layout_alignRight="@id/personImage"/>
<Button android:id="@+id/deleteContact"
    android:text="X"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/personImage"
    android:layout_alignLeft="@id/personImage"/>
</RelativeLayout>

You should actually be able to just use that in the GridView. You may want to replace the Button with an ImageButton that uses an actual image.