Androidアプリで境界線付きテーブルを作成する方法【TableLayout活用ガイド】

はじめに

この記事では、Androidアプリで境界線（罫線）のあるテーブルを表示する方法を、実際のコード例とともにわかりやすく解説します。Androidでは標準のTableLayoutには罫線が用意されていないため、行ごとに背景色を設定し、セル間にマージンを持たせることで、見た目上の境界線を実現します。

ステップ1：新規プロジェクトの作成

まずはAndroid Studioを起動し、メニューから「File → New Project」を選択して新しいプロジェクトを作成します。必要な項目をすべて入力してプロジェクトのセットアップを完了させてください。

ステップ2：レイアウトファイルの編集

次に、res/layout/activity_main.xml に以下のコードを追加します。ヘッダー行は青色（#0079D6）、データ行は薄い水色（#DAE8FC）の背景を設定し、TableRow間の隙間が境界線のように見える仕組みです。

<?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">

    <!-- ヘッダー行 -->
    <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" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="User Name" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Location" />
    </TableRow>

    <!-- データ行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" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Michael Jackson" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="SA" />
    </TableRow>

    <!-- データ行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" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Selena Gomez" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="USA" />
    </TableRow>

    <!-- データ行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" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Pitbull" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="UK" />
    </TableRow>
</TableLayout>

ステップ3：MainActivity.javaの編集

続いて、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);
    }
}

ステップ4：AndroidManifest.xmlの確認

Manifests/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>

アプリの実行

それでは、アプリケーションを実行してみましょう。実機のAndroidスマートフォンをパソコンに接続していることを前提としています。Android Studioからアプリを起動するには、プロジェクト内のアクティビティファイルを開き、ツールバーにあるRun（実行）アイコンをクリックします。デバイス選択画面で自分のモバイル端末を選択すると、端末の画面にテーブルが表示されます。

まとめ

TableLayout自体には罫線機能がありませんが、各行に異なる背景色を設定し、テーブル全体に余白を持たせることで、シンプルかつ美しい境界線付きテーブルを簡単に作成できます。データ一覧や設定画面など、さまざまな場面で応用できるテクニックなので、ぜひ試してみてください。