Zenn
🤖

📱【Android開発初心者向け】EditText・Button・setOnClickListener・Toast入門 ─

に公開
Android
Kotlin
Android Studio
プログラミング
アプリ開発
tech

✨ 概要

「スマホアプリを作ってみたいけど、Androidのコードや画面部品の意味がわからない…」
そんな初心者向けに、今回は

  • EditText（ユーザー入力欄）
  • Button（ただのボタン）
  • setOnClickListener（ボタンが押されたときの処理）
  • Toast（短いダイヤログ）

を 上記を使って簡単なアプリを作る例つき で解説します！

🔍 この記事でわかること

  • 概要で話した基本UI部品の意味
  • Kotlinで"ボタンを押されたとき"のコードの書き方
  • 短いメッセージを画面に表示する仕組み（Toast）の使い方

📦 対象読者

  • プログラミング初心者
  • WebエンジニアやiOSエンジニアなど畑が違うエンジニア
  • Kotlinの基礎を学んでみたい
  • 一旦動くものを作ってみたい

🏗 1️⃣ EditText（入力欄）とは？

ユーザーが文字や数字を入力できる枠

たとえば：

  • 電話番号を入れる欄
  • メールアドレスを入れる欄
  • 小数点つきの数字を入れる欄（例：3.14）

Androidでは次のようにXMLに書きます。

<EditText
    android:id="@+id/editTextNumber"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="数字を入力してください"
    android:inputType="numberDecimal" />

ポイント解説：

  • android:id → コード側から呼ぶときの名前
  • android:hint → 入力欄にうっすら表示される説明文
  • android:inputType="numberDecimal" → 数字＋小数点の入力を許可する設定（数値以外は入力できない）

🏗 2️⃣ Button（ボタン）とは？

ユーザーがタップして何かを実行する部品

Androidではこう書きます。

<Button
    android:id="@+id/buttonSubmit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="送信" />

ポイント解説：

  • android:text → ボタンに表示する文字（例：「送信」）

🏗 3️⃣ setOnClickListener（ボタンが押されたときの処理）とは？

「ボタンが押されたときに何をするか」をプログラムで決める仕組み

書き方の基本はこうです。

button.setOnClickListener {
    // この中にボタンが押されたときの動きを書く
}

例：

  • 入力欄の中身を取り出して表示する
  • 画面遷移する
  • APIを呼び出す
  • などなど,,,

🏗 4️⃣ Toast（トースト通知）とは？

短時間だけ画面に出て消えるメッセージ（例：「保存しました」）

Androidでの書き方はこんな感じ

Toast.makeText(this, "ボタンが押されました！", Toast.LENGTH_SHORT).show()

ポイント解説：

  • this → 今の画面（Activity）を指す
  • "ボタンが押されました！" → ユーザー側に表示されるメッセージ
  • Toast.LENGTH_SHORT → 表示時間の長さ(この場合は短い)

📱 全部組み合わせたサンプルアプリ

ここまでを使って、入力欄に入れた数字をボタンが押されたらToast表示するシンプルアプリを作ります。

🖼 画面レイアウト（activity_main.xml） 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <EditText
        android:id="@+id/editTextNumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="数字を入力してください"
        android:inputType="numberDecimal" />

    <Button
        android:id="@+id/buttonSubmit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="送信" />
</LinearLayout>

💻 Kotlinコード（MainActivity.kt） 

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

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

        val editText = findViewById<EditText>(R.id.editTextNumber)
        val button = findViewById<Button>(R.id.buttonSubmit)

        button.setOnClickListener {
            val input = editText.text.toString()
            Toast.makeText(this, "入力値：$input", Toast.LENGTH_SHORT).show()
        }
    }
}

🔑 まとめ：この記事の重要ポイント

用語 意味・役割
EditText 入力欄。数字・文字をユーザーが入れる場所
Button 押すことで処理を実行するボタン
setOnClickListener ボタンが押されたときの動作を決める仕組み
Toast 画面に短く表示される軽量通知メッセージ

Discussion