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
280
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
86
My Workspace [2020/06版]
umechanhika
0
32
Capture view and Register to gallery
umechanhika
0
42
Shape Design with Material Components
umechanhika
3
210
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
490
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.4k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
100
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
470
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
580
Other Decks in Programming
See All in Programming
M5Stack に色々な M5ユニットをつないで扱う為の新たなアプローチ
gob
0
200
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
520
データサイエンスのフルサイクル開発を実現する機械学習パイプライン
xcnkx
2
490
個人開発で使ってるやつを紹介する回
yohfee
1
690
(Deep|Web) Link support with expo-router
mrtry
0
170
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
150
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
390
"noncopyable types" の使いどころについて考えてみた
andpad
0
140
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
130
Iteratorでページネーションを実現する
sonatard
3
700
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.2k
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.5k
Featured
See All Featured
Bash Introduction
62gerente
608
210k
GitHub's CSS Performance
jonrohan
1030
450k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Atom: Resistance is Futile
akmur
261
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
324
23k
How to Think Like a Performance Engineer
csswizardry
16
1k
Designing the Hi-DPI Web
ddemaree
279
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
A Tale of Four Properties
chriscoyier
156
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
44
2k
Web development in the modern age
philhawksworth
205
10k
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!