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
340
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
97
My Workspace [2020/06版]
umechanhika
0
42
Capture view and Register to gallery
umechanhika
0
53
Shape Design with Material Components
umechanhika
3
250
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
540
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.5k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
510
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
640
Other Decks in Programming
See All in Programming
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.1k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
2
120
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
140
旅行プランAIエージェント開発の裏側
ippo012
2
890
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
230
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
Namespace and Its Future
tagomoris
6
700
Design Foundational Data Engineering Observability
sucitw
3
190
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Automating Front-end Workflow
addyosmani
1370
200k
Raft: Consensus for Rubyists
vanstee
140
7.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
It's Worth the Effort
3n
187
28k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Context Engineering - Making Every Token Count
addyosmani
1
37
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Designing for humans not robots
tammielis
253
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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!