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
270
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
84
My Workspace [2020/06版]
umechanhika
0
28
Capture view and Register to gallery
umechanhika
0
42
Shape Design with Material Components
umechanhika
3
210
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
470
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.4k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
97
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
460
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
560
Other Decks in Programming
See All in Programming
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
最近追加した型の紹介とその振り返り
aki19035vc
0
180
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
유연한 Composable 설계
l2hyunwoo
0
380
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
63
11k
A designer walks into a library…
pauljervisheath
201
24k
Adopting Sorbet at Scale
ufuk
71
8.8k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
KATA
mclloyd
20
13k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Visualization
eitanlees
139
14k
Done Done
chrislema
179
15k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Scaling GitHub
holman
458
140k
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!