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

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

関連記事

IntelliJ IDEA(AndroidStudio)でもgit rebase squashできるよ!

普段開発しているとGitを使ってバージョン管理することが多いと思います。 その時によくローカルブランチを作って、変更をガンガンコミットしていきます。 ある程度実装してリモートブランチにマージする時に、 …

ProGuardからR8への移行

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

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

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

Android ConstraintLayoutのお勉強

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

Firebase Authenticationを設定する

先日、Firebaseプロジェクトを作成しアプリを追加しました。 Firebaseにプロジェクトを追加する手順 今回はFirebaseのAuthenticationを設定してみようと思います。 Fir …