Cara Membuat SnackBar di Android Material Design

Assalamualaikum Warahmatullahi Wabarakatuh.

SnackBar adalah salah satu view yang termasuk kedalam Android Material Design, view tersebut mempunyai fungsi hampir sama dengan Toast, yaitu untuk menampilkan pesan/informasi singkat pada user. Perbedaannya yaitu, SnackBar mempunyai posisi default pada bagian bawah layar ketika tampil. Selain itu juga, SnackBar mempunyai tombol “Action”, ketika diklik oleh user, SnackBar akan melakukan sebuah aksi yang telah kita definisikan sebelumnya.

Pada tutorial sebelumnya, saya sudah membahas mengenai pengguaan Toast pada Android, jika kalian pernah membuatnya, fungsi SnackBar bisa kalian gunakan sebagai alternative lain dari Toast, atau bisa kalian kombinasikan keduanya. Mari kita simak tutorial berikut ini.

Materi Lainnya Yang Direkomendasikan:

• Cara Membuat Floating Action Button Material Design
• Tutorial Membuat TextInputLayout Material Design
• Cara Membuat Custom Toolbar Material Design

Membuat SnackBar di Android Material Design

Buka Android Studio kalian, bualah project baru dan juga new Empty Activity, untuk kita gunakan sebagai MainActivity.

Selanjutnya buka file activity_main.xml pada project kalian, disini kita akan menambahkan sebuah Button, saat Button tersebut diklik, maka akan muncul pesan atau informasi singkat pada SnackBar.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/klikme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Klik Disini Gan!" />

</RelativeLayout>

Pada kode xml tersebut, disini kita menemptkan Button pada posisi berada di tengah layar, seperti berikut ini.

Pada umunya, cara memanggil SnackBar sama seperti Toast, yaitu menggunakan static-chained method yang bisa langsung dipanggil pada suatu Activity. Pada contoh dibawah ini, kita akan mencoba memanggil SnackBar dengan menggunakan Button dan juga akan kita kombinasikan dengan Toast, saat tombol action pada SnackBar diklik, makan pesan dari Toast akan muncul. Coba kalian perhatikan source code berikut ini.

package android.cianjur.developer.net.basicandroid;

import android.content.Context;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button ClickMe = findViewById(R.id.klikme);
        ClickMe.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Ini Adalah SnackBar", Snackbar.LENGTH_LONG)
                        .setAction("Klik Juga Disini", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        //Memunculkan Pesan Toast, Saat Action Diklik
                        Toast.makeText(getApplicationContext(),"Belajar Android", Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });
    }
}

Penjelasan:

Untuk memanggil SnackBar ada beberapa parameter yang harus diinputkan, yaitu sebuah view dimana SnackBar ingin ditampilkan, Lalu String yang berisi pesan atau informasi yang ingin disampaikan, dan terakhir adalah durasi dari SnackBar tersebut.

Selain menambahkan pesan, pada SnackBar tersebut, kita tambahkan Action/Aksi yang bisa diklik oleh user, menggunakan fungsi setAction(), fungsi tersebut mempunyai parameter yaitu String untuk nama aksi yang akan ditampilkan, dan sebuah OnClickListener berisi perintah yang akan dilakukan saat Action tersebut diklik.

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :