Android

いつの間にかBottomNavigationにBadge機能がついていた・・・

この記事はmaterial-components-androidのv1.1.0系の使い方で最新では使えないのでAndroid BottomNavigationViewにBadgeをつけるをご参照ください。

先日、たまたまmaterial-components-androidのCatalogアプリを見ていたらBottomNavigationにBadge機能がついていました。

これ、最近追加されたんですかね・・・。もしかして自分が知らなかっただけ?
Badge機能がないからViewに無理やりBadge風なviewを追加して対応していた思い出があるので標準対応すると安心感があっていいですね。

Badgeの付け方

まずテーマにTheme.MaterialComponentsか、それを継承しているテーマを指定する必要があります。
今回はTheme.MaterialComponents.DayNight.DarkActionBarを指定しました。

Badgeの付け方はすごいシンプルで以下のようになります。

またBadgeで数が多いと999+のように省略されます。
このときに表示する桁数(文字数)を指定することができます。
デフォルトの桁数はBadgeDrawable#DEFAULT_MAX_BADGE_CHARACTER_COUNTとして定義されて4桁になっているみたいです。
BadgeDrawable.java
もし特定のタブだけ桁数を変える場合はプログラムで変更することができます。

こうすると3桁まで表示されるので以下のようになります。

スタイルにbadgeStyleを指定することでバッジ全体に設定することもできます。
ただ今回スタイルに指定しているTheme.MaterialComponents.DayNight.DarkActionBarの祖先Base.V14.Theme.MaterialComponents.LightbadgeStyleが追加されたのはmaterial:1.1.0-alpha07からなので1.1.0-alpha06の場合はbadgeStyleは指定できません。
桁数はmaxCharacterCountで設定します。

試しにmaxCharacterCountに2を設定すると以下のような画面になり設定が反映されているのがわかります。

またBadgeの背景色を変えたい場合はbackgroundColorを変更すればよさそうです。

AndroidXもそうですけどマテリアルコンポーネントもいろいろ進化していて追従するのが大変ですが、確実に便利になっていると感じます。

-Android

© 2025 ビー鉄のブログ Powered by AFFINGER5