1

I use the latest version of the material design Bottom Navigation Bar. I want to have a red dot on one if the icons. Unfortunately, by default Nab bar applies color automatically and red dot color is lost. How to add red dot to an icon? To apply another ViewGroup on top of the Nav bar? Extend Nav bar class and change the coloring behavior? enter image description here

Angelina
  • 1,473
  • 2
  • 16
  • 34
  • how have you added icond to your menu, is it using selector? – karan Dec 15 '18 at 09:10
  • @Karan Mer yes, i added them in a standard way in XML, where each item is defined with tag and there is set the default icon. Then onEvent I find this item and use method setIcon(resourceIdWithRedDot) – Angelina Dec 15 '18 at 09:14
  • 1
    is your icon a drawable? – karan Dec 15 '18 at 09:15
  • @Karan Mer i am not sure i understood the question. It is a vector drawable which I added to drawable folder. The default one (without red dot) i set in XML in menu resource and the same shape but with a red dot I set programmatically using setIcon(R.drawable.redDot) – Angelina Dec 15 '18 at 09:20
  • then post the code on when you are changing the icon. – karan Dec 15 '18 at 09:21
  • navBar.menu.findItem(R.id.activity).setIcon(R.drawable.redDot) the new image appears. But the dot is not red. – Angelina Dec 15 '18 at 09:26
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185286/discussion-between-angelina-and-karan-mer). – Angelina Dec 15 '18 at 09:26
  • @Karan this is good check when I found default icons are good but customized icons will be rectangle. I know my customized icons are not drawable(they are png) but don't know how to make them drawable. – Shark Deng Oct 04 '19 at 03:00

1 Answers1

1

this icon is called badge and it is implemented in several ways: Display badge on top of bottom navigation bar's icon

I have implemented this feature myself this way:

private fun addNewRedDotImage() {
    val activityItemView: BottomNavigationItemView = navigation.findViewById(R.id.activity)
    val icon = activityItemView.findViewById<ImageView>(R.id.icon)
    val badge = LayoutInflater
            .from(this)
            .inflate(R.layout.red_dot_notification_badge_layout, activityItemView, false)
    /* get position of icon relative to its parent */
    val iconRect = Rect()
    icon.getLocalVisibleRect(iconRect)
    val badgeLeftPosition = activityItemView.width / 2
    val badgeTopPosition = iconRect.top

    /* set position of badge relative to the icon */
    val params = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
    params.leftMargin = badgeLeftPosition
    params.bottomMargin = badgeTopPosition
    activityItemView.addView(badge, params)
}
Angelina
  • 1,473
  • 2
  • 16
  • 34