วิธีสร้างตารางพร้อมขอบ (Table with Borders) ใน Android

ตัวอย่างนี้สาธิตวิธีสร้างตาราง (Table) พร้อมขอบสีสันใน Android โดยใช้ TableLayout และ TableRow พร้อมกำหนด background color ให้แต่ละ Row

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project

ขั้นตอนที่ 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="100dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    tools:context=".MainActivity"
    android:stretchColumns="*">

    <!-- Header Row -->
    <TableRow
        android:background="#0079D6"
        android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="UserId"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="User Name"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Location"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:gravity="center" />
    </TableRow>

    <!-- Data Row 1 -->
    <TableRow
        android:background="#DAE8FC"
        android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Michael Jackson"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="SA"
            android:gravity="center" />
    </TableRow>

    <!-- Data Row 2 -->
    <TableRow
        android:background="#DAE8FC"
        android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Selena Gomez"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="USA"
            android:gravity="center" />
    </TableRow>

    <!-- Data Row 3 -->
    <TableRow
        android:background="#DAE8FC"
        android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="3"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Pitbull"
            android:gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="UK"
            android:gravity="center" />
    </TableRow>

</TableLayout>

ขั้นตอนที่ 3: MainActivity.java

package com.example.sample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

ขั้นตอนที่ 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

ข้อจำกัดของ TableLayout และวิธีแก้

วิธีสร้าง Border จริง (True Borders)

วิธีที่ 1: ใช้ Drawable เป็น Background ของแต่ละ Cell

<!-- res/drawable/cell_border.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <stroke android:width="1dp" android:color="#CCCCCC" />
</shape>

แล้วเซ็ตให้ TextView ทุกตัว: android:background="@drawable/cell_border"

วิธีที่ 2: ใช้ RecyclerView + GridLayoutManager (แนะนำสมัยใหม่)

ยืดหยุ่นกว่า รองรับ Scroll, ViewHolder, DiffUtil, Animation

วิธีที่ 3: เพิ่ม View Divider ระหว่าง Row

<TableRow ...>...</TableRow>
<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#CCCCCC" />

การเพิ่ม Scroll (สำคัญ)

TableLayout ไม่ Scroll เอง ต้องห่อใน ScrollView:

<ScrollView ...>
    <HorizontalScrollView ...>
        <TableLayout ...>...</TableLayout>
    </HorizontalScrollView>
</ScrollView>

การทดสอบ

รันแอป → จะเห็นตาราง 3 คอลัมน์ 4 แถว (1 Header + 3 Data) พร้อมสีสลับกัน