Cara Menerapkan Custom Snackbar Material Design Android - Tempat Blogging

Cara Menerapkan Custom Snackbar Material Design Android

Snackbar yaitu 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 menyerupai jendela popup text ,pada bab bawah layar ketika kita melaksanakan agresi tertentu ,seperti ketika kita melaksanakan agresi pada widget button ,menu ,Floating Action Button(FAB) dll.



 yaitu salah salah satu widget dari komponen UX Cara Menerapkan Custom Snackbar Material Design Android
Pada tutorial berguru android kali ini, kita akan mencoba menciptakan kustomisasi text di widget Snackbar. Kaprikornus sebelum kita mencoba  membuat  Custom Snackbar ,kalian harus baca tutorial sebelumnya  terlebih dahulu yang aku sudah bagikan. Karna disini aku hanya memodifikasi baris intruksi (codingan) yang telah dibentuk di tutorial sebelumnya.



Disini kita akan menciptakan Snackbar dengan widget button. Ketika user (pengguna ) menekan button maka akan tampil Snackbar.Kita disini akan menciptakan 4 jenis custom Snackbar yang umumnya dipakai.


1.String

Salin baris intruksi (codingan) di bawah ke file string.xml (res/values/string.xml)

 string.xml 




2. Layout

Salin baris intruksi (codingan) di bawah ke file activity_main.xml (res/layout/activity_main.xml)

activity_main.xml 


3. Activity


Salin baris intruksi (codingan) di bawah ke file MainActivity.java  (java/packagename/MainActivity.java)

MainActivity.java 



4. Menjalankan Aplikasi

Setelah simpulan semuanya ,kita coba jalankan Aplikasinya di Android Studio.


Hasilnya :

  • Snackbar Sederhana :

Ketika Button Snackbar Sederhana dipilih maka akan menampilkan pesan text Snackbar Sederhana .Seperti pada gambar dibawah:

 yaitu salah salah satu widget dari komponen UX Cara Menerapkan Custom Snackbar Material Design Android
Hasil Snackbar Sederhana 

  • Snackbar Warna Kustom :

Ketika Button Snackbar Warna Kustom dipilih, maka akan menampilkan pesan text Snackbar dengan kustomisasi warna merah. Disini kita mengganti warna text dengan warna merah, textView.setTextColor(Color.RED); Serta memperlihatkan baris intruksi (codingan)  onClick pada text 'Coba Lagi'.

 yaitu salah salah satu widget dari komponen UX Cara Menerapkan Custom Snackbar Material Design Android
Hasil Snackbar Warna Kustom

  • Snackbar Warna Multitext

Ketika Button Snackbar Warna Multitext dipilih , maka akan muncul Snackbar dengan variasi jenis font yang berbeda dengan menggunakan SpannableStringBuilder.


 yaitu salah salah satu widget dari komponen UX Cara Menerapkan Custom Snackbar Material Design Android
Hasil Snackbar Warna Multitext

  • Snackbar dengan Action Callback


Ketika Button Snackbar dengan Action Callback dipilih , maka akan muncul snackbar dengan Action Callback yang dimana kita memakai  method setAction(). Contoh penerapanya Snackbar ini digunakan menyerupai ketika kita menghapus SMS di perangkat Android, maka akan muncul Snackbar bahwa pesan terhapus ,lalu kita dapat membalikan pesanya lagi dengan menentukan 'balikan' pada Snackbar , maka akan muncul Snackbar bahwa pesan telah dikembalikan. 
Tampilanya akan terlihat menyerupai ini :


 yaitu salah salah satu widget dari komponen UX Cara Menerapkan Custom Snackbar Material Design Android
Hasil Snackbar dengan Action Callback

 yaitu salah salah satu widget dari komponen UX Cara Menerapkan Custom Snackbar Material Design Android
Hasil Snackbar dengan Action Callback









Sumber https://www.okedroid.com/
Show comments
Hide comments

0 Response to "Cara Menerapkan Custom Snackbar Material Design Android"

Post a Comment

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close