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!