はじめに

AndroidのDesign Support LibraryにあるSnackbarの使い方について

環境

kotlin version: 1.2.30
support lib version: 27.1.1

リファレンス等

Add an action to a message | Android Developers

使い方

表示

Snackbarのコンストラクタはprivateになっているため make() を使い、 show() で表示する。 make() の1つ目の引数はSnackbarを表示させるviewであり、対象となったviewのbottomに表示される。2つ目はメッセージで3つ目は表示時間。

Snackbar.make(view, "message", Snackbar.LENGTH_SHORT).show()

表示時間

Snackbarのdurationを使用すると以下表の時間表示される。以下の表以外でもミリ秒で時間を指定すればその時間表示される。

Duration	表示時間
Snackbar.LENGTH_SHORT	1.5秒
Snackbar.LENGTH_LONG	2.75秒
Snackbar.LENGTH_INDEFINITE	無限

アクション

Snackbarには1つだけボタンをつけることができる。

Snackbar
  .make(view, "message", Snackbar.LENGTH_SHORT)
  .setAction("action", {
    // actionボタンを押した時に呼ばれる
  })
  .show()

アクションボタンのテキストカラー

アクションボタンのテキストカラーを変更することができる。

Snackbar
  .make(view, "message", Snackbar.LENGTH_SHORT)
  .setAction("action", {  })
  // アクションボタンのテキストがここで指定した色になる
  .setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
  .show()

動き

実際に動かすとこんな感じになります。 f:id:hiring-y:20180603234916g:plain

ソースコード

記事を書くに当たって作成したソースコードを載せておきます。

class SnackbarActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = DataBindingUtil.setContentView<ActivitySnackbarBinding>(this, R.layout.activity_snackbar)
    val root = binding.root

    binding.shortLength.setOnClickListener {
      Snackbar
          .make(root, "Short length", Snackbar.LENGTH_SHORT)
          .show()
    }

    binding.longLength.setOnClickListener {
      Snackbar
          .make(root, "Long length", Snackbar.LENGTH_LONG)
          .show()
    }

    binding.indefiniteLength.setOnClickListener {
      Snackbar
          .make(root, "Indefinite length", Snackbar.LENGTH_INDEFINITE)
          .show()
    }

    binding.action.setOnClickListener {
      Snackbar
          .make(root, "Action", Snackbar.LENGTH_INDEFINITE)
          .setAction("action", {
            Toast.makeText(this, "on click action", Toast.LENGTH_SHORT).show()
          })
          .show()
    }

    binding.actionTextColor.setOnClickListener {
      Snackbar
          .make(root, "Action text color", Snackbar.LENGTH_INDEFINITE)
          .setAction("action", {
            Toast.makeText(this, "on click action", Toast.LENGTH_SHORT).show()
          })
          .setActionTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
          .show()
    }
  }
}

所感

使い方がとても簡単ですし、簡単な情報をユーザーに伝える手段としてはとても良いと思いました。Toastもすでにありますが、アクションをボタンがあることがさらに便利にさせているし、何よりToastに比べてカッコイイ。

開発Tips&ログ

iOS/Androidアプリ、WEB開発、インフラなどソフトウェア開発についての技術ブログ。

Snackbarの使い方