アラートダイアログの表示位置を変更する方法
画面中央に表示されるポップアップがUX的に相応しくなくなってきている?
ヒーラー
ダイアログが画面中央だと、指が届きにくくUXを悪くしてしまうため、画面下に寄せたい
はじめに
AlertDialogはそのまま使用すると画面中央にポップアップされます。
最近ではデバイスの画面サイズも大きくなり、画面中央をタップするにも指を伸ばさなければならず、UXに影響を及ぼしつつあります。
そこで表示位置を画面下部に変更する方法を紹介します。
小さいなことですが少しでもUX改善につながればと思います。
対処方法
ダイアログの表示位置を画面下部に変更するのは、以下のコードで可能です。
val dialog = AlertDialog.Builder(requireContext()).setTitle(title)
.setNegativeButton(R.string.cancel, { dialog, which ->
//ボタン押下後処理
}.create()
//画面下部に表示
val attribute = dialog.window?.attributes
attribute?.gravity = Gravity.BOTTOM
dialog.window?.attributes = attribute
dialog.show()
ダイアログの表示位置が画面下に移動したことによって、ボタンや選択肢が押しやすくなります。
画面下を中心に説明しましたが、同じ要領で下以外にも自由に表示位置を変えることができます。
補足
UXの目線で、ダイアログの表示範囲外をタップした場合のケースにも触れておきます。
通常、ダイアログの外側をタップすると、ダイアログが閉じて、キャンセルしたとみなされます。
何も考えなければ、上記画像の例では、「次に進む」を押すことで次のアクションに進み、ダイアログ外をタップするとなかったことになり次のアクションには進みません。
しかし、上記画像のクイズアプリの例では、回答した後の正解表示にダイアログを使用しているため、ダイアログ外をタップされても次のアクション(次の問題)に進んでほしいところです。
したがって、ダイアログを閉じたときのイベントを取得して、次のアクションに進むようにしています。
UXの観点からも、ダイアログ内のボタンが押しづらいケースをカバーするのに活用できるかと思います。
ダイアログを閉じたときのイベントで処理させるには、setOnDismissListenerを使用することで可能です。
コードは以下のとおりです。
val dialog = AlertDialog.Builder(requireContext()).setTitle(title)
.setNegativeButton(R.string.cancel).setOnDismissListener {
//ボタン押下後処理
}.create()
//画面下部に表示
val attribute = dialog.window?.attributes
attribute?.gravity = Gravity.BOTTOM
dialog.window?.attributes = attribute
dialog.show()