• 2023/8/8
• 3分

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

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

公式リファレンス：Snackbars

環境

• 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()

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。