😺

[Android][kotlin]独自レイアウトDialogFragmentのサンプル

に公開
Android
Kotlin
dialog
zennfes2025free
tech

Abstract

  • Androidで独自デザインDialogFragmentの実装のサンプル
  • その説明

概要

いつもAlertDialogを使っててそれでいいかと思ってけど、ちょっとViewを追加したいなーと思ってサンプルコードを作成してみた。
という事でソースコードはgithubに公開しました。
https://github.com/aaaa1597/AndKot-CustomDialogFragmentSample.git

使い方

上記githubからCloneなりzipダウンロードして、Android Studioで開くだけ。

実装のポイント

独自レイアウトxml

独自レイアウトはxmlで定義してるんだけど、Topレベルのレイアウトはmatch_parent,match_parentにしてて、それで画面いっぱいに広がるんでなくいい感じにDialogになってくれる。

custom_layout_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:textAppearance="?attr/textAppearanceHeadline6"
        android:paddingBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/dialog_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:textAppearance="?attr/textAppearanceBody2"
        android:paddingBottom="16dp"
        app:layout_constraintTop_toBottomOf="@id/dialog_title"
        app:layout_constraintStart_toStartOf="parent"/>

    <LinearLayout
        android:id="@+id/dialog_buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="end"
        app:layout_constraintTop_toBottomOf="@id/dialog_message"
        app:layout_constraintEnd_toEndOf="parent" >

        <Button
            android:id="@+id/button_negative"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cancel" />

        <Button
            android:id="@+id/button_positive"
            style="?attr/materialButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ok"
            android:layout_marginStart="8dp" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Diaglogの実体

DialogFragmentを継承してonCreateDialogをオーバーライドする。
値の戻りはViewModelで渡すのが手っ取り早い気がしてる。

※_bindingの使い方は↓のがAndroid推奨らしい。

CustomLayoutDialog.kt
package com.aaa.dialogfragmentsample

importは省略

class CustomLayoutDialog : DialogFragment() {
    private var _binding: CustomLayoutDialogBinding? = null
    private val binding get() = _binding!!

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val inflater = requireActivity().layoutInflater
        _binding = CustomLayoutDialogBinding.inflate(inflater, null, false)

        binding.dialogTitle.text = getString(R.string.confirm)
        binding.dialogMessage.text = getString(R.string.wanttoaction)

        binding.buttonPositive.setOnClickListener {
            Toast.makeText(requireContext(), R.string.pushedok, Toast.LENGTH_SHORT).show()
            dismiss()
        }

        binding.buttonNegative.setOnClickListener {
            Toast.makeText(requireContext(), R.string.pushedcancel, Toast.LENGTH_SHORT).show()
            dismiss()
        }

        val builder = MaterialAlertDialogBuilder(requireContext())
            .setView(binding.root)
            .setCancelable(false)

        return builder.create()
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

Theme

themes.xmlに下記追加して、AlertDiaglogに似せているのがポイント。

themes.xml
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- AlertDialog風のスタイル -->
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog</item>
    </style>

以上。これでDialogがはかどるはず。
お役に立ちますように。。。

Discussion