How to add badge to BottomNavigationView in Android

Question

I want to use BottomNavigationView view for set some fragments!

But I want to set badge (circle background with text) to one of item of BottomNavigationView ! For this job, I write below codes. In my codes, it works for the first time. but when update badge text, then not show badge text just show circle background without any text!! Why when update badge number hide text count?!

My activity codes :

class MainActivity : AppCompatActivity() {

    private lateinit var disposable: Disposable

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)
        setupNavigation()

        bottomNavigationView.selectedItemId = R.id.tab

        disposable = RxBus.listen(RxEvent.EventAddPerson::class.java).subscribe {
            badgeBottomNavBar(it.personName.toInt())
        }
    }

    private fun setupNavigation() {
        val navController = Navigation.findNavController(this, R.id.mainNavigationFragment)
        //setupActionBarWithNavController(this, navController)
        NavigationUI.setupWithNavController(bottomNavigationView, navController)
    }

    override fun onSupportNavigateUp() = Navigation.findNavController(this, R.id.mainNavigationFragment).navigateUp()

    private fun badgeBottomNavBar(count: Int) {
        val bottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
        val v = bottomNavigationMenuView.getChildAt(2)
        val itemView = v as BottomNavigationItemView

        val view = LayoutInflater.from(this).inflate(R.layout.notification_test, itemView, true)
        val badgeText: TextView = view.findViewById(R.id.notificationsBadge)
        badgeText.text = count.toString()
    }

    override fun onDestroy() {
        super.onDestroy()
        if (!disposable.isDisposed) disposable.dispose()
    }
}

Fragment codes :

class NotificationDetails : Fragment() {

    override fun onCreateView(inflater: LayoutInflater,
                              container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {

        return inflater.inflate(R.layout.fragment_notification_details, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        arguments?.let {
            val passedArguments = NotificationDetailsArgs.fromBundle(it)
            notificationDetailsLabel.text = passedArguments.notificationId
        }

        notificationDetailsLabel.setOnClickListener {
            RxBus.publish(RxEvent.EventAddPerson(editText.text.toString()))
        }
    }
}

How can i fix it?

Answer 1

Your problem is very simple my friend!
You use bottomNavBar options with locally variable!
First you should initialize this variable globally and then use it!

Such as below codes :

class MainActivity : AppCompatActivity() {

    private lateinit var disposable: Disposable
    private lateinit var bottomNavigationMenuView: BottomNavigationMenuView
    private lateinit var itemView: BottomNavigationItemView
    private lateinit var view: View
    private lateinit var badgeText: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_activity)
        setupNavigation()

        bottomNavigationView.selectedItemId = R.id.tab5

        bottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
        val v = bottomNavigationMenuView.getChildAt(2)
        itemView = v as BottomNavigationItemView

        view = LayoutInflater.from(this).inflate(R.layout.notification_test, itemView, true)
        badgeText = view.findViewById(R.id.notificationsBadge)

        //Set badge
        badgeBottomNavBar("15")

        disposable = RxBus.listen(RxEvent.EventAddPerson::class.java).subscribe {
            badgeBottomNavBar(it.personName)
        }
    }

    private fun setupNavigation() {
        val navController = Navigation.findNavController(this, R.id.mainNavigationFragment)
        NavigationUI.setupWithNavController(bottomNavigationView, navController)
    }

    override fun onSupportNavigateUp() = Navigation.findNavController(this, R.id.mainNavigationFragment).navigateUp()

    private fun badgeBottomNavBar(count: String) {
        badgeText.text = count
    }

    override fun onDestroy() {
        super.onDestroy()
        if (!disposable.isDisposed) disposable.dispose()
    }
}

I hope help you