Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

  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!