Using android BadgeDrawable to show the Badge android

If you have to show badge previously on android most time you end up developing some view and put as overlay on FrameLayout or arranging on top of the layout you want to set it.

Current limitation of BaadgeDrawable provided material library are : 

  • No way to set custom font
  • No way to set custom drawable
  • No official way to set font size
  • No way to set stroke border like you see on badges on many apps
  • No way to set text can only set int

If any of them are not problem for you , you can go ahead with badgeDrawable

link to material design badgeDrawble :


Properties that are available to modify :

  • Bade background color
  • Badge text color
  • number - count to set
  • maxLength - max length like 3 is limit it will display 999+ for above length
  • horizontal and vertical offset to change position x,y coordinate
sample code looks like below, most places you have to use tree observer so you can attache once view is drawn, otherwise its not showing up

fab.viewTreeObserver
.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
badgeDrawable = BadgeDrawable.create(fab.context)
badgeDrawable?.maxCharacterCount = 4
badgeDrawable?.number = unreadCount
badgeDrawable?.horizontalOffset = 60
badgeDrawable?.badgeTextColor =
ContextCompat.getColor(requireContext(), R.color.white)
badgeDrawable?.backgroundColor =
ContextCompat.getColor(requireContext(), R.color.red)
badgeDrawable?.isVisible = true
badgeDrawable?.badgeGravity = BadgeDrawable.TOP_END;
BadgeUtils.attachBadgeDrawable(badgeDrawable!!, fab)
fabMyTeam.viewTreeObserver.removeOnGlobalLayoutListener(this)
}
})

Comments

Popular posts from this blog

Using TabLayout and ViewPager with CollapsingToolbarLayout

Styling TextInput Layout with material design library