Cara Membuat Snackbar dan Floating Action Button Android

Snackbar adalah salah salah satu widget dari komponen UX(User Experience) yang berfungsi untuk menampilkan pesan text seketika( pengganti Toast)  dengan balutan Material Design. Snackbar akan muncul seperti jendela popup text ,pada bagian bawah layar ketika kita melakukan aksi tertentu ,seperti saat kita melakukan aksi pada widget button ,menu ,Floating Action Button(FAB) dll.

Floating Action Button(FAB) adalah salah satu widget button untuk komponen UI(User Interface) yang akan ditampilkan dalam bentuk melayang pada pojok kanan bawah. Jika kalian sering menggunakan Path,Whatsapp,Google+,BBM, di perangkat Android kalian, mungkin sudah tidak asing lagi dengan button melayang ini. Floating Action Button biasanya digunakan , untuk Aplikasi yang ingin salah satu fiturnya di tonjolkan atau di utamakan. Seperti di Aplikasi BBM pada bagian chat Floating Action Buttonya adalah mencari teman di contact BBM kalian.

Pada tutorial belajar android kali ini, kita akan mencoba membuat Snackbar danFloating Action Button Material Design Android. Disini sudah disediakan templatenya di Android Studio jadi kalian hanya tinggal membuatnya saja. Pastikan kalian juga selalu update versi Android Studio terbaru.

1. Pertama buka Android Studio 

2. Pilih Start a New Android Studio Project 

3.Kedua pada bagian Create New Project, sesuaikan dengan nama dan package serta lokasi file yang akan kalian gunakan. Untuk contoh saya menggunakan seperti yang ada di gambar di bawah. Jika sudah pilih Next. 

4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.

5. Pada bagian Add an Activity to Mobile kita bisa memilih template bawaan yang masih kosong yaitu Basic Activity  lalu pilih Next 

6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.

 Customize the Activity

7.Setelah itu kita tunggu sampai proses building project gradle selesai .

8. Setelah selesai proses building

1. Setup Gradle 

Pastikan pada setup gradle seperti pada gambar dibawah:

2. Styles.xml (res/values/styles.xml)

Baris intruksi (codingan) di styles xml akan seperti dibawah:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. <resources>
3.     <!-- Base application theme. -->
4.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
5.         <!-- Customize your theme here. -->
6.         <item name="colorPrimary">@color/colorPrimary</item>
7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
8.         <item name="colorAccent">@color/colorAccent</item>
9.     </style>
11.     <style name="AppTheme.NoActionBar">
12.         <item name="windowActionBar">false</item>
13.         <item name="windowNoTitle">true</item>
14.     </style>
16.     <style name="AppTheme.AppBarOverlay"parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
18.     <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
20. </resources>

3. Layout

Di bagian layout terdapat dua file layout yaitu activity_main.xml dancontent_scrolling.xml 

Pada activity_main.xml  penerapan Toolbar,Snackbar,dan Floating Action Buttondiletakan di file ini dengan widget design CoordinatorLayout. Serta akan menginclude(memasukan) isi konten dari file yang ada di  content_scrolling.xml

Pada  content_scrolling.xml  adalah isi dari konten seperti dalam contoh kita menggunakan widget TextView.


activity_main.xml

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.design.widget.CoordinatorLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     xmlns:tools="http://schemas.android.com/tools"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent"
8.     android:fitsSystemWindows="true"
9.     tools:context="com.okedroid.snackbardanfab.MainActivity">
11.     <android.support.design.widget.AppBarLayout
12.         android:layout_width="match_parent"
13.         android:layout_height="wrap_content"
14.         android:theme="@style/AppTheme.AppBarOverlay">
16.         <android.support.v7.widget.Toolbar
17.             android:id="@+id/toolbar"
18.             android:layout_width="match_parent"
19.             android:layout_height="?attr/actionBarSize"
20.             android:background="?attr/colorPrimary"
21.             app:popupTheme="@style/AppTheme.PopupOverlay"/>
23.     </android.support.design.widget.AppBarLayout>
25.     <include layout="@layout/content_scrolling"/>
27.     <android.support.design.widget.FloatingActionButton
28.         android:id="@+id/fab"
29.         android:layout_width="wrap_content"
30.         android:layout_height="wrap_content"
31.         android:layout_gravity="bottom|end"
32.         android:layout_margin="@dimen/fab_margin"
33.         android:src="@android:drawable/ic_dialog_email"/>
35. </android.support.design.widget.CoordinatorLayout>

content_scrolling.xml

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     xmlns:tools="http://schemas.android.com/tools"
6.     android:layout_width="match_parent"
7.     android:layout_height="match_parent"
8.     android:paddingBottom="@dimen/activity_vertical_margin"
9.     android:paddingLeft="@dimen/activity_horizontal_margin"
10.     android:paddingRight="@dimen/activity_horizontal_margin"
11.     android:paddingTop="@dimen/activity_vertical_margin"
12.     app:layout_behavior="@string/appbar_scrolling_view_behavior"
13.     tools:context="com.okedroid.snackbardanfab.MainActivity"
14.     tools:showIn="@layout/activity_main">
16.     <TextView
17.         android:layout_width="wrap_content"
18.         android:layout_height="wrap_content"
19.         android:text="Contoh SnackBar dan Floating Action Button"/>
20. </RelativeLayout>

4. Activity

Pada file MainActivity.java terdapat widget Floating Action Button yang didalamnya terdapat widget Snackbar. Jadi ketika kita menekan Floating Action Button maka akan muncul widget  Snackbar.

MainActivity.java

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

1. package com.okedroid.snackbardanfab;
3. import android.os.Bundle;
4. import android.support.design.widget.FloatingActionButton;
5. import android.support.design.widget.Snackbar;
6. import android.support.v7.app.AppCompatActivity;
7. import android.support.v7.widget.Toolbar;
8. import android.view.View;
9. import android.view.Menu;
10. import android.view.MenuItem;
12. public class MainActivity extends AppCompatActivity {
14.     @Override
15.     protected void onCreate(Bundle savedInstanceState) {
16.         super.onCreate(savedInstanceState);
17.         setContentView(R.layout.activity_main);
18.         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
19.         setSupportActionBar(toolbar);
21.         FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
22.         fab.setOnClickListener(new View.OnClickListener() {
23.             @Override
24.             public void onClick(View view) {
25.                 Snackbar.make(view, "Ganti dengan Action kalian", Snackbar.LENGTH_LONG)
26.                         .setAction("Action", null).show();
27.             }
28.         });
29.     }
31.     @Override
32.     public boolean onCreateOptionsMenu(Menu menu) {
33.         // Inflate the menu; this adds items to the action bar if it is present.
34.         getMenuInflater().inflate(R.menu.menu_main, menu);
35.         return true;
36.     }
38.     @Override
39.     public boolean onOptionsItemSelected(MenuItem item) {
40.         // Handle action bar item clicks here. The action bar will
41.         // automatically handle clicks on the Home/Up button, so long
42.         // as you specify a parent activity in AndroidManifest.xml.
43.         int id = item.getItemId();
45.         //noinspection SimplifiableIfStatement
46.         if (id == R.id.action_settings) {
47.             return true;
48.         }
50.         return super.onOptionsItemSelected(item);
51.     }
52. }

5. Menjalaankan Aplikasi 

Setelah selesai semua diterapkan kita coba jalankan Aplikasinya di Android Studio.
Ketika user (pengguna ) menekan tombol Floating Action Button maka akan muncul Snackbar.
Hasil tampilan dari widget Snackbar dan Floating Action Button akan seperti ini:

Hasil Snackbar dan Floating Action Button Android