【Kotlin/Android Studio】Snackbarの実装方法!背景色や文字色、アクションのカスタマイズ

この記事からわかること
- Android Studio/KotlinでSnackbarを実装する方法
- ポップアップメッセージを実装する
- 表示する長さを調節するには?
- 文字色や背景色、アクションの追加
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Flamingo
- Kotlin:1.8.20

Snackbarとは?
Androidで実装できるSnackbarとは画面下部に表示可能な小さなポップアップ形式のメッセージです。横幅はメッセージの長さにかかわらず画面いっぱいに表示されますが文字数には制限があり、行数は2行までになっているようです。

似たような機能にToastがありますが、アプリ内(フォアグラウンド)で実装する場合はSnackbarを使用することが公式より推奨されています。

また表示できるSnackbarは1つだけであり、新しいSnackbarが表示されようとすると表示中のSnackbarは閉じられます。
Snackbarの実装方法
Snackbarを実装するにはSnackbar
クラスのmake
メソッドで作成し、show
メソッドを呼び出すことでアプリに表示されるようになっています。引数にはView、表示するテキスト、表示する時間を渡します。ボタンのクリックイベントで発火させたい場合は以下のように実装します。
val button:Button = findViewById(R.id.button)
button.setOnClickListener { it
Snackbar.make(it, "やっほー", Snackbar.LENGTH_SHORT).show()
}

ボタンではなく即座に表示させるには何かしらのViewを引数として渡します。
val contextView = findViewById<View>(R.id.main_frame)
Snackbar.make(contextView, "Test", Snackbar.LENGTH_SHORT).show()
表示する時間の長さを調節する
表示する時間はLENGTH_LONG
またはLENGTH_SHORT
、Snackbar.LENGTH_INDEFINITE
のどれかを指定します。
Snackbar.LENGTH_LONG
Snackbar.make(contextView, "Test", Snackbar.LENGTH_LONG).show()
Snackbar.LENGTH_SHORT
Snackbar.make(contextView, "Test", Snackbar.LENGTH_SHORT).show()
Snackbar.LENGTH_INDEFINITE
Snackbar.LENGTH_INDEFINITE
はSnackbarが明示的に閉じられるか、別のSnackbarが表示されるまで表示し続けます。
Snackbar.make(contextView, "Test", Snackbar.LENGTH_INDEFINITE).show()
アクションを追加する
setAction
メソッドを使用することでSnackbarがタップされた時に処理を実行することが可能になります。タップされるとSnackbarが閉じられるのでLENGTH_INDEFINITE
を指定しておくとタップされるまで消えることはありません。
Snackbar.make(contextView, "Test", Snackbar.LENGTH_INDEFINITE)
.setAction("アクション") {
Log.i("tag","msg")
}
.show()

デザイン(見た目)を変更する
SnackbarはToastより拡張性が高く、アクションの追加だけでなく文字色や背景色などを簡単に変更することが可能です。

背景色を変更する
背景色を変更するにはsetBackgroundTint
メソッドを使用します。
Snackbar.make(contextView, "Test", Snackbar.LENGTH_INDEFINITE)
.setAction("アクション") {
Log.i("tag","msg")
}
.setBackgroundTint(Color.DKGRAY)
.show()
文字色を変更する
文字色を変更するにはsetTextColor
メソッドを使用します。
Snackbar.make(contextView, "Test", Snackbar.LENGTH_INDEFINITE)
.setAction("アクション") {
Log.i("tag","msg")
}
.setBackgroundTint(Color.DKGRAY)
.setTextColor(Color.YELLOW)
.show()
文字色(アクション)を変更する
文字色を変更するにはsetActionTextColor
メソッドを使用します。
Snackbar.make(contextView, "Test", Snackbar.LENGTH_INDEFINITE)
.setAction("アクション") {
Log.i("tag","msg")
}
.setBackgroundTint(Color.DKGRAY)
.setTextColor(Color.YELLOW)
.setActionTextColor(Color.CYAN)
.show()
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。