Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Badging for Tabs and Bottom Navigation
Umechan
February 12, 2020
Programming
0
74
Badging for Tabs and Bottom Navigation
Umechan
February 12, 2020
Tweet
Share
More Decks by Umechan
See All by Umechan
umechanhika
0
36
umechanhika
0
3
umechanhika
0
14
umechanhika
3
170
umechanhika
3
310
umechanhika
1
1k
umechanhika
0
69
umechanhika
2
350
umechanhika
1
310
Other Decks in Programming
See All in Programming
yasaichi
31
7.7k
tetsukick
0
180
keiichihirobe
1
110
lilobase
PRO
1
710
konstantin_diener
0
130
numeroanddev
1
220
mploed
3
160
larsrh
0
110
pirosikick
4
940
sansuke05
1
120
heistak
2
130
legalforce
PRO
1
690
Featured
See All Featured
dougneiner
119
7.9k
maggiecrowley
10
500
dougneiner
55
5.4k
eileencodes
113
25k
lara
15
2.7k
myddelton
109
11k
schacon
145
6.6k
philhawksworth
190
17k
sferik
610
54k
garrettdimon
288
110k
cherdarchuk
71
260k
destraynor
223
47k
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!