Badging for Tabs and Bottom Navigation

Transcript

1. Badging for Tabs and Bottom Navigation
2. About me Hikaru Umetsu (@umechanhika) Fintech startup Individual developer Fav: Android & Flutter Individual Job ？
3. Material Components 1.1.0 released !
4. Today’s topic
5. Badging for Tabs and Bottom Navigation Reference:https://material.io/develop/android/components/tab-layout/
6. Use “BadgeDrawable” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge val navBadge: BadgeDrawable = bottomNavigation.getOrCreateBadge(R.id.menu1)
7. Use “BadgeDrawable” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge val navBadge: BadgeDrawable = bottomNavigation.getOrCreateBadge(R.id.menu1)
8. val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge tabBadge.isVisible = true Show “Dot badge” Reference:https://material.io/develop/android/components/tab-layout/
9. 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/
10. 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/
11. 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/
12. Remove badges tabLayout.getTabAt(0)?.removeBadge() Reference:https://material.io/develop/android/components/tab-layout/
13. Demo Reference:https://github.com/umechanhika/playground/tree/master/android/BadgeDrawableSample
14. Tab and BottomNav can show badges since MDC 1.1.0 Use BadgeDrawable It can show “Dot”, “Number” and “Maximum count” badge Summary
15. Thanks!