How to implement a table with round corners?

Question

This is what I want:

This is what I have done:

The difference is there are some spaces between the lines and the border because I used padding=10dp for outer border:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="2dp" android:color="#808080"/>
    <corners
            android:radius="10dp"/>
    <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp"/>
</shape>

Am I doing this right? How can I fix this problem?

Answer 1

Here is the xml file as you want .

Remove Padding from your xml file and put padding in each widget. Here test.xml is your background xml file witout padding attribute.

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:orientation="vertical"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/test"
        android:layout_margin="10dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:text="Sample TextView"
            android:padding="10dp"/>

        <View 
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:background="#000000" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:text="Sample TextView"
            android:padding="10dp"/>

        </LinearLayout>

Edit test.xml file

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="2dp" android:color="#808080"/>
    <corners
            android:radius="10dp"/>

</shape>

Answer 2

Remove the padding. Put elements in each box and add the padding to each of those.

Answer 3

Solution 1: //remove the padding for the shape

Solution 2: //keep the padding as it is

and put margin for your view ie that line you are drawing as horizontal one

android:marginLeft="-10dp"
android:marginRight="-10dp"

//for the top one

android:marginTop="-10dp"