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

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

アプリの見た目はユーザー体験に直結します。どんなに機能が優れていても、UI（ユーザーインターフェース）が使いにくければ利用者は離れてしまいます。
そこで今回は、AndroidアプリのレイアウトとUI設計の基本を解説します。XMLを使った画面デザイン、ボタンやテキストなどの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>

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

---

実際のUI設計の流れ

アプリのUIを作るときは以下の流れで進めるとわかりやすいです。

1. 紙にスケッチする
   どこにボタンを置きたいか、簡単に絵を描いてイメージを固めます。
2. レイアウトを決める
   • 縦に並べたい → LinearLayout
   • 自由に配置したい → ConstraintLayout
3. UI部品を配置する
   XMLにTextViewやButtonを記述して並べます。
4. デザインを整える
   文字サイズ（sp）、余白（dp）、色（color）を指定します。

---

よく使うUI部品一覧

初心者が覚えておくと便利な部品をまとめます。

• TextView … 文字を表示
• EditText … 入力欄（テキストボックス）
• Button … 押せるボタン
• ImageView … 画像を表示
• CheckBox … チェック可能な項目
• RadioButton … 複数から1つを選ぶ
• Switch … ON/OFFの切り替え
• ProgressBar … 読み込み中を表す

これらを組み合わせると、実用的な画面が作れるようになります。

---

UI設計で意識すべきポイント

アプリの画面を作るときは、以下の点を意識すると良いです。

1. 見やすさ
   文字サイズや色のコントラストを工夫しましょう。
2. 操作のしやすさ
   ボタンは小さすぎないようにし、タップしやすい余白を確保します。
3. 統一感
   配置や色に一貫性を持たせるとアプリがプロっぽく見えます。
4. レスポンシブ対応
   画面サイズが違っても崩れないようにConstraintLayoutを活用します。

---

まとめ

今回は、Androidアプリ開発における レイアウトとUI設計の基本 を解説しました。

• XMLレイアウトで画面を作る
• TextViewやButtonなどのUI部品を配置する
• LinearLayoutやConstraintLayoutを活用する
• 見やすく、操作しやすいUIを意識する

次回は「ボタンを押して動かす！イベント処理と基本コードの書き方」として、今回作ったボタンに動きをつけていきます。

アプリは「見た目」と「動作」の組み合わせで完成します。まずはUIを自由に組み立てられるように、いろいろ試してみましょう。