Android TableLayout hexgrid best approach

Question

I'm making a game where the user needs to be able to see a grid of hexagons in several colors (they are just different images) and needs to be able to click some of them (the grey ones). I've made the hex-grid using a TableLayout now:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
>
<TableRow
    android:layout_marginTop="0dp"
    android:layout_marginBottom="@dimen/margin_cell_vertical"
    >
   <ImageView android:src="@drawable/hex_green_border"
       android:layout_column="1"
       android:layout_marginLeft="@dimen/margin_cell_horizontal"
       android:layout_marginRight="@dimen/margin_cell_horizontal"
   />
</TableRow>
<TableRow
    android:layout_marginTop="@dimen/margin_cell_vertical"
    android:layout_marginBottom="0dp"
    >
   <ImageView android:src="@drawable/hex_grey"
       android:layout_column="0"
       android:layout_marginLeft="0dp"
       android:layout_marginRight="@dimen/margin_cell_horizontal"
       />
   <ImageView android:src="@drawable/hex_red_border"
       android:layout_column="2"
       android:layout_marginLeft="@dimen/margin_cell_horizontal"
       android:layout_marginRight="0dp"
       />
</TableRow>

</TableLayout>

(The margin_cell_horizontal and margin_cell_vertical are both negative constants, that specify the exact looks of the grid. Also note the 0dp margins at the top and bottom row and at the most left and right cell.)
This results in

When I do not set the margins to 0dp at the edge, the outeredges of the hexagons at the edge won't be visible.

In practice, the grid will be 15 cells wide and consist of 120 cells in total, but it may vary in the future.

Is the TableLayout the right approach here and is it reasonable to (recreate and) redraw the whole table dynamically based on the state of the game on every update? I've tried to do it with a GridView, where the onClickListeners are easy to handle and it is easy to do updates using an adapter, but I didn't succeed in creating the layout of the grid.

Another small question (I haven't really looked up how to do this yet): When implementing onclicklisteners for the cells, would every cell need its own id and listener? It feels like an overkill to me, but maybe it's necessary.

Answer 1

The best way is probably to use neither of the available layouts, but create your own one... a HexLayout... all you have to do is subclass ViewGroup and override the onLayout() method. This post might be of interest... http://arpitonline.com/blog/2012/07/01/creating-custom-layouts-for-android/ From the article ...

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
     int itemWidth = (r-l)/getChildCount();
     for(int i=0; i< this.getChildCount(); i++){
         View v = getChildAt(i);
     v.layout(itemWidth*i, t, (i+1)*itemWidth, b);
     }
}

So in onLayout() you iterate over the children and place them accordingly.