自定义底部导航栏图标

Question

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?

Answer 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)
}