[Android] Mengenal Snackbar

Di postingan sebelumnya kita sudah mengenal toast dan cara menggunakannya. Meskipun toast masih bisa digunakan, saat ini komponen yang direkomendasikan Google untuk menampilkan pesan singkat adalah snackbar. Jika toast menampilkan pesan dengan efek fade in/fade out, snackbar menampilkan pesan dengan efek slide in dari bagian bawah layar.

Snackbar bisa digunakan di dalam viewgroup biasa atau viewgroup ‘CoordinatorLayout’. Jika menggunakan ‘CoordinatorLayout’, kita bisa mendismiss snackbar dengan menswipe nya ke kanan. Selain itu jika ada komponen yang berada di bagian bawah, komponen ini akan bergeser ke atas snackbar yang sedang tampil. Biasanya komponen ini adalah ‘FloatingActionButton’.

Untuk membuat snackbar, kita bisa menggunakan method ‘make()’.

Snackbar make (View view, int resId, int duration)
Snackbar make (View view, CharSequence text, int duration)

Parameter pertama adalah root viewgroup (viewgroup paling luar) dari layout yang digunakan.
Parameter kedua adalah text yang akan ditampilkan. Bisa dalam bentuk string resources ataupun literal string/charsequence.
Parameter ketiga adalah durasi dari snackbar.

Snackbar.make(root_container, "Snackbar Message", Snackbar.LENGTH_SHORT).show()

Ada tiga durasi yang sudah disediakan class Snackbar untuk kita gunakan:

Snackbar.LENGTH_SHORT
Snackbar.LENGTH_LONG
Snackbar.LENGTH_INDEFINITE

Sama seperti toast, snackbar akan tampil secara berurutan. Kita tidak bisa menampilkan dua atau lebih snackbar dalam waktu yang bersamaan.

Snackbar juga bisa memiliki button yang bisa user gunakan untuk merespon pesan yang sedang ditampilkan. Contohnya button ‘UNDO’ ketika user baru saja menghapus email di sebuah aplikasi email client. Untuk menampilkan button ini, kita bisa memanggil method ‘setAction()’ dari class Snackbar.

Snackbar setAction (int resId, View.OnClickListener listener)
Snackbar setAction (CharSequence text, View.OnClickListener listener)

Parameter pertama adalah text yang akan ditampilkan sebagai button.
Parameter kedua adalah interface ‘OnClickListener’ dari class View, yang berfungsi sebagai callback ketika user mengklik button snackbar.

Snackbar.make(root_container, "Snackbar Message", Snackbar.LENGTH_SHORT)
        .setAction("Action") {
            Log.d("Snackbar", "Action is selected")
        }
        .show()
}

Pada contoh snippet di atas, kita menggunakan lambda sebagai implementasi dari interface ‘View.OnClickListener’.

Untuk mengganti warna text, kita bisa memanggil method ‘setTextColor()’.

Snackbar setTextColor (int color)

Untuk mendapatkan callback ketika snackbar muncul atau hilang, kita bisa menggunakan method ‘addCallback()’.

B addCallback (BaseCallback callback)

Berikut contoh snippet code yang mencakup semua method di atas.

Snackbar.make(root_container, "Snackbar Message", Snackbar.LENGTH_SHORT)
        .setTextColor(
             ContextCompat.getColor(this, android.R.color.holo_red_light)
        )
        .setAction("Action") {
              Log.d("Snackbar", "Action is selected")
        }
        .addCallback(object : BaseTransientBottomBar.BaseCallback<Snackbar>() {
             override fun onShown(transientBottomBar: Snackbar?) {
                  super.onShown(transientBottomBar)
                  Log.d("Snackbar", "Snackbar is shown")
             }

             override fun onDismissed(transientBottomBar: Snackbar?, event: Int) {
                  super.onDismissed(transientBottomBar, event)
                  Log.d("Snackbar", "Snackbar is dismissed")
             }
        })
        .show()
}

Yuuup, kira-kira seperti itu cara menggunakan snackbar. Thanks!

Source code: https://github.com/bonioctavianus/android-snackbar-example

Reference: https://developer.android.com/training/snackbar