Kotlinで画面を作る！レイアウトXMLとビューの基本操作をやさしく解説

Kotlinで画面を作る！レイアウトXMLとビューの基本操作

先生と生徒の会話形式で理解しよう

生徒

「KotlinでAndroidアプリを作るとき、どうやって画面を作るんですか？」

先生

「Kotlinでは、レイアウトXMLファイルというものを使って、画面の見た目を作ります。そして、その画面にあるボタンや文字などの部品（＝ビュー）をKotlinのコードで操作できるようにしますよ。」

生徒

「なるほど、XMLとKotlin両方を使うんですね！でも難しそう…」

先生

「安心してください。これから一つずつ、基本からやさしく説明していきます！」

1. レイアウトXMLとは？Kotlinの画面設計で使うファイル

Androidアプリでは、画面の見た目をXML（エックスエムエル）というファイルで作ります。レイアウトXMLと呼ばれるこのファイルでは、ボタンや文字などの配置やデザインを記述します。XMLは「文章の構造を表す言語」で、難しそうに聞こえますが、基本的な書き方を覚えれば大丈夫です。

2. 画面を作る基本のレイアウトXMLの例

実際に、シンプルなボタンと文字を画面に表示するXMLを見てみましょう。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="こんにちは！"
        android:textSize="18sp" />

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

</LinearLayout>

このXMLでは、縦に並んだ「テキスト」と「ボタン」を配置しています。レイアウトの種類には「LinearLayout」や「ConstraintLayout」などがありますが、初心者はまずLinearLayout（リニアレイアウト）から始めるのがおすすめです。

3. Kotlinでビュー（ButtonやTextView）を操作してみよう

今度は、XMLで作ったボタンをKotlinのコードで操作してみましょう。たとえば、ボタンを押したら「こんにちは！」の文字を「ボタンが押されました！」に変えるプログラムです。


import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView = findViewById<TextView>(R.id.textView)
        val button = findViewById<Button>(R.id.button)

        button.setOnClickListener {
            textView.text = "ボタンが押されました！"
        }
    }
}

findViewByIdという関数で、XMLの中にあるID付きの部品をKotlin側から使えるようにします。そして、setOnClickListenerでボタンが押された時の動きを設定します。

4. IDとは？画面の部品を見分ける名前

XMLで書いたandroid:id="@+id/button"のような記述は、その部品に「名前」をつけている部分です。Kotlinでこの部品を使うとき、このIDを指定して取り出すことができます。

「@+id/○○」の○○部分がID名になります。IDがないと、Kotlinからその部品を操作できないのでとても重要です。

5. レイアウトの構造を理解しよう！LinearLayoutとは？

LinearLayout（リニアレイアウト）は、部品を縦か横に並べるレイアウトの方法です。今回の例では「vertical（縦）」なので、上から順番に文字とボタンが並びます。

他にも、horizontalにすれば横並びになります。たとえば、左右にボタンを並べたいときに使います。

6. レイアウトXMLとKotlinコードの関係をイメージしよう

レイアウトXMLは、アプリの見た目を作る設計図のようなものです。そしてKotlinコードは、その設計図で使う部品に動きをつける仕組みです。

たとえば、レイアウトXMLでボタンを置くだけでは、画面に表示されるだけです。そのボタンが押されたら何かをするには、Kotlinコードで動作を設定する必要があります。

7. 実行結果を見てみよう

このアプリを起動すると、最初は「こんにちは！」と表示され、ボタンを押すと文字が変わります。


こんにちは！
（ボタンを押す）
→ ボタンが押されました！

8. よくあるエラーと初心者がつまづくポイント

以下のような点でエラーになることが多いので注意しましょう。

XMLで部品にIDをつけ忘れて、findViewByIdが失敗する
レイアウトの種類（LinearLayoutやConstraintLayout）を間違える
ボタンのクリック処理が動かない（setOnClickListenerが設定されていない）

エラーが出たときは、エラーメッセージをGoogle検索してみるのも大切です。

9. Kotlinで画面を作る第一歩として覚えておきたいこと

KotlinでAndroidアプリを作るには、「レイアウトXMLで見た目を作り、Kotlinコードで動きをつける」という2つの作業が基本になります。

