【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【Android】Kotlinでアプリ画面にダイアログを出す方法① | AlertDialog, カスタムダイアログの実装について徹底解説

【Android】Kotlinでアプリ画面にダイアログを出す方法① | AlertDialog, カスタムダイアログの実装について徹底解説
すだ

みなさまこんにちは〜!
メモリアインクのすだです。

本日は、
Kotlinでアプリ画面にダイアログを出す実装方法について
実際のコードを利用して徹底解説していきます!

この記事を読んでわかること…
・ダイアログとは?
・AlertDialogの使い方
・ダイアログをカスタマイズする方法

目次

環境

  • Kotlin (ver 1.9.0)
  • Android Studio (Giraffe | 2022.3.1 Patch 3)

ダイアログとは?

アプリ開発では、ユーザーに通知や確認、入力を促す際に「ダイアログ」を活用します。
ダイアログとは、画面上に表示される小さなウィンドウで、重要なアクションや選択肢をユーザーに示す役割を果たします。
これにより、ユーザーに注意を引きつけ、適切な操作を促すことができます。

【Android】Kotlinでアプリ画面にダイアログを出す方法① | AlertDialog, カスタムダイアログの実装について徹底解説

AlertDialogとは?(アラートダイアログ)

AlertDialogは、最もシンプルなダイアログで、
確認メッセージや選択肢(例:「OK」「キャンセル」)を表示する際に使用されます。

AlertDialogの基本的な使い方

それでは早速、アプリ画面を表示したタイミングでダイアログが表示されるよう実装してみましょう!

① まずは、ダイアログの中身の設定と表示を行う処理を実装していきます。

import android.app.AlertDialog
import android.content.Context

fun showSimpleDialog(context: Context) {
    // AlertDialogのビルダーを作成
    val builder = AlertDialog.Builder(context)
    builder.setTitle("確認") // ダイアログのタイトル
    builder.setMessage("この操作を実行しますか?") // ダイアログのメッセージ

    // OKボタンの設定
    builder.setPositiveButton("OK") { _, _ ->
        // OKボタンが押された時の処理
        println("OKが選択されました")
    }

    // キャンセルボタンの設定
    builder.setNegativeButton("キャンセル") { dialog, _ ->
        // キャンセルボタンが押された時の処理
        dialog.dismiss() // ダイアログを閉じる
    }

    // ダイアログを表示
    builder.create().show()
}

1.// AlertDialogのビルダーを作成

Androidでダイアログを作成するためのクラスです。
builder はダイアログの設定を行うためのインスタンス、引数 context はダイアログを表示するためのコンテキスト(ActivityやFragment)です。

setTitle:ダイアログのタイトル部分に表示するテキスト
setMessage:ダイアログ内のメッセージ部分に表示するテキスト

2.// OKボタンの設定
// キャンセルボタンの設定


AlertDialogには3種類のボタンを設定できます:

・Neutral Button:中立的なアクション(例:「詳細」「後で」)
・Positive Button:前向きなアクション(例:「OK」「はい」)
Negative Button:キャンセルや拒否のアクション(例:「キャンセル」「いいえ」)

最初の引数は ボタンのテキスト(「OK」)、2つ目の引数は クリック時の処理です。
_, _ はボタンが押されたときの引数(dialogwhich)ですが、ここでは使わないので _ で無視しています。


②そして、ダイアログを表示したい箇所で呼び出します。

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

    // ダイアログを表示
    showSimpleDialog(this)
}

それではビルドして、アプリ画面を表示してみましょう。

【Android】Kotlinでアプリ画面にダイアログを出す方法① | AlertDialog, カスタムダイアログの実装について徹底解説

画面を表示すると、ダイアログが表示されました!

カスタムダイアログとは?

カスタムダイアログの基本的な使い方

①レイアウトファイルを作成し、ダイアログとして表示したいレイアウトを実装します。

res/layout/custom_dialog.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="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/customTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="カスタムダイアログ"
        android:textSize="18sp" />

    <EditText
        android:id="@+id/customEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="入力してください" />
</LinearLayout>

②カスタムレイアウトを使ってダイアログを作成していきます。

import android.app.AlertDialog
import android.content.Context
import android.view.LayoutInflater

fun showCustomDialog(context: Context) {
    // カスタムレイアウトを読み込む
    val dialogView = LayoutInflater.from(context).inflate(R.layout.custom_dialog, null)

    // AlertDialogを作成
    val builder = AlertDialog.Builder(context)
    builder.setView(dialogView) // カスタムレイアウトをセット
    builder.setTitle("あなたの好きな食べ物は?")

    // OKボタンの処理
    builder.setPositiveButton("送信") { _, _ ->
        val inputText = dialogView.findViewById<EditText>(R.id.customEditText).text.toString()
        println("入力された内容: $inputText")
    }

    // キャンセルボタンの処理
    builder.setNegativeButton("キャンセル") { dialog, _ ->
        dialog.dismiss()
    }

    // ダイアログを表示
    builder.create().show()
}

1.// AlertDialogを作成
setView(dialogView):ダイアログにカスタムレイアウト(dialogView)を設定します。

2.// ダイアログを表示
create():ここで、設定内容(タイトル、カスタムレイアウト、ボタンなど)をもとに AlertDialog インスタンスを作成します。


③そして、ダイアログを表示したい箇所で呼び出します。

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

    // カスタムダイアログを表示
    showCustomDialog(this)
}

それではビルドして、アプリ画面を表示してみましょう。

【Android】Kotlinでアプリ画面にダイアログを出す方法① | AlertDialog, カスタムダイアログの実装について徹底解説

自分でカスタマイズしたレイアウトの内容で、ダイアログを表示することができました!

まとめ

おつかれさまでした!いかがでしたでしょうか!

シンプルなダイアログ表示から、自分でカスタマイズする方法まで幅広く知っておくことで
Androidアプリの開発を自在に行うことができそうです。

ぜひぜひマスターしてくださいね!

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか?

それではまた次の記事でお会いしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

コメント一覧 (1件)

コメントする

目次