Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Badging for Tabs and Bottom Navigation
Search
umechanhika
February 12, 2020
Programming
0
330
Badging for Tabs and Bottom Navigation
umechanhika
February 12, 2020
Tweet
Share
More Decks by umechanhika
See All by umechanhika
My Workspace [2020/08版]
umechanhika
0
95
My Workspace [2020/06版]
umechanhika
0
41
Capture view and Register to gallery
umechanhika
0
48
Shape Design with Material Components
umechanhika
3
240
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
530
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.5k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
500
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
630
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
480
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
470
ReadMoreTextView
fornewid
1
460
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Producing Creativity
orderedlist
PRO
346
40k
Optimizing for Happiness
mojombo
379
70k
How to train your dragon (web standard)
notwaldorf
92
6.1k
4 Signs Your Business is Dying
shpigford
184
22k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
KATA
mclloyd
29
14k
Raft: Consensus for Rubyists
vanstee
140
7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
Badging for Tabs and Bottom Navigation
About me Hikaru Umetsu (@umechanhika) Fintech startup Individual developer Fav:
Android & Flutter Individual Job ?
Material Components 1.1.0 released !
Today’s topic
Badging for Tabs and Bottom Navigation Reference:https://material.io/develop/android/components/tab-layout/
Use “BadgeDrawable” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge val navBadge: BadgeDrawable
= bottomNavigation.getOrCreateBadge(R.id.menu1)
Use “BadgeDrawable” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge val navBadge: BadgeDrawable
= bottomNavigation.getOrCreateBadge(R.id.menu1)
val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge tabBadge.isVisible = true Show “Dot
badge” Reference:https://material.io/develop/android/components/tab-layout/
Show “Badge with number” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge tabBadge.number
= 99 tabBadge.isVisible = true Reference:https://material.io/develop/android/components/tab-layout/
Show “Badge with a maximum count” val tabBadge: BadgeDrawable =
tabLayout.getTabAt(0)?.orCreateBadge tabBadge.maxCharacterCount = 3 tabBadge.number = 1000 tabBadge.isVisible = true Reference:https://material.io/develop/android/components/tab-layout/
Caution max “character” count It can shows “9+”, “99+” or
etc. It cannot shows “5+”, “10+” or etc. Reference:https://material.io/develop/android/components/tab-layout/
Remove badges tabLayout.getTabAt(0)?.removeBadge() Reference:https://material.io/develop/android/components/tab-layout/
Demo Reference:https://github.com/umechanhika/playground/tree/master/android/BadgeDrawableSample
Tab and BottomNav can show badges since MDC 1.1.0 Use
BadgeDrawable It can show “Dot”, “Number” and “Maximum count” badge Summary
Thanks!