Tables with border

<Linearlayout layout=wrap >
   <Tablerow layout=matchparent>
        <Widget />
        <Linearlayout width="1dp",color="xxx" /> <!-- border -->
        <Widget />
        <Linearlayout width="1dp",color="xxx" /> <!-- border -->
   < /tablerow>
    <Linearlayout height="1dp" color="xxx" /> <!-- border -->
   <Tablerow layout=matchparent>
        <Widget />
        <Linearlayout width="1dp",color="xxx" /> <!-- border -->
        <Widget />
        <Linearlayout width="1dp",color="xxx" /> <!-- border -->
   < /tablerow>
< /Linearlayout>

NOTE : Tablelayout View is causing alignment problems. Thats why using Linear layout

Tags and grabbing specific widgets

We can give a tag to each widget. (or content desccription)

<ImageView
                android:id="@+id/button32"
                android:layout_width="@dimen/widget_size"
                android:layout_height="@dimen/widget_size"
                android:contentDescription="img"
                android:onClick="clickFunction"
                android:padding="10dp"
                android:tag="2" />

This tag can be used to grab the specific items items in trhe java code

View root = findViewById(R.id.linearLayout);

        ArrayList<View> out = new ArrayList<>();

        root.findViewsWithText(out,"img",View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);

Example :

Check Connect 3 example

Grid layout (legacy)

This is particularly useful when we want to fill the parent layout with equal sized widgets

To get the following layout, all the methods below are equivalent

Grid layout

You ll have to manually specify the row and column in the xml file

Set column weight, row weight = 1 and layout gravity = fill in each widget

<android.support.v7.widget.GridLayout
        android:layout_width="500dp"
        android:layout_height="500dp" >

        <Button
            android:id="@+id/button00"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_column="0"
            app:layout_columnWeight="1"
            app:layout_gravity="fill"
            app:layout_row="0"
            app:layout_rowWeight="1" />

        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            app:layout_columnWeight="1"
            app:layout_gravity="fill"
            app:layout_row="0"
            app:layout_column="1"
            app:layout_rowWeight="1" />

            ...

    < /GridLayout>

Linear - Table row (or) LinearHorizontal can also achieve the same by setting

Layout width and height to match parent and layout weight=1 for all child elements of main parent

<LinearLayout
        android:layout_width="500dp"
        android:layout_height="500dp">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:id="@+id/button00"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/button01"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <Button
                android:id="@+id/button10"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/button11"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Button" />
        </TableRow>
< /LinearLayout>

Example:

Check appPhrase