Only first child View of ViewGroup showing when inside a GridLayout - subsequent cells are visually childless

Question

I'm having a peculiar error when placing RelativeLayouts as the cells of a GridLayout. I expanded on this proof-of-concept. When I add the same RelativeLayout subclass to the first three cells, only the first cell's children are visible. The second two cells in the row are blank except for the parent RelativeLayout.

Here's the RelativeLayout subclasses, gridlayout code, and children XML.

public class MemberCardTile extends HomeBaseTile {
    public MemberCardTile(Context context) {
        super(context, R.layout.tile_member_card);
    }
}

...and its parent:

abstract public class HomeBaseTile extends FrameLayout {

    public HomeBaseTile(Context context, int childResourceId) {
        super(context);

        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rl = inflater.inflate(R.layout.tile_member_card, null);

        contentView = (ViewGroup)rl;        
        this.addView(contentView);

        this.setPadding(0, 0, 0, 0);
    }

    @Override
    public void setBackgroundColor(int color) {
        this.contentView.setBackgroundColor(color);
        super.setBackgroundColor(Color.BLACK);
    }
}

The current, although unrefined, GridLayout code appears as:

public static GridLayout layoutForInMarket(Context context, Point size) {

    int screenWidth = size.x;
    int tileHeight = (int) (size.y * 0.175f) - (TILE_PADDING );

    int smallTileWidth = (int) (screenWidth * 0.33f) - (1 * TILE_PADDING + 2);
    int mediumTileWidth = (int) (screenWidth * 0.66f) - (1 * TILE_PADDING);
    int largeTileWidth = (int) (screenWidth * 0.99f) - (1 * TILE_PADDING);

    // spec(Row, Row Span)
    Spec row1 = GridLayout.spec(1, 1);
    Spec row2 = GridLayout.spec(2, 1);
    Spec row3 = GridLayout.spec(3, 1);
    Spec row4 = GridLayout.spec(4, 1);
    Spec row5 = GridLayout.spec(5, 1);

    // spec(Column, Column Span)
    Spec col0Small = GridLayout.spec(0, 1);
    Spec col1Small = GridLayout.spec(1, 1);
    Spec col2Small = GridLayout.spec(2, 1); 
    Spec col0Medium = GridLayout.spec(0, 2);
    Spec col1Medium = GridLayout.spec(1, 2);
    Spec col0Large = GridLayout.spec(0, 3);

    GridLayout gridLayout = new GridLayout(context);
    gridLayout.setBackgroundColor(Color.WHITE);
    gridLayout.setColumnCount(15); // 3 works, 
    gridLayout.setRowCount(15); // Experiment with this. 6 works, not 5...

    // ROW 1
    // Item 1 (works fine)
    MemberCardTile member = new MemberCardTile(context);
    GridLayout.LayoutParams first = new GridLayout.LayoutParams(row1,
            col0Small);
    first.width = smallTileWidth;
    first.height = tileHeight;
    first.setMargins(TILE_PADDING, TILE_PADDING, TILE_PADDING, TILE_PADDING);
    member.setBackgroundColor(Color.MAGENTA);
    gridLayout.addView(member, first);
            // item 2 (only the parent shows, no added subviews)
    MemberCardTile member1 = new MemberCardTile(context);
    GridLayout.LayoutParams first1 = new GridLayout.LayoutParams(row1,
            col1Small);
    first1.width = smallTileWidth;
    first1.height = tileHeight;
    first1.setMargins(TILE_PADDING, TILE_PADDING, TILE_PADDING,
            TILE_PADDING);
    member1.setBackgroundColor(Color.BLUE);
    gridLayout.addView(member1, first1);
            // item 3 (only the parent shows, no added subviews)
    MemberCardTile member2 = new MemberCardTile(context);
    GridLayout.LayoutParams first2 = new GridLayout.LayoutParams(row1,
            col2Small);
    first2.width = smallTileWidth;
    first2.height = tileHeight;
    first2.setMargins(TILE_PADDING, TILE_PADDING, TILE_PADDING,
            TILE_PADDING);
    member2.setBackgroundColor(Color.GREEN);
    gridLayout.addView(member2, first2);

    // ROW 2

    TextView gymSite = new TextView(context);
    GridLayout.LayoutParams third = new GridLayout.LayoutParams(row2,
            col0Small);
    third.width = smallTileWidth - 3;
    third.height = tileHeight;
    third.setMargins(5, 5, 5, 5);
    gymSite.setBackgroundColor(Color.RED);
    gymSite.setText("Gym Website");
    gridLayout.addView(gymSite, third);

    /** Remaining tiles are redacted, but appear just as the above (ROW 2) item */

    return gridlayout;
}

I've tried both programmatically adding a child RelativeLayout and through an inflated XML. In the above example I'm using an inflated XML. In both cases, the first cell (0,0) shows and not the subsequent two cells.

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELLO"
        android:textColor="@color/black" />
</RelativeLayout>

Screenshot of resulting GridLayout (The first row should all appear the same except for background colors (i.e. MAGENTA, BLUE, GREEN)

I feel it has something to do with the GridLayout settings, but am unsure as to what. When I breakpoint through the view creation, the second and third cells' views are definitely created and added to the view hierarchy.

I've tried both on a 4.3 Galaxy Nexus and 4.4 Nexus 5.

Any help or advice is greatly appreciated. Thanks again.

Answer 1

Try replacing:

    View rl = inflater.inflate(R.layout.tile_member_card, null);

    contentView = (ViewGroup)rl;        
    this.addView(contentView);

with:

    View rl = inflater.inflate(R.layout.tile_member_card, this);

Not only does this add the children to the parent in one shot, but it does so in ways that will make RelativeLayout behave better.