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 dan Floating 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

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.

Create New Project

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

Target Android Devices

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

Basic Activity

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:

3. Layout

Di bagian layout terdapat dua file layout yaitu activity_main.xml dan content_scrolling.xml

Pada activity_main.xml penerapan Toolbar,Snackbar,dan Floating Action Button diletakan 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

content_scrolling.xml

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

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: