Skip to content Skip to sidebar Skip to footer

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.


Cara Menerapkan Contoh Popup Menu (Dropdown Menu ) Android

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
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 in Android Studio
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:

Hasil Snackbar dan Floating Action Button Android
Hasil Snackbar dan Floating Action Button Android





Post a Comment for "Cara Membuat Snackbar dan Floating Action Button Android "