Cara Membuat Popup Notifikasi di Android Lebih Keren Pakai Snackbar

Ardhitya Wiedha Irawan

8 years ago

GULANGGULING.COM | ANDROID – Kali ini kami akan berbagi cara membuat popup notifikasi di Android biar tampak lebih keren. Kalau biasanya pakai Toast, kali ini kami akan mengajak membuat notifikasi menggunakan Snackbar.

Apakah itu Snackbar? adalah sebuah pesan sederhana yang muncul dari sebuah aksi. Snackbar akan memberikan pesan dibagian bawah layar. Ya sederhananya samacam pesan notifikasi yang bisa kita tampilkan setelah user melakukan aksi tertentu.

Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time.

Snackbar ini biasanya kita temui pada aplikasi-aplikasi miliki Google, seperti gmail, inbox, Google+ atau aplikasi-aplikasi dengan konsep material design.

Jika kita biasanya memakai Toast sebagai popup notifikasi, maka dengan adanya snackbar ini, maka kita bisa membuat popup notif pada aplikasi android menjadi lebih bagus.

Snackbar sendiri memiliki kelebihan dibanding Toast, yakni secara default dapat memiliki fungsi callback. Sebenarnya pada Toast juga dapat ditambahkan fungsi callback, namun kita perlu repot-repot membuat customnya.

Contoh aplikasi Android untuk menampilkan Snackbar dan Toast

Pada kesempatan ini saya memberikan contoh project yang berisi pengunaan snackbar. Pada project yang saya buat ini akan memberikan contoh pesan popup notification dengan snackbar dan toast. Ini adalah contoh cara membuat snackbar secara sederhana :

Snackbar snackbar = Snackbar.make(coordinatorLayout, "Hallo from Snackbar - AIUEO.WEB.ID", Snackbar.LENGTH_LONG);

Untuk membuat project ini cukup mundah, silakan create new project lalu pilih API minimum misalnya ICS, pilih saja blank activity untuk layoutnya.

Tambahkan berapa tombol pada bagian layoutnya ;

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="aiueo.web.id.snackbarvstoast.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Snackbar vs Toast"
        android:textSize="30dp" />

    <Button
        android:id="@+id/btnSimpleSnackbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/Title"
        android:layout_marginTop="30dp"
        android:text="Simple Snackbar" />

    <Button
        android:id="@+id/btnActionCallback"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnSimpleSnackbar"
        android:layout_marginTop="10dp"
        android:text="With Action Callback" />

    <Button
        android:id="@+id/btnCustomSnackbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnActionCallback"
        android:layout_marginTop="10dp"
        android:text="Custom Color" />


    <Button
        android:id="@+id/btnToast"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnCustomSnackbar"
        android:layout_marginTop="10dp"
        android:text="Toast" />

    <Button
        android:id="@+id/btnCustomToast"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnToast"
        android:layout_marginTop="10dp"
        android:text="Custom Toast" />
</RelativeLayout>

Selanjutnya mempersiapkan aksi dari setiap tombol pada class activity :

package aiueo.web.id.snackbarvstoast;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
/*
* Author : Snackbar vs Toast
* Ardhitya Wiedha Irawan
* aiueo.web.id
* gulangguling.com
* @papap_aila
* ardhityawiedhairawan@gmail.com
*
* */
public class MainActivity extends AppCompatActivity {
    private CoordinatorLayout coordinatorLayout;
    private Button btnSimpleSnackbar, btnActionCallback, btnCustomView,btnToast, btnCustomToast;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

       FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        coordinatorLayout = (CoordinatorLayout) findViewById(R.id
                .coordinatorLayout);

        btnSimpleSnackbar = (Button) findViewById(R.id.btnSimpleSnackbar);
        btnActionCallback = (Button) findViewById(R.id.btnActionCallback);
        btnCustomView = (Button) findViewById(R.id.btnCustomSnackbar);
        btnToast= (Button) findViewById(R.id.btnToast);
        btnCustomToast= (Button) findViewById(R.id.btnCustomToast);


        btnSimpleSnackbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout, "Hallo from Snackbar - AIUEO.WEB.ID", Snackbar.LENGTH_LONG);

                snackbar.show();
            }
        });

        btnActionCallback.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
                        .setAction("UNDO", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
                                snackbar1.show();
                            }
                        });

                snackbar.show();
            }
        });

        btnCustomView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                        .make(coordinatorLayout, "No internet connection!", Snackbar.LENGTH_LONG)
                        .setAction("RETRY", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                            }
                        });

                // Changing message text color
                snackbar.setActionTextColor(Color.RED);

                // Changing action button text color
                View sbView = snackbar.getView();
                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.YELLOW);

                snackbar.show();
            }
        });
        btnToast.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Hallo from toast", Toast.LENGTH_LONG).show();
            }
        });

        btnCustomToast.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                LayoutInflater inflater = getLayoutInflater();
                View layout = inflater.inflate(R.layout.custom_toast,
                        (ViewGroup) findViewById(R.id.custom_toast_container));

                TextView text = (TextView) layout.findViewById(R.id.text);
                text.setText("This is a custom toast");

                Toast toast = new Toast(getApplicationContext());
                toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
                toast.setDuration(Toast.LENGTH_LONG);
                toast.setView(layout);
                toast.show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

/*
* Author : Snackbar vs Toast
* Ardhitya Wiedha Irawan
* http://aiueo.web.id
* http://gulangguling.com
* @papap_aila
* ardhityawiedhairawan@gmail.com
*
* */

Dengan class java diatas, maka setiap tombol disentuh maka akan menampilkan notifikasi yang terbuat dari snackbar dan toast. Untuk lebih jelasnya anda dapat download source code dari GitHub.

Download Full Source Code From GitHub