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

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

関連記事

Android ConstraintLayoutのお勉強

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

Firebaseにプロジェクトを追加する手順

Androidアプリを公開するときFirebaseを使っている方がほとんどだと思うのですが、自分で設定したことがありませんでした。 今回サンプルプロジェクトですが、Firebaseに設定してみました。 …

ProGuardからR8への移行

AndroidStudio 3.4からコードシュリンカー・難読化にR8がデフォルトで使用されるようになりました。 自分が担当していアプリではProGuardは一般的な用途でしか使っていなかったのですが …

Airbnb Epoxyで入力フォームを作ってみる

Airbnb Epoxyについてはいろいろな記事があるので詳しく説明を省かせていただきますが、RecyclerViewを使いやすくしてくれるライブラリです。 今回はEpoxyを使ってRecyclerV …

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

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