How can I change the icon in an android toolbar programmatically?

Question

I used this sample code to create a toolbar for my app. https://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar

One of my items is a mute button for my app. So the icon is the standard speaker icon. When the button is clicked, it either mutes or unmutes the app. This works just as it should, but I need to change the icon to match the setting.

I have tried the following code, but it doesn't change the icon.

    public override bool OnCreateOptionsMenu(IMenu menu)
    {
        MenuInflater.Inflate(Resource.Menu.home, menu);
        _menu = menu;

        return base.OnCreateOptionsMenu(menu);
    }

    private void setActionIcon_mute(bool setmuteicon)
    {
        IMenuItem item = _menu.FindItem(Resource.Id.mmute);

        if (_menu != null)
        {
            if (setmuteicon)
            {
                //mute it
                //this does nothing
                item.SetIcon(Resource.Drawable.ic_volume_off_white_24dp);
            }
            else
            {
                //unmute it
                //this does nothing
                item.SetIcon(Resource.Drawable.ic_volume_mute_white_24dp);
            }
        }
    }

Any ideas on how to do this?

Answer 1

The correct way to do this is to override the onPrepareOptionsMenu method in your Activity.

Say you have an app where users can 'Favorite' or 'Un-Favorite' an item. First, create menu.xml with two menu items and set the visible property to true for one and false for the other.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.myapp.SoloActivity">

    <item android:id="@+id/add_favorite"
        android:title="Favorite"
        android:icon="@drawable/ic_favorite_border_black_24dp"
        android:visible="true"
        app:showAsAction="always" />

    <item android:id="@+id/remove_favorite"
        android:title="Favorite"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:visible="false"
        app:showAsAction="always" />
</menu>

Next, in your Activity, override the onPrepareOptionsMenu method and determine which menu item to show.

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    if (IsFavorite) {
        menu.findItem(R.id.add_favorite).setVisible(false);
        menu.findItem(R.id.remove_favorite).setVisible(true)
    } else {
        menu.findItem(R.id.add_favorite).setVisible(true);
        menu.findItem(R.id.remove_favorite).setVisible(false)
    }
}

Now, in the onOptionsItemSelected method of your Activity you can handle the 'click' event for each of these. Then, to toggle the visiblility of the icons, call invalidateOptionsMenu();.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    switch (id) {
        case R.id.add_favorite:
            IsFavorite = !IsFavorite;
            Toast.makeText(this, "Added to Favorites", Toast.LENGTH_SHORT).show();
            invalidateOptionsMenu();
            break;

        case R.id.remove_favorite:
            IsFavorite = !IsFavorite;
            Toast.makeText(this, "Removed from Favorites", Toast.LENGTH_SHORT).show();
            invalidateOptionsMenu();
            break;
    }

    return super.onOptionsItemSelected(item);
}

Calling invalidateOptionsMenu(); will cause the menu to be redrawn, which will cause onPrepareOptionsMenu to be called again.

This is the recommended way to handle making changes to menu items at runtime.

Documentation can be found here: https://developer.android.com/guide/topics/ui/menus.html

I hope this helps!

Answer 2

You can use the toolbar object to get the respective child into a view (ImageView) - View view = toolbar.getChildAt(index); and then use the setImageResource() or any other function to change the icon.