Angka notifikasi | Actionbar | UI

Halo para developer, bagaimana kabarnya? Setelah beberapa minggu tidak update, kali ini saya akan berbagi tentang bagaimana cara membuat icon notifikasi di-actionbar dengan tambahan angka. Kenapa ditambahin dengan angka? Agar user tau, ada berapa sih notifikasi yang belum dibaca, sehingga lebih menambah user experience-nya.

Tutorial kali ini simple banget, tidak butuh library apa-apa, cukup satu buah activity saja. Bagi yang sudah menggunakan android studio versi terbaru, bisa menggunakan template blank activity untuk pertama kalinya. Nanti akan terdapat sebuah fab button yang akan saya gunakan untuk menambah jumlah angka diicon notifikasinya.

Template Post 3

Akan terlihat seperti diatas tampilan awal ketika menggunakan template blank activity. Kemudian langkah-langkah yang akan kita kerjakan adalah sebagai berikut:

  1. Buat background berbentuk lingkaran sebagai background dari angka notifikasi.
  2. Mengambil icon bell dari vector asset
  3. Mendisain tampilan untuk notifikasi secara keseluruhan, background lingkaran digabung dengan notifikasi dan sebuah text untuk angkanya
  4. Coding Time 😀

Ini adalah tampilan hasil dari tutorial kali ini, biar ada pandangan apa yang mau dikerjakan

device-2016-02-26-174915

Background Lingkaran

Background lingkarang ini digunakan untuk memberikan kejelasan angka dari notifikasi. Kodenya sebagai berikut:

count_notification.xml(ditaruh difolder drawable)

 

Icon Notifikasi

Icon notifikasi yang akan saya gunakan menggunakan vector asset, berformat xml. Kelebihannya, icon ini tidak akan pecah gambarnya walaupun ukurannya bertambah. Fitur ini bisa digunakan dengan gradle 1.4 ke atas(kalau gak salah ya), jadi yang belum update gradlenya bisa segera update ya, karena vector asset ini sangat-sangat diperlukan untuk membangun aplikasi dengan kualitas yang bagus. Untuk sementara bagi yang belum bisa update gradlenya, bisa menggunakan icon notifikasi yang png ataupun icon apa saja. Berikut cara untuk mengambil icon dari vector asset:

  • Klik kanan sembarang pada folder dibagian projek.
  • Lalu pilih New kemudian pilih Vector Asset.

2

  • Setelah itu pilih choose pada bagian Material Icon, lalu cari icon bell, klik icon tersebut dan tekan ok, setelah itu tekan next dan finish. Maaf ngga pakai gambar yak, ribet hehehe tapi mudeng kan?

Default warna dari vector asset adalah berwarna hitam, biar lebih jelas dilihat di-actionbar, ganti warnanya dengan putih, caranya dengan mengganti fillColor menjadi #FFF, seperti kode dibawah:

Desain Tampilan

Icon notifikasi dan background lingkaran yang sudah dibuat, dijadikan satu agar dapat digunakan sebagai actionLayout yang nantinya akan digunakan di-actionbar, berikut kodenya:

actionbar_notification.xml

Kode untuk halaman utama

activity_main.xml

 

Lalu untuk tampilan utamanya dibutuhkan sebuah button yang berfungsi untuk mereset angka notifikasi. Ubah layout content_main.xml menjadi seperti:

content_main.xml

Untuk menunya sebagai berikut:

menu_main.xml

 

Coding Time 😀

 

Kodenya semua berada diclass MainActivity.java dan sangat sederhana sekali. Penjelasan sudah saya taruh didalam kode

 

Sekian dulu tutorial kali ini, semoga dapat membantu teman-teman dalam mempercantik tampilan aplikasinya ketika membuat aplikasi yang menggunakan notifikasi, ataupun dapat diterapkan juga untuk yang lain seperti jumlah chat yang belum terbaca dan lain-lain.