Save 37% off PRO during our Black Friday Sale! »

Badging for Tabs and Bottom Navigation

658634c5077d2652d14b6ba043d850f0?s=47 Umechan
February 12, 2020

Badging for Tabs and Bottom Navigation

658634c5077d2652d14b6ba043d850f0?s=128

Umechan

February 12, 2020
Tweet

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!