Android Material Design, Perbedaan Snackbar dengan Toast

Apriliany Halimatus Sa'diyyah 10 Agustus 2017

Android Material Design, Perbedaan Snackbar dengan Toast

Setelah Material Design diperkenalkan di Android, banyak perubahan terjadi pada komponen Android UI. Beberapa komponen yang ada telah ditingkatkan dan beberapa komponen baru diperkenalkan untuk pengalaman UI yang menakjubkan. Hari ini saya akan membahas tentang satu komponen UI baru, yaitu Snackbar. Lalu, apa perbedaannya dengan Toast?

Snackbar - Snackbar adalah komponen desain Android yang diperkenalkan sebagai bagian dari Material Design. Snackbar memberikan umpan balik ringan tentang operasi dengan menunjukkan pesan singkat di bagian bawah layar. Snackbar dapat berisi tindakan seperti 'Undo', 'Info', dll. Snackbar secara otomatis hilang setelah batas waktu yang ditetapkan atau setelah interaksi pengguna lain pada layar, terutama setelah interaksi yang memanggil kegiatan baru.

// Creating MultiColor Text
                SpannableStringBuilder snackbarText = new SpannableStringBuilder();
                snackbarText.append("Selamat datang di ");
                int boldStart = snackbarText.length();
                snackbarText.append("CodePolitan");
                snackbarText.setSpan(new ForegroundColorSpan(Color.GREEN), boldStart, snackbarText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                snackbarText.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), boldStart, snackbarText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                snackbarText.append(".");

                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout, snackbarText, Snackbar.LENGTH_LONG)
                        .setDuration(8000);
                snackbar.show();

Variabel coordinatorLayout pada source code diatas merupakan referensi sebuah parent layout dari file ** .xml** yang membungkus semua views di dalamnya. CoordinatorLayout berfungsi untuk mengontrol interaksi antar elements pada layout saat terjadi click events. Contohnya pada penggunaan material design Snackbar dengan FloatingActionButton (FAB), dimana saat FloatingActionButton diklik maka Snackbar akan muncul dan menutupi sebagian dari FAB tersebut. Namun dengan CoordinatorLayout, FAB itu akan otomatis naik ke atas saat SnackBar muncul sehingga tidak ada bagian dari FAB yang terhalangi. CoordinatorLayout juga membuat Snackbar dapat dihilangkan dengan cara di-swipe (geser ke samping).

Dibawah ini adalah salah satu contoh penggunaan Snackbar dengan FloatingButton :

Imgur

Sedangkan, Toast adalah pesan text kecil yang ditampilkan untuk pengguna pada Android. Toast memiliki fungsi untuk memberikan informasi dalam bentuk text atau bisa juga disebut pemberitahuan yang berupa sebuah text yang terlintas, setelah pengguna melakukan aksi.

Toast.makeText(getApplicationContext(), "Ini adalah pesan Toast", Toast.LENGTH_LONG).show();

Contoh penggunaan Toast :

Imgur

Perbedaan antara Snackbar dan Toast :

Snackbar

  • Ditambahkan pada API Level 23
  • Dapat dihilangkan dengan swipping
  • Snackbar dapat digunakan di area dimana pesan popup sederhana perlu ditampilkan bersamaan dengan pilihan untuk melakukan tindakan. Sebagai contoh: Pada aplikasi GMail, saat Anda menghapus Mail, Snackbar di bagian bawah dengan Message '1 Dihapus' dengan tombol action 'Undo'. Saat menekan tombol tindakan 'Undo', mail yang dihapus akan dipulihkan.

Toast

  • Ditambahkan pada API Level 1
  • Tidak dapat dihilangkan dengan swipping
  • Toast dapat digunakan di area di mana pesan Sistem perlu ditampilkan. Sebagai contoh: Saat App Anda mencoba mengunduh JSON dari server namun gagal karena Waktu Server atau tidak ditemukan sumber daya, Anda hanya perlu menampilkan pesan kesalahan yang mengatakan bahwa 'Terjadi Kesalahan'.

Referensi http://programmerguru.com/android-tutorial/snackbar-vs-toast/