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 :
|
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 ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 * * */ 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 * * */ |
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
