Android

いつの間にかBottomNavigationに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

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

アサーションライブラリのGoogle Truthを使ってみる

AndroidXのTestではGoogleのアサーションライブラリのTruthが使われるみたいです。 Set up project for AndroidX Test Truthを必ず使えというよりも …

Airbnb Epoxyについて

最近RecyclerViewを使うときにAirbnb製のEpoxyというライブラリを使っています。 素のRecyclerViewだと、データが特定の状態のときにレイアウトを変えたい場合、少しごちゃごち …

AndroidStudioのLayout XMLのフォーマット設定

AndroidStudioで新しいプロジェクトを作るたびにLayout XMLの属性フォーマット設定方法を忘れるのでメモです。 AndroidStudioで以下の設定を開きます。 File | Set …

Android ConstraintLayoutのお勉強

Androidはいろいろ難しいところがあるのですが画面にビューを表示するレイアウトも慣れないと難しいものがあると思っています。 自分だけかもしれませんが簡単なレイアウトだなーと思って実際に配置してみた …

既存アプリのレイアウトをConstraintLayoutに書き換えた

会社で作っているサービスのAndroidアプリにConstraintLayoutが未導入だったので多くの画面をConstraintLayoutで書き直しました。 アプリ自体が小規模から中規模で画面数は …