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:

It is correct way with TableLayout or should i use GridView ?
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>

refer http://stackoverflow.com/questions/2108456/how-can-i-create-a-table-with-borders-in-android — sasikumar, Apr 30 '16 at 06:10
@sasikumar i have already check it. in it you can see border is for all side in cell. but for me it is only at 2 side. i hope you understand what i mean. — Wasim K. Memon, Apr 30 '16 at 06:12
You can try RecyclerView using a GridLayoutManager with custom ItemDecoration. As a bonus latter you can add animation. — Maxim G, Apr 30 '16 at 07:18

idunnololz · Answer 1 · 2016-04-30T15:36:20.527

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:

not working please check this ss - http://tinypic.com/r/mb7ujt/9. i don't know why for last row it display like this. i have tried above code. — Wasim K. Memon, Apr 30 '16 at 11:57
Weird. I can't see the image in your link. Could you upload it again please? — idunnololz, Apr 30 '16 at 15:27
Actually I inferred what the problem is. Try setting the text attribute for the two empty textviews at the bottom to the empty string like so: `android:text=""`. I've also updated my answer to reflect this. — idunnololz, Apr 30 '16 at 15:34

score 2 · Accepted Answer · answered May 09 '16 at 04:45

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>

Border for table row items in android

2 Answers2