Home Teknologi & Development Android Cara Membuat Popup Notifikasi di Android Lebih Keren Pakai Snackbar

Cara Membuat Popup Notifikasi di Android Lebih Keren Pakai Snackbar

September 3, 2016

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);

1	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>

<?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
*
* */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

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

Membuat Shortcut untuk switch Dark dan Light Mode di Macbook

Cara buat Sticker langsung di Web WhatsApp tanpa Install aplikasi!

Cara Mengembalikan Nomer WhatsApp yang terkena Banned

Cara melihat history Kometar dan Like di Instagram

Drama Review: Duel

Drama Review: The Best Hit

Drama Review: Seven Days Queen

Drama Review: My Sassy Girl

Drama Review: Circle

Contoh aplikasi Android untuk menampilkan Snackbar dan Toast

LEAVE A REPLY Cancel reply

Belum Lama ini :

Membuat Shortcut untuk switch Dark dan Light Mode di Macbook

Cara buat Sticker langsung di Web WhatsApp tanpa Install aplikasi!

Cara Mengembalikan Nomer WhatsApp yang terkena Banned

Aplikasi Rambox, dapat digunakan untuk login banyak akun WhatsApp hingga marketing jualan.

Cara melihat history Kometar dan Like di Instagram

Cara menyimpan gambar di Memori browser Agar performa server membaik

LeafletJS adalah Library Maps Gratis

Perbedaan GET dan POST, mana yang lebih baik?

Kompresor PDF oleh Duplichecker – Cara mudah dan sederhana untuk kompres file pdf

Aplikasi WallPaper yang Bagus di Android

Resep Kangkung Cabai Tomat

Cara Check in Online Pesawat Lion Air

Cara Mengganti Tampilan YouTube Terbaru Menjadi Hitam

Video Marcos Rojo Makan Pisang dari Mourinho MU vs Rostov 1-0

Klub yang sudah lolos fase Group Klasemen Liga Champions

Resep Nasi Goreng Mawut

Aku Takut Berpisah – Komunikasi adalah Cara Mengatasi Anak Masuk Sekolah

Resep Kare Kepiting