Drawing a chessboard in Android with a custom border, using ImageViews and Gridlayout dynamically

I'd like to draw a n x n chessboard in Android, using fancy custom images (drawn in GIMP). To do so, I resolved to use to use four ImageViews that represent the edges of the board, and n^2 ImageViews that represent the squares. The result should look something like this (quick sketch):

The squares are most naturally contained in GridLayout, which is itself contained in a RelativeLayout which also contains the ImageView edges. I am creating the interface programmatically in a fragment by defining the individual Views (squares and edges) in xml, which I then inflate in code (building on an answer I received here).

My questions are:

i) Is this a reasonable method? If not, how should I do it?

ii) Debugging help: my code is buggy! Problems: the cells do not align neatly, the right border is not visible, the bottom one is far off, and although in this trial case I am working with n=4, only 4*3 cells are visible. It looks something like this (note: for the times being, I let all cells be black):

What am I doing wrong? Below is my code, with pictures included in case you would like to run it:

public static class BoardFragment extends Fragment {

        public BoardFragment() {
        }

        public int columnsNum = 4;
        public int rowsNum = 4;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_board_grid,container, false);
            GridLayout boardLayout = (GridLayout) rootView.findViewById(R.id.gridView);
            RelativeLayout allBoardLayout = (RelativeLayout) rootView.findViewById(R.id.relatView);
            boardLayout.setColumnCount(columnsNum);
            boardLayout.setRowCount(rowsNum);

            //The top border is defined:

            final ImageView topBorder = (ImageView) inflater.inflate(
                    R.layout.fragment_board_top_border, allBoardLayout, false);

            RelativeLayout.LayoutParams topParams =
                    new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                            RelativeLayout.LayoutParams.WRAP_CONTENT
                    );

            allBoardLayout.addView(topBorder, topParams);

            //Now cells are added to the GridLayout:

            for (int columnIndex = 0; columnIndex < columnsNum; columnIndex++) {
                for (int rowIndex = 0; rowIndex < rowsNum; rowIndex++) {
                    final ImageView cellView = (ImageView) inflater.inflate(
                            R.layout.fragment_board_cell, boardLayout, false);
                    cellView.setOnClickListener(new OnClickListener(){

                        public void onClick(View view) {

                            cellView.setVisibility(View.GONE); //test method, removes cell if clicked
                        }});

                    boardLayout.addView(cellView);
                }
            }

            //The rest of the borders are inflated and added, then everything is added together.

            final ImageView leftBorder = (ImageView) inflater.inflate(
                    R.layout.fragment_board_left_border, allBoardLayout, false);

            RelativeLayout.LayoutParams leftParams =
                    new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                            RelativeLayout.LayoutParams.WRAP_CONTENT
                    );

            leftParams.addRule(RelativeLayout.LEFT_OF,boardLayout.getId());

            allBoardLayout.addView(leftBorder,leftParams);

            final ImageView rightBorder = (ImageView) inflater.inflate(
                    R.layout.fragment_board_right_border, allBoardLayout, false);

            RelativeLayout.LayoutParams rightParams =
                    new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                            RelativeLayout.LayoutParams.WRAP_CONTENT
                    );

            leftParams.addRule(RelativeLayout.RIGHT_OF,boardLayout.getId());

            allBoardLayout.addView(rightBorder,rightParams);

            final ImageView bottomBorder = (ImageView) inflater.inflate(
                    R.layout.fragment_board_bottom_border, allBoardLayout, false);

            RelativeLayout.LayoutParams bottomParams =
                    new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
                            RelativeLayout.LayoutParams.WRAP_CONTENT
                    );

            bottomParams.addRule(RelativeLayout.BELOW,boardLayout.getId());

            allBoardLayout.addView(bottomBorder, bottomParams);

            return rootView;
        }



    }

And the xml files look as follows. They are all very similar but I include them all in case you would like to run the code.

fragment_board_right_border.xml:

<ImageButton xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="@null"
    android:src="@drawable/border_right_4"
    android:background="@android:color/transparent"
    />

fragment_board_left_border.xml:

<ImageButton xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="@null"
    android:src="@drawable/border_left_4"
    android:background="@android:color/transparent"
    />

fragment_board_top_border.xml:

<ImageButton xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="@null"
    android:src="@drawable/border_top_4"
    android:background="@android:color/transparent"
    />

fragment_board_bottom_border.xml:

<ImageButton xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="@null"
    android:src="@drawable/border_bottom_4"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    />

fragment_board_grid.xml:

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:id="@+id/relatView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.GridLayout
        xmlns:app="http://ift.tt/GEGVYd"
        android:id="@+id/gridView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

fragment_board_cell.xml:

<ImageButton xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-100dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginTop="0dp"
    android:contentDescription="@null"
    android:onClick="buttonPressed"
    android:background="@android:color/transparent"
    android:src="@drawable/cell"/>

And lastly, activity_main_game.xml:

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
    android:id="@+id/container"
    xmlns:tools="http://ift.tt/LrGmb4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    tools:context="com.zagie.zagie.app.MainGame">

</RelativeLayout>

Images for testing purposes:

border_bottom_4.png and border_top_4.png:

border_left_4.png and border_right_4.png:

cell.png:

Any input much appreciated.