I want to create 5 equally sized outer squares across the top of the screen, side-by-side. Each outer square should contain 3 equally sized mini squares, side-by-side, across the top of each outer square. Each of the 3 mini squares are TextViews.
The outer squares and the inner squares each need a border, which I want to use to differentiate each square, so that it is obvious to the user that there are 5 distinct outer squares, and 3 distinct inner squares within each outter square.
I was able to get 5 equally sized outer squares by declaring 5 separate TableLayouts, specifying layout_width="0dp" and layout_weight="2". Within each of these TableLayouts, I define a single element with 3 TextViews.
How can I get each of the 3 inner squares containing the TextViews to be equally sized, independent of the screen size? I tried setting the layout_weight of each of the TextViews equal to ".3" but this doesn't do the trick.
The only way I've been able to get 3 equally sized squares with TextViews is to set android:minWidth="12dp" (or some other number besides 12dp) for each of the 3 mini squares, but obviously this does not work for different sized screens.
My Tables are each setup like the TableLayout below. This layout that I've included is the Layout that allows me to create the mini squares correctly, but doesn't work for different sized screens. I used the margins to actually create the border around the TextViews(black background with white outline).
Besides this layout, I tried creating a Shape resource and setting the background of the 3 mini squares to that Shape, but that did not work either, but I've included that resource as well.
<TableLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<TableRow android:background="#FFFFFF">
<TextView
android:background="#000000"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:layout_marginBottom="1dip"
android:minWidth="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:background="#000000"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:layout_marginBottom="1dip"
android:minWidth="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:background="#000000"
android:layout_marginLeft="1dip"
android:layout_marginBottom="1dip"
android:layout_marginRight="1dip"
android:minWidth="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
The Shape resource I tried was:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#000000"/>
<stroke android:width="1dp" color="#000000"/>
<corners android:radius="1dp"/>
<padding android:left="2dp" android:top="1dp"
android:right="2dp" android:bottom="1dp" />
</shape>