Border for table row items in android

Question

How i can achieve view like below screen shots (1 expected result, 2 Actual result). As you can see each items have border it is like left and bottom for some items and for some items it is right & bottom. I have created view using TableLayout but now i don't know how to apply border to each row and item. My questions are:

1. It is correct way with TableLayout or should i use GridView ?

2. In expected result as you can see borders are done with gradient at the end its just fade so can anyone give me drawable code for that.

TableLayout code:

<TableLayout
    android:id="@+id/layout_pinlock_buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout_pinlock_header"
    android:layout_marginTop="@dimen/padding_15dp"
    android:gravity="center_vertical"
    android:padding="@dimen/padding_10dp"
    android:stretchColumns="*" >

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

        <TextView
            android:id="@+id/Tv_pinLock_01"
            style="@style/TextViewMyTheme"
            android:text="1" />

        <TextView
            android:id="@+id/Tv_pinLock_02"
            style="@style/TextViewMyTheme"
            android:text="2" />

        <TextView
            android:id="@+id/Tv_pinLock_03"
            style="@style/TextViewMyTheme"
            android:text="3" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/Tv_pinLock_04"
            style="@style/TextViewMyTheme"
            android:text="4" />



        <TextView
            android:id="@+id/Tv_pinLock_05"
            style="@style/TextViewMyTheme"
            android:text="5" />

        <TextView
            android:id="@+id/Tv_pinLock_06"
            style="@style/TextViewMyTheme"
            android:text="6" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_10dp"
        android:layout_marginBottom="@dimen/padding_10dp">

        <TextView
            android:id="@+id/Tv_pinLock_07"
            style="@style/TextViewMyTheme"
            android:text="7" />

        <TextView
            android:id="@+id/Tv_pinLock_08"
            style="@style/TextViewMyTheme"
            android:text="8" />

        <TextView
            android:id="@+id/Tv_pinLock_09"
            style="@style/TextViewMyTheme"
            android:text="9" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_10dp"
        android:layout_marginBottom="@dimen/padding_10dp"
        android:gravity="center_horizontal">


        <TextView
            android:id="@+id/Tv_pinLock_00"
            style="@style/TextViewMyTheme"
            android:gravity="center"
            android:text="0" />

    </TableRow>

</TableLayout>

Answer 1

Thanks @idunnololz. But your solution doesn't work in big screens. b'z of margin is only 2dp and if i increase it for other screen sizes it will effect required ui.

And in last row i don't know why it takes much more space then all above row. like below image

so at last i have given fixed height and width for textviews. if you have better solution then please let me know.

<style name="TextViewMyTheme" parent="TextAppearance.AppCompat.Title">
    <item name="android:layout_height">60dp</item>
    <item name="android:layout_width">50dp</item>
    <item name="android:minHeight">48dip</item>
    <item name="android:textSize">@dimen/text_size_28sp</item>
    <item name="android:gravity">center</item>
    <item name="android:background">?attr/selectableItemBackground</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:padding">@dimen/padding_10dp</item>
</style>

Answer 2

Here's an idea:

Set the background of the TableLayout to be the color of the border you want (in your example, the border fades out at the edges so you will probably want a radial gradient as your background). Then set the background color of each cell to the background color of your Activity/Fragment. Finally set the desired border width as the margins to each of the cells in your TableLayout and you will get the grid effect you desire.

Sample code: Layout resource:

<TableLayout
    android:id="@+id/layout_pinlock_buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:stretchColumns="*"
    android:background="@drawable/background">

    <TableRow
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_01"
            android:layout_marginRight="2dp"
            android:text="1" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_02"
            android:layout_marginRight="2dp"
            android:text="2" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_03"
            android:text="3" />
    </TableRow>

    <TableRow
        android:layout_marginBottom="2dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_04"
            android:layout_marginRight="2dp"
            android:text="4" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_05"
            android:layout_marginRight="2dp"
            android:text="5" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_06"
            android:text="6" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp">

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_07"
            android:layout_marginRight="2dp"
            android:text="7" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_08"
            android:layout_marginRight="2dp"
            android:text="8" />

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_09"
            android:text="9" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            style="@style/TextViewMyTheme"
            android:gravity="center"
            android:layout_marginRight="2dp"
            android:text=""/>

        <TextView
            style="@style/TextViewMyTheme"
            android:id="@+id/Tv_pinLock_00"
            android:gravity="center"
            android:layout_marginRight="2dp"
            android:text="0" />
        <TextView
            style="@style/TextViewMyTheme"
            android:gravity="center"
            android:text=""/>

    </TableRow>
</TableLayout>

@drawable/background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:type="radial"
        android:gradientRadius="200dp"
        android:startColor="#222"
        android:centerColor="#222"
        android:endColor="#000" />
</shape>

Style:

<style name="TextViewMyTheme">
    <item name="android:background">#000</item>
    <item name="android:textColor">#fff</item>
    <item name="android:gravity">center</item>
    <item name="android:padding">20dp</item>
</style>

Result: