Tutorial Membuat Badge di Android (Material Design)

Halo semuanya, ketemu lagi dengan saya di Tutorial Belajar Membuat Material Design di Android. Setelah cukup lama saya tidak menulis artikel di blog ini dikarenakan sibuk dan hal lainnya, kali ini saya akan berbagi tentang cara membuat Material Design Badge di Android.

Membuat Material Design Badge di Android

Apa itu Material Design Badge? Badge atau “lencana” adalah informasi tambahan yang biasanya muncul pada pojok kanan icon di Android, informasi ini biasanya berisi angka dan berbentuk lingkaran kecil berwarna merah. Badge biasanya digunakan untuk menandakan kalau ada request masuk, atau notification baru, atau ada pesan yang belum dibaca etc.

Sebelum lanjut, ada baiknya kalian membaca dulu tutorial-tutorial di bawah ini :

Pre-requisites :

AndroidX Library
Karena kita menggunakan Android X library maka pastikan kalian sudah men-setting AndroidX-nya, caranya bisa dilihat di sini :

Jika sudah, kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.

Setelah itu kalian bisa melakukan Migrate to AndroidX seperti di link di atas. Jangan lupa, versi library bisa berubah-ubah, pada saat artikel ini dibuat versi library terbaru adalah 28.0.3, karena itu jangan lupa juga untuk mengeset compileSDK kalian ke versi 28 juga seperti gambar di bawah :

android {
    compileSdkVersion 28
    buildToolsVersion '28.0.3'
    //...
}

Karena di tutorial ini kita meminjam layout dari Bottom Navigation View, maka silahkan kalian melakukan step pembuatan layout dari tutorial Bottom Navigation View.

Kemudian untuk kelas Activity-nya, kalian bisa buka file MainActivity.java dan copy pastekan kode berikut ini :

import android.os.Bundle;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class BadgeActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_bottom_nav_view);

        bottomNavigationView = findViewById(R.id.btm_nav);
        bottomNavigationView.setItemHorizontalTranslationEnabled(true);

        /**
         * Inisialisasi Badge, dipanggil pertama kali saat membuat badge
         */
        bottomNavigationView.getOrCreateBadge(R.id.action_home);
        bottomNavigationView.getOrCreateBadge(R.id.action_star);
        bottomNavigationView.getOrCreateBadge(R.id.action_money);

        /**
         * Assign di icon mana badge akan ditampilkan
         */
        final BadgeDrawable badgeHome = bottomNavigationView.getBadge(R.id.action_home);
        final BadgeDrawable badgeStar = bottomNavigationView.getBadge(R.id.action_star);
        final BadgeDrawable badgeMoney = bottomNavigationView.getBadge(R.id.action_money);

        // Mengeset info number untuk badge Home
        badgeHome.setNumber(1);

        // Mengeset info number untuk badge Star, dan juga limitasi karakternya
        badgeStar.setNumber(1100);
        badgeStar.setMaxCharacterCount(3);

        // Mengeset info number untuk badge Money, dan juga mengeset tempat munculnya
        badgeMoney.setNumber(77);
        badgeMoney.setBadgeGravity(BadgeDrawable.BOTTOM_END);

        /**
         * Set click action listener, sehingga ketika icon diklik
         * akan ada action yang dilakukan
         */
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                /**
                 * Logic untuk menambahkan angka pada badge ketika icon diklik
                 */
                switch (item.getItemId()){
                    case R.id.action_home :
                        int i = badgeHome.getNumber()+1;
                        badgeHome.setNumber(i);
                        break;
                    case R.id.action_star :
                        int j = badgeStar.getNumber()+1;
                        badgeStar.setNumber(j);
                        break;
                    case R.id.action_money :
                        int k = badgeMoney.getNumber()+1;
                        badgeMoney.setNumber(k);
                        break;
                }

                return true;
            }
        });
        super.onCreate(savedInstanceState);
    }
}

Pada MainActivity di atas, kita hanya akan memanggil elemen BottomNavigationView seperti yang sudah kita buat di tutorial sebelumnya. Dan kemudian mengeset listener pada menunya, sehingga apabila diklik akan menambah jumlah angka di badge yang diklik.

Demo

Oke, beginilah tampilan aplikasi ketika kita jalankan.

Bisa dilihat, sebelah kiri adalah tampilan awal | Sebelah kanan ketika kita mengklik icon, maka angkanya akan bertambah

That’s all ! Semoga membantu! Source code nya bisa kalian download dan jalankan sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀





Download aplikasi kami di Google Play Store


Tutorial Menarik Lainnya :

Leave a Reply

Do NOT follow this link or you will be banned from the site!