Badging for Tabs and Bottom Navigation

Transcript

1. Badging for
   Tabs and
   Bottom Navigation
   

   View Slide

2. About me
   Hikaru Umetsu
   (@umechanhika)
   Fintech startup
   Individual developer
   Fav: Android & Flutter
   Individual
   Job
   ？
   

   View Slide

3. Material Components 1.1.0 released !
   

   View Slide

4. Today’s topic
   

   View Slide

5. Badging for Tabs and Bottom Navigation
   Reference:https://material.io/develop/android/components/tab-layout/
   

   View Slide

6. Use “BadgeDrawable”
   val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge
   val navBadge: BadgeDrawable = bottomNavigation.getOrCreateBadge(R.id.menu1)
   

   View Slide

7. Use “BadgeDrawable”
   val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge
   val navBadge: BadgeDrawable = bottomNavigation.getOrCreateBadge(R.id.menu1)
   

   View Slide

8. val tabBadge: BadgeDrawable =
   tabLayout.getTabAt(0)?.orCreateBadge
   tabBadge.isVisible = true
   Show “Dot badge”
   Reference:https://material.io/develop/android/components/tab-layout/
   

   View Slide

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/
   

   View Slide

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/
    

    View Slide

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/
    

    View Slide

12. Remove badges
    tabLayout.getTabAt(0)?.removeBadge()
    Reference:https://material.io/develop/android/components/tab-layout/
    

    View Slide

13. Demo
    Reference:https://github.com/umechanhika/playground/tree/master/android/BadgeDrawableSample
    

    View Slide

14. Tab and BottomNav can show badges since MDC 1.1.0
    Use BadgeDrawable
    It can show “Dot”, “Number” and “Maximum count” badge
    Summary
    

    View Slide

15. Thanks!
    

    View Slide