Android FrameLayouts in GridLayout not showing

Question

I'm trying to make something like the following screenshot (it's from an assignment from school):

As mentioned in the assignment, I have an Activity PlayActivity:

public class PlayActivity extends ActionBarActivity {
    @Bind(R.id.activity_play_textView_score)
    TextView txtScore;

    @Bind(R.id.activity_play_board)
    Board board;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_play);

        ButterKnife.bind(this);
    }
}

The xml-layout for this activity:

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

    <TextView
        android:id="@+id/activity_play_textView_score"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/activity_play_textView_score_placeholder"/>

    <com.charlotteerpels.game2048.Board
        android:id="@+id/activity_play_board"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

We also had to make a class Card, which is an extension of a FrameLayout:

public class Card extends FrameLayout {
    @Bind(R.id.card_frame_layout_textView)
    TextView txtNumber;

    private int number;

    public void setTxtNumber(TextView txtNumber) {
        this.txtNumber = txtNumber;
    }

    public TextView getTxtNumber() {
        return this.txtNumber;
    }

    public void setNumber(int number) {
        this.number = number;
    }

    public int getNumber() {
        return this.number;
    }

    public Card(Context context, AttributeSet attributeSet, int defaultStyle) {
        super(context, attributeSet, defaultStyle);
        inflateLayout();
        ButterKnife.bind(this);
    }

    public Card(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        inflateLayout();
        ButterKnife.bind(this);
    }

    public Card(Context context) {
        super(context);
        inflateLayout();
        ButterKnife.bind(this);
    }

    private void inflateLayout() {
        String infService = Context.LAYOUT_INFLATER_SERVICE;
        LayoutInflater li = (LayoutInflater)getContext().getSystemService(infService);
        li.inflate(R.layout.card_frame_layout, this, true);
    }
}

The xml-layout for this class:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/card_frame_layout_background"
    android:layout_margin="4dp">

    <TextView
        android:id="@+id/card_frame_layout_textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/card_frame_layout_textView_placeholder"
        android:textSize="40sp"
        android:layout_gravity="center"/>

</FrameLayout>

At least we had to make a class Board, which is an extension of a GridLayout:

public class Board extends GridLayout {
    Card[][] cardBoard;

    public Board(Context context, AttributeSet attributeSet, int defaultStyle) {
        super(context, attributeSet, defaultStyle);
        initBoard(context);
    }

    public Board(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        initBoard(context);
    }

    public Board(Context context) {
        super(context);
        initBoard(context);
    }

    public void initBoard(Context context) {
        //Set the settings for the GridLayout (the grid is the board)
        String infService = Context.LAYOUT_INFLATER_SERVICE;
        LayoutInflater li = (LayoutInflater)getContext().getSystemService(infService);
        li.inflate(R.layout.board_grid_layout, this, true);

        //Initialize the cardBoard[][] and populate it
        cardBoard = new Card[4][4];

        for(int rij=0; rij<4; rij++) {
            for(int kolom=0; kolom<4; kolom++) {
                cardBoard[rij][kolom] = new Card(getContext());
            }
        }

        int cardMeasure = getCardMeasure(context);
        addCardBoardToGridLayout(cardMeasure);
    }

    private void addCardBoardToGridLayout(int cardMeasure) {
        for(int rij=0; rij<4; rij++) {
            for(int kolom=0; kolom<4; kolom++) {
                Card card = cardBoard[rij][kolom];
                addView(card, cardMeasure, cardMeasure);
            }
        }
    }

    private int getCardMeasure(Context context) {
        WindowManager wm = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
        Display display = wm.getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        int screenWidth = size.x;
        return screenWidth/4;
    }
}

The xml-layout for the Board:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/board_grid_layout_background"
    android:columnCount="4"
    android:rowCount="4">
</GridLayout>

But all I'm getting is this:

I'm also using Butterknife (website: http://jakewharton.github.io/butterknife/) for binding resources, but mostly to bind views and elements from the xml-layouts.

Can anybody help me?

Answer 1

Found what was wrong!

So in the xml-layout from Card, I changed the layout_width and layout_height from the TextView:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/card_frame_layout_background"
    android:layout_margin="4dp">

    <TextView
        android:id="@+id/card_frame_layout_textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/card_frame_layout_textView_placeholder"
        android:textSize="40sp"
        android:layout_gravity="center"/>
</FrameLayout>

The "addCardBoardToGridLayout(int cardMeasure)" changed to the following:

private void addCardBoardToGridLayout(int cardMeasure) {
    setRowCount(4);
    setColumnCount(4);

    removeAllViews();

    for(int rij=0; rij<4; rij++) {
        for(int kolom=0; kolom<4; kolom++) {
            Card card = cardBoard[rij][kolom];

            addView(card, cardMeasure, cardMeasure);
        }
    }
}

Now it looks like this (and it's exactly like I wanted it!):