この記事ではAndroidのSnackBarを実装する方法を紹介します。
Snackbarはアプリ内に短い通知を表示する機能です。
Snackbarには背景色や文字色などカスタマイズできる要素が沢山あり、カスタマイズすることでアプリのデザイン性や通知の視認性を高めることができます。
本記事では基本的なSnackbarの実装方法だけでなく、Snackbarをカスタマイズする方法も5つ紹介しています。
Kotlinのサンプルコード付きで説明しているので、是非参考にして実装してみてください。
Snackbarとは
Snackbarはアプリ内に短い通知を表示する機能です。
「メールを送信しました」や「保存しました」など、ユーザーの動作に関する通知を表示するときにSnackbarを使います。
Snackbarと似ている機能にToastがあります。ToastはSnackbarと違い、ユーザーの動作に関係ない通知を表示するときに使われる機能です。
Toastの実装方法は以下の記事で解説しているので、こちらも併せてご覧ください。
完成イメージ
今回は、基本のSnackbarの実装方法とともに
- ボタンを配置
- ユーザーに閉じられるまでSnackbarを表示
- 文字の色を変更
- 背景の色を変更
- ボタンの文字の色を変更
以上の5つの機能・要素のカスタマイズ方法を解説します。
実装
ここからSnackbarの実装方法を解説していきます。
基本のSnackbar
こちらが基本となるSnackbarのコードです。
Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_SHORT).show()第1引数にはSnackbarを表示するView、第2引数にSnackbarに表示する内容、第3引数にSnackbarを表示する長さを記述します。
第1引数に表示するViewは、以下のコードのようにレイアウトのView（このコードではConstraintLayout）にidを追加してActivityで設定します。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/view">
</androidx.constraintlayout.widget.ConstraintLayout>MainActivity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val button:Button = findViewById(R.id.snackbarButton)
val view:View = findViewById(R.id.view)//ここでViewを定義
button.setOnClickListener {
Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_SHORT).show()
}
}第3引数に設定できるのは以下の3種類です。
- LENGTH_SHORT・・・短時間表示する
- LENGTH_LONG・・・LENGTH_SHORTよりも長い時間表示する
- LENGTH_INDEFINITE・・・ユーザーに閉じられるか、次のSnackbarが表示されるまで表示する
表示する状況に合わせて使い分けてみてください。
最後に.show()を記述し忘れるとSnackbarが表示されないので注意してください。
Snackbarが表示されない時は.show()があるか確認してみましょう。
①ボタンを配置
Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_SHORT)
.setAction("閉じる"){
//スナックバーのボタンが押された時の処理
}.show()Snackbarへのボタンの配置は、基本コードのmake()の後に.setActionを追加で記述して実装します。
.setActionの括弧の中にボタンのテキスト、波括弧の中にボタンが押された時の処理を記述してください。
②ユーザーに閉じられるまでSnackbarを表示
val snackBar = Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_INDEFINITE)
snackBar.setAction("閉じる"){
snackBar.dismiss()
}.show()ユーザーに閉じられるまでSnackbarを表示するには、SnackBar.makeの第3引数を.LENGTH_INDEFINITEに変更します。
上のコードでは、Snackbarのボタンが押された時に.dismiss()を呼び出してSnackbarを閉じるようになっています。
③文字の色を変更
Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_SHORT)
.setTextColor(Color.RED)
.show()Snackbarの文字色は.setTextColorを追加で記述して色を指定することで変更できます。
④背景の色を変更
Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_SHORT)
.setBackgroundTint(Color.BLUE)
.show()Snackbarの背景色は.setBackgroundTintを追加して色を指定して変更します。
⑤ボタンの文字の色を変更
Snackbar.make(view,"ボタンが押されました",Snackbar.LENGTH_SHORT)
.setAction("ボタン"){
//スナックバーのボタンが押された時の処理
}
.setActionTextColor(Color.)
.show()Snackbarのボタンの文字色を変更するときは.setActionTextColorを記述して色を指定しましょう。
まとめ
今回はSnackbarの実装方法について解説しました。いかがだったでしょうか。
基本的なSnackbarは1行で簡単に実装できます。
Toastに比べるとボタンを配置したり背景色を変えたりできてカスタマイズ性も高いです。
アプリの機能やテーマカラーなどに合わせてSnackbarも色々カスタマイズしてみてもいいかもしれません。この記事で紹介したコードを参考にして実装いただければと思います。
参考：
Snackbar | Android Developers
Snackbars – Material Design
以下の記事ではToastを表示する方法を解説しています。
ToastもSnackbarのようにアプリにメッセージを表示するときに使う機能です。
こちらも併せてご覧ください。
コメント