LiveData update of BadgeDrawable in ToolBar MenuItem

Question

I want to show a badge on a toolbar action. The badge number is updated by a LiveData value.

This is how I attach the badge:

BadgeUtils.attachBadgeDrawable(inboxBadgeDrawable, toolbar, R.id.menu_inbox);

I tried different places for that call, including Activity.onCreateOptionsMenu(), Activity.onPrepareOptionsMenu() and androidx.lifgecycle.Observer.onChanged().

When anything changes (toolbar or badge content), the badge is misplaced, traveling down left. Or it is duplicated to another action.

I guess attachBadgeDrawable tries to find the container view of R.id.menu_inbox inside the toolbar, inserts the badge and updates it's offsets. If the container view of the menu item changes, the old container view still has the old badge and there is no (sensible) way to remove it. Also, application of the offsets seems to stack.

So, is there any other intended way of using the BadgeDrawable on a toolbar action icon?

I understand that this feature is still experimental. Will this issue be addressed and if yes, how long will it approximately take? (I use com.google.android.material:material:1.3.0-beta01 right now.)

This question is mainly addressed to the developers of the component because usage questions should be asked here according to https://github.com/material-components/material-components-android.

EDIT: I also created an issue (feature request) on the project's tracker: https://github.com/material-components/material-components-android/issues/1967

Answer 1

I'm not sure it is an official solution but this is still a workaround. I ended up with detaching the BadgeDrawable on every onPrepareOptionsMenu, in case the menu items were changed or rearranged

// This is an indicator of whether we need to show the badge or not
private var isFilterOn: Boolean = false

private var filterBadge: BadgeDrawable? = null

@SuppressLint("UnsafeExperimentalUsageError")
override fun onPrepareOptionsMenu(menu: Menu) {
    super.onPrepareOptionsMenu(menu)

    val filterItem = menu.findItem(R.id.action_filter)
    val toolbar = requireActivity().findViewById<Toolbar>(R.id.toolbar)

    if(filterBadge != null) {
        BadgeUtils.detachBadgeDrawable(filterBadge!!, toolbar, R.id.action_filter)
        filterBadge = null
    }

    if(isFilterOn) {
        filterBadge = BadgeDrawable.create(requireContext()).also {
            BadgeUtils.attachBadgeDrawable(it, toolbar, R.id.action_filter)
        }
    }
}