Cách tạo bảng có viền (TableLayout) trong Android

Hướng dẫn này minh họa cách tạo bảng dữ liệu có viền và định dạng bằng TableLayout, TableRow và màu nền xen kẽ.

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project.

Bước 2: Giao diện bảng (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"
    android:stretchColumns="*"
    tools:context=".MainActivity">

    <!-- Header -->
    <TableRow android:background="#0079D6" android:padding="5dp">
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="ID" 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="Tên" 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="Vị trí" android:textColor="#FFFFFF" android:textStyle="bold" android:gravity="center"/>
    </TableRow>

    <!-- Dòng 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>

    <!-- Dòng 2 -->
    <TableRow android:background="#FFFFFF" 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>

    <!-- Dòng 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>

Bước 3: Activity (src/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);
    }
}

Bước 4: Manifest (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>

💡 Cải tiến cho bảng phức tạp

• RecyclerView + GridLayoutManager — hiệu năng tốt, hỗ trợ cuộn, view recycling
• TableLayout trong ScrollView — nếu bảng ít dòng, nội dung tĩnh
• Thư viện: TableView, SmartTable — sắp xếp, lọc, resize cột tự động

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Bảng hiển thị với header xanh đậm, các dòng xen kẽ màu xanh nhạt/trắng.