はじめてのAndroidアプリ開発②：レイアウトXMLとUI部品の配置

前回の記事では、開発環境を整えて「Hello World」を表示するところまで解説しました。
アプリが動くことを確認できたら、次に挑戦したいのは「画面のデザイン」です。

アプリの見た目はユーザー体験に直結します。どんなに機能が優れていても、UI（ユーザーインターフェース）が使いにくければ利用者は離れてしまいます。
そこで今回は、AndroidアプリのレイアウトとUI設計の基本を解説します。XMLを使った画面デザイン、ボタンやテキストなどのUI部品の配置方法を実際のコード例とあわせて紹介します。

この記事を読み終える頃には、自分で画面に部品を配置し、アプリらしい見た目を作れるようになるはずです。

Androidアプリの画面はどう作られるのか
Androidのレイアウトの種類
UI部品の基本：TextViewとButton
1. TextView（テキスト表示）
2. Button（ボタン）
ConstraintLayoutで部品を中央に配置する
実際のUI設計の流れ
よく使うUI部品一覧
UI設計で意識すべきポイント
まとめ

Androidアプリの画面はどう作られるのか

Androidアプリの画面は、大きく分けて XMLレイアウト と アクティビティコード の2つで構成されています。

XMLレイアウト
アプリの「見た目」を記述するファイル。ボタンやテキストをどこに配置するかを決めます。
アクティビティ（Kotlin/Javaコード）
レイアウトで配置したUI部品に対して「どのように動くか」を指定します。

例えば「ボタンを押すと文字が変わる」場合、

XML → ボタンとテキストを配置
Kotlin → ボタンを押したときの動作を記述

という流れになります。

このように、UI設計は 「XMLで配置 → Kotlinで動作」 という二段構成で進むことを覚えておきましょう。

Androidのレイアウトの種類

Androidにはいくつかのレイアウト方法があり、どれを選ぶかによってUIの配置が変わります。

1. LinearLayout（リニアレイアウト）

部品を縦または横に一直線に並べます。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="こんにちは" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="押してね" />
</LinearLayout>

縦方向に「テキスト」「ボタン」が並びます。

2. RelativeLayout（リレイティブレイアウト）

部品同士の位置関係を指定して配置します。
例：ボタンを画面の下に固定、テキストを中央に配置など。

3. ConstraintLayout（コンストレイントレイアウト）

現在のAndroid Studioで推奨されるレイアウト。自由度が高く、画面サイズに合わせた柔軟な配置が可能です。

4. FrameLayout（フレームレイアウト）

画面上に部品を重ねて配置したいときに使います。

初心者はまず LinearLayout と ConstraintLayout に慣れるのがおすすめです。

UI部品の基本：TextViewとButton

次に、よく使うUI部品を実際に配置してみましょう。

TextView（テキスト表示）

文字を表示するための部品です。

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello Android!"
    android:textSize="20sp"
    android:layout_margin="16dp"/>

android:id で部品を識別
android:text で表示する文字を指定
android:textSize で文字サイズを指定

Button（ボタン）

クリックできるボタンを表示します。

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="押してみよう"/>

TextViewとButtonを組み合わせると「ボタンを押すとテキストが変わる」という基本的なアプリが作れます。

ConstraintLayoutで部品を中央に配置する

ConstraintLayoutを使うと、部品を画面中央に配置するのも簡単です。

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello UI"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

上下左右すべてを「親（画面全体）」に制約すると、中央に配置されます。