【Android】GridLayoutを画面サイズに合わせて表示する方法を実例付きで解説

この記事では、Androidアプリ開発においてGridLayoutを画面サイズに合わせて表示する方法を、実際のサンプルコードとともに解説します。GridLayoutはボタンや画像などのビューを格子状に整列できる便利なレイアウトですが、端末ごとに異なる画面サイズへどう対応させるかは多くの開発者がつまずきやすいポイントです。以下の手順に沿って進めれば、どの端末でもバランスよく表示されるGridLayoutを実現できます。

ステップ1：Android Studioで新規プロジェクトを作成する

まずAndroid Studioを起動し、「File」→「New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成してください。

ステップ2：activity_main.xml にレイアウトを記述する

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tableGrid"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal"
    tools:context=".MainActivity">
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="7" />
    <Button android:text="8" />
    <Button android:text="9" />
    <Button android:text="10" />
    <Button android:text="11" />
    <Button android:text="12" />
    <Button android:text="13" />
    <Button android:text="14" />
    <Button android:text="15" />
    <Button android:text="16" />
</GridLayout>

ここでのポイントは android:layout_gravity="center" の指定です。GridLayout自体を親ビューの中央に配置することで、画面サイズが異なる端末でもグリッド全体がバランスよく表示されます。また、android:columnCount="4" で列数を指定しているため、子要素は自動的に左から順に4列ずつ並んでいきます。

ステップ3：MainActivity.java でグリッドを動的に構築する

続いて、src/MainActivity.java に以下のコードを追加します。

package com.app.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.GridLayout;
import android.widget.ImageView;
import android.widget.TableLayout;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridLayout gridLayout = (GridLayout)findViewById(R.id.tableGrid);
        gridLayout.removeAllViews();
        int total = 12;
        int column = 5;
        int row = total / column;
        gridLayout.setColumnCount(column);
        gridLayout.setRowCount(row + 1);
        for(int i =0, c = 0, r = 0; i < total; i++, c++){
            if(c == column){
                c = 0;
                r++;
            }
            ImageView oImageView = new ImageView(this);
            oImageView.setImageResource(R.drawable.ic_launcher_background);
            GridLayout.LayoutParams param =new GridLayout.LayoutParams();
            param.height = TableLayout.LayoutParams.WRAP_CONTENT;
            param.width = TableLayout.LayoutParams.WRAP_CONTENT;
            param.rightMargin = 5;
            param.topMargin = 5;
            param.setGravity(Gravity.CENTER);
            param.columnSpec = GridLayout.spec(c);
            param.rowSpec = GridLayout.spec(r);
            oImageView.setLayoutParams (param);
            gridLayout.addView(oImageView);
        }
    }
}

このJavaコードでは、12個のImageViewを5列のグリッド上に動的に配置しています。GridLayout.spec() メソッドに行番号・列番号を渡すことで、各要素を任意のセルへ正確に配置できるのが特徴です。さらに LayoutParams を使えば、マージンによるセル間の余白調整や Gravity.CENTER による中央揃えなど、細かい見た目の制御も自由に行えます。XMLだけでなくコード側から柔軟にレイアウトを組み立てたい場合に有効な手法です。

ステップ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.app.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>

.MainActivity がランチャーアクティビティとして登録されていれば、アプリ起動時にこの画面が最初に表示されます。

アプリを実行して動作を確認しよう

最後に、アプリを実行してみましょう。ここでは実機のAndroidスマートフォンをPCに接続していることを前提としています。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run（実行）」アイコンをクリックしてください。接続済みのモバイルデバイスを選択すると、実機の画面にGridLayoutが中央にきれいに整列して表示されます。