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.

 

  • Chichi Novrian

    “R.id.fab”
    fab nya id dari yang mana kak ?

    • Hendrawan Adi Wijaya

      Oh iya, kelupaan belum ditampilin diwebnya. Itu fab id dari FloatingActionButton yang ada di activity_main.xml. Saya update asap. Makasih ya.

  • Mattx Tiens

    admin .. kenapa y aplikasi nya jika dijalankan angka notifikasinya tidak bertambah jika diklik buttonnya?
    mohon bantuannya pdahal sudah tidak ada error

    • Hendrawan Adi Wijaya

      Coba lihat semua kode yang terkait seperti MainActivity.java, menu_main.xml dst. Paste aja di pastebin, nanti link ditaruh disini.

      • Mattx Tiens
        • Tidak ada yang salah setelah saya lihat2. Yang diklik untuk menambah angka itu yang fab button ya, yg di kanan bawah.

          • Mattx Tiens

            iya diklik fab button sama aj ngk ada perubahan di notifikasinya,itu yang aneh dan mnurut kamu file saya udh lengkap? ap ad tambahan di string.xml atau di file lainny?

          • Coba unduh source codenya disini https://github.com/andevindo/angka-notifikasi.

          • Mattx Tiens

            waw .. udah bisa akan saya kembangkan lagi, makasih bangat atas responnya

            apakah anda sudah pernah membuat inputan scan barcode barang yang nilainya akan otomatis input langsung ke textbox atau punya referensinya? mohon bantuannya lagi jika ada

          • Coba ke tutorial ini http://blog.andevindo.com/scan-barcode/. Untuk librarynya pakai ZXing dan coba lihat di github untuk versi terbarunya karena itu tutorial lama.

          • Mattx Tiens

            ok siap .. sbb ni

            kalau gini anda pernah liat atau buat autentikasi user di android base? kebanyakan adanya autentikasi user diwebbase
            mohon bantuannya lagi

          • Kalau datanya disimpan di server online sepertinya memang harus autentikasi di web. Kalau autentikasi user di androidnya bisa aja, kayak ngeprotect aplikasi pakai password gtu, soalnya data passwordnya tersimpan di androidnya. Saya pernah buat aplikasi My Diary, itu waktu ngakses aplikasi klau aplikasinya diprotect maka harus masukin password terlebih dahulu.

          • Mattx Tiens

            kalau data nya di simpan di mysql, ada solusi buat autentikasi user di androidnya?

            nah justru itu saya ingin menggunakan autentikasi user ini untuk membedakan user mana yang hanya dapat liat menu ini dan mana yang liat menu itu, kalau web bisa dibikin hidden menunya, kalau android gw masih belum tau, apakah anda ada solusi yang lebih bagus?

          • Paling aman tetap lewat web untuk autentikasinya. Dari androidnya cuman ngirim username/email dan password, lalu dibackendnya baru dicek kombinasi tsb dengan data yang ada didatabase. Kenapa pengen buat autentikasi di android?

            Kalau untuk menu itu, bisa saja waktu login sukses, kita dapeting user typenya. Nah waktu di androidnya klau user typenya admin dimunculin menu admin, klau client dimunculin menu clientnya.

          • Mattx Tiens

            hoo ok” .. maksud saya autentikasi yang seperti kita login dengan username atau bagian departement akan sesuai dengan menu yang akan muncul di username tersebut, seperti yang tadi anda bilang akan menu tersebut

            nah ini tinggal main di intentnya? berarti kita harus nambah bikin activity yang serupa hanya saja tampilan menu di sesuaikan?

            apakah anda punya contoh source code nya atau referensi?

          • Yup, tinggal kasih logika saja. Untuk tampilan dan menunya bisa sesuai keingingan. Sudah pernah pakai Navigation Drawer(ND)? Kalau pakai ND itu menunya bisa digenerate setelah pengecekan user typenya. Jadi klau ada 2 user type, nantinya ada 2 file menu.
            Coba googling tentang “dynamic navigation drawer menu”.

          • Mattx Tiens

            hmm paling cuman pakai navigation drawer untuk kyk tampilan seperti di bbm gtu tapi klau untuk buat membedakan menu per user belum kepikiran

            ok ntr di coba, ada rekomendasi lain lagi? hahaha

          • User kan ada tipenya, waktu login berhasil, dari server harus ada nilai kembalian berupa tipe user. Tipe user disimpan di shared preferences, waktu masuk di ND tinggal dicek aja.
            https://uploads.disquscdn.com/images/9fa4318710cdca9af90cd0339f13fac097b24d9ca10e30ec6bdd4c0bd4cc0dc6.png

          • Mattx Tiens

            ok siap .. mantap, pengetahuan yang berguna .. terima kasih
            dan
            dari gambar itu ada contoh source codenya yang full?

          • Ada, tapi private hehe karena dari proyek orang lain.

          • Mattx Tiens

            aw sbb baru buka soalny

            private dikenakan biaya y?

          • Ngga bisa dishare karena proyek orang lain.
            Kalau tidak ada halangan, saya buatkan tutorialnya di minggu ini.

          • Mattx Tiens

            Mantap bangat .. ditunggu tutorialnya n terima kasih bangat atas antusiasnya

            oh iya, yg project angka notifikasi , gw coba pasang di apk saya yang telah terhubung mysql dan diinstall di dua smartphone, kenapa di notifikasi hanya muncul di smartphone yang sedang diinput datanya sedangkan yang satunya tidak respon apapun, tapi data-data yang di input tetap muncul di kedua smartphone .. apakah ada solusi agar kedua smartphone memunculkan notifikasi yang sama saat salah satu smartphone melakukan inputan data?

          • Nyambung lewat email aja ya, biar gak kepanjangan disini hehe
            hendrawanadiwijaya@gmail.com

          • Mattx Tiens

            siap

  • Mattx Tiens
  • Mattx Tiens

    disini id nya ngk ketemu dan juga pada bagian coding terakhir ” return super.optionsitemselected(item); ” yang satunya saya hapus dikarenakan telah terjadi error
    mohon solusinya
    terima kasih

    • Hendrawan Adi Wijaya

      Terima kasih atas koreksinya, sepertinya kelebihan tulis yg return super.

      • Mattx Tiens

        sama-sama, tapi disini ad int id yang variabelnya tidak digunakan .. kenapa y?, contoh ad digambar yang saya kirim kemarin

        • Hendrawan Adi Wijaya

          Untuk yang id itu memang ngga dipakai, itu sebetulnya hasil auto generate klau buat activity baru. Kalau untuk tutorial ini, fungsi onOptionsItemSelected itu bisa dihapus saja, tapi klau semisal mau memberi action terhadap gambar bel jika diklik, maka bisa tambahkan response di dalam onOptionsItemSelected itu.

          • Mattx Tiens

            oh gitu .. siap”

  • Sarman

    Thanks tutornya mas memang saya lagi cari2.
    Tapi saya masih agak bingung untuk penerapannya di app saya, intinya setelah user login diandroid lalu untuk send notif ke semua user lain bagaimana ya? Saya pakai mysql untuk aplikasi barang yang harus dicek oleh lab.
    Thx