Last Updated on 5 years by Mas Herdi
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 :
- Membuat Tema/Style pada Android Material Design
- Membuat Bottom Navigation View Material Design
- Tutorial Lengkap Android Material Design
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.
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. 😀
