$30 off During Our Annual Pro Sale. View Details »

Badging for Tabs and Bottom Navigation

umechanhika
February 12, 2020

Badging for Tabs and Bottom Navigation

umechanhika

February 12, 2020
Tweet

More Decks by umechanhika

Other Decks in Programming

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