これらはまるで、「おもちゃのロボットを組み立てて（XML）、プログラムで命令を与える（Kotlin）」ようなもの。最初は小さな画面でも、慣れれば自由にアプリをデザインできます。

Kotlinを基礎からしっかり学びたい人や、 Java経験を活かしてモダンな言語にステップアップしたい人には、定番の入門書がこちらです。

基礎からわかるKotlinをAmazonで見る

※ Amazon広告リンク

まとめ

KotlinでAndroidアプリの画面を作成する際の基本的な流れとしては、まずレイアウトXMLで画面の構成を定義し、その上でKotlinコードを用いて各部品（ビュー）に動きを加える、という2段階の構成が重要になります。この記事では、「TextView」や「Button」といった代表的なビューの使い方や、XMLでのID指定とKotlinでの操作方法を中心に、初心者でも取り組みやすいシンプルな例を通じて解説しました。

レイアウトXMLは、見た目を設計するための設計図として機能します。例えば、LinearLayoutを使えば、縦または横にビューを並べることができますし、他にもConstraintLayoutなどの高度なレイアウトも存在します。最初は構造を理解しやすいLinearLayoutから学ぶことで、無理なくステップアップできます。

一方で、Kotlinのコードでは、XMLで定義した各部品に対して「どのように動作させるか」をプログラムで記述していきます。その際に使うfindViewById関数は非常に重要で、IDを通じてXMLとKotlinの橋渡しをする役割を担っています。ボタンを押したときの反応を作るためにはsetOnClickListenerを使うことで、ユーザーの操作に反応するインタラクティブな画面が完成します。

画面構成とその動作をそれぞれ別々に考えることで、アプリ開発において設計と実装を効率よく進めることができるのも、Android開発の大きな魅力のひとつです。以下に、今回学んだ内容を反映したシンプルなサンプルコードを再掲します。


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="こんにちは！"
        android:textSize="18sp" />

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

</LinearLayout>


import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView = findViewById<TextView>(R.id.textView)
        val button = findViewById<Button>(R.id.button)

        button.setOnClickListener {
            textView.text = "ボタンが押されました！"
        }
    }
}

Kotlinでアプリを作る際は、XMLとコードの関係性を意識しながら、「どこで見た目を作り」「どこで動きを設定するか」を明確に理解しておくことが大切です。これにより、エラーを避けることができ、保守性の高いコードを書けるようになります。

今後さらにアプリ開発に挑戦していく中で、「レイアウトXMLとKotlinの連携」「findViewByIdの使い方」「イベントリスナーの設定方法」などの基本スキルはあらゆる場面で活かされるので、ぜひ繰り返し学習して確実に身につけましょう。

先生と生徒の振り返り会話

生徒

「Kotlinで画面を作るには、レイアウトXMLとKotlinのコードがセットになっているんですね！」

先生

「その通りです。XMLで見た目を作り、Kotlinで動きを加えるという2つのステップが基本です。」

生徒

「findViewByIdを使って部品をコードで操作できるのが便利ですね。IDのつけ忘れに注意しないと…」

先生

「とても良い気づきです。IDはKotlinとの接点なので、必ず設定しておきましょう。そして、レイアウトの構造も意識して、正しくビューを配置することが重要です。」

生徒

「LinearLayoutなら縦や横に並べられるから、初心者でもレイアウトを組みやすいですね！」

先生

「そのとおりです。まずは基本的なレイアウトやビュー操作を身につけることで、これからどんどん応用もできるようになりますよ！」

【未経験OK】Kotlinで始めるプログラミング入門｜ゼロから「動く喜び」を体験する60分

「プログラミングを始めたい」を形にする。最新言語Kotlinで楽しむ、ものづくりの第一歩。

本講座は、プログラミング経験が全くない方のためのエントリー講座です。「コードを書くってどういうこと？」という基本から、世界中で使われている最新言語Kotlin（コトリン）を使って、実際にプログラムを動かすまでを体験します。難しい理屈よりも、まずは「自分の手で動かす楽しさ」を最短距離で実感していただきます。