Belajar Membuat SnackBar di Android Material Design

Last Updated on 9 years by Mas Herdi

Dengan dirilisnya Android Design Support library, ada beberapa view baru yang ikut diperkenalkan demi mendukung penggunaan Material Design style pada aplikasi-aplikasi Android, diantaranya seperti Floating Action Button, CardView, dan topik yang akan saya bahas kali ini, yaitu SnackBar.

SnackBar adalah view baru yang ada di Android Material Design yang mempunyai fungsi hampir sama seperti Toast, yaitu menampilkan informasi atau pesan singkat untuk pengguna. Bedanya, SnackBar mempunyai posisi default pada bagian bawah layar ketika tampil. Selain itu SnackBar tidak hanya memberikan informasi/pesan kepada pengguna, namun SnackBar juga mempunyai tombol “Action” yang ketika diklik oleh pengguna akan melakukan suatu aksi yang sudah kita definisikan sebelumnya.

Membuat Snack Bar Menggunakan Android Design Support Library

Untuk cara memunculkan SnackBar pada Android, ada baiknya kalian membaca terlebih dahulu pre-requisites di bawah ini :

Pre-requisites :

Pada dasarnya, cara memanggil SnackBar sama seperti pada saat kita ingin memanggil Toast di Android, yaitu menggunakan static-chained method yang bisa langsung dipanggil dari suatu Activity. Di bawah ini adalah contoh cara pemanggilan SnackBar yang akan muncul ketika sebuah tombol diklik. Di tutorial sebelumnya kita sudah belajar untuk menampilkan Floating Action Button, sekarang kita akan mencoba untuk menampilkan sebuah Snack Bar yang akan muncul ketika FloatingActionButton tersebut diklik :

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(findViewById(R.id.ly_fab), "Contoh sebuah Snackbar", Snackbar.LENGTH_LONG).setAction("Action!", this).show();
            }
        });

Bisa dilihat pada kodingan di atas, untuk memanggil SnackBar ada beberapa parameter yang harus diinputkan, yaitu sebuah view dimana SnackBar ingin ditampilkan (biasanya parent view dari layout activity tersebut), kemudian String berisi pesan atau informasi yang ingin disampaikan, dan yang terakhir adalah durasi dari SnackBar tersebut.

Di samping itu kita bisa menambahkan sebuah Action (aksi) yang bisa diklik oleh pengguna pada method setAction, saat kita melakukan pemanggilan SnackBar. Pada method setAction, kita bisa memberikan parameter String  untuk label nama aksi yang akan dilakukan, dan juga sebuah OnClickListener berisi perintah yang akan dilakukan ketika Action tersebut diklik.

                .setAction("Action", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                    // do something
                    }
                })

Lastly, untuk parameter view yang mesti ditambahkan ketika kita memanggil SnackBar, kita bisa memberikan id ke parentview dari layout Activity yang akan menampilkan SnackBar tersebut. Contohnya seperti berikut :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ly_fab"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="@drawable/ic_bg_fab"
    tools:context="com.hmkcode.app.MainActivity">
<!-- rest of layout -->

</RelativeLayout>

Dan kemudian kita bisa menggunakan id dari parent view tersebut (R.id.ly_fab) pada saat pemanggilan SnackBar.

Demo

Yup, tidak usah banyak basa-basi karena ini adalah contoh SnackBar yang tampil ketika Floating Action Button tersebut diklik.

Android SnackBar

Android SnackBar

Seperti biasa, source code ada di GitHub saya, jangan lupa untuk follow dan star projectnya ya 😀 Bagi yang kurang jelas silahkan tanya di bagian komentar.





Download aplikasi kami di Google Play Store


Tutorial Menarik Lainnya :

3 Comments
  1. tsaqif January 8, 2018
  2. tsaqif January 8, 2018

Leave a Reply

Your email address will not be published. Required fields are marked *

TWOH&Co.