Show progressbar on MenuItem, even if it is on split action bar mode

Question

I'm checking how to change the icon of a menu item to a progress bar loading animation. I tried with

<item android:id="@+id/action_favorite"
    android:icon="@drawable/ic_action_heart"
    clasificados:showAsAction="always|collapseActionView"
    clasificados:actionViewClass="android.widget.ProgressBar"/>

I'm using the split action bar mode. And when I click it, the icon dissapear and a progress bar shows it on the top bar.

What I need to change?

Answer 1

You'll need to add and remove the action view dynamically. Here's a quick example

<item
    android:id="@+id/action_favorite"
    android:icon="@drawable/ic_action_heart"
    android:showAsAction="always" />

---

@Override
public boolean onOptionsItemSelected(final MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_favorite:
            item.setActionView(new ProgressBar(this));
            item.getActionView().postDelayed(new Runnable() {

                @Override
                public void run() {
                    item.setActionView(null);
                }
            }, 1000);
            return true;
        default:
            return false;
    }
}

About the speed of the gif, it's just the bitrate I recorded at.

Answer 2

From library UCrop https://github.com/Yalantis/uCrop

ucrop_loader_circle_path.xml

<objectAnimator
    android:duration="@integer/ucrop_progress_loading_anim_time"
    android:propertyName="trimPathEnd"
    android:repeatCount="-1"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType"/>

<objectAnimator
    android:duration="@integer/ucrop_progress_loading_anim_time"
    android:propertyName="strokeAlpha"
    android:repeatCount="-1"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType"/>

ucrop_loader_circle_scale.xml

<objectAnimator
    android:duration="@integer/ucrop_progress_loading_anim_time"
    android:propertyName="scaleX"
    android:repeatCount="-1"
    android:valueFrom="0.666"
    android:valueTo="1.0"
    android:valueType="floatType"/>

<objectAnimator
    android:duration="@integer/ucrop_progress_loading_anim_time"
    android:propertyName="scaleY"
    android:repeatCount="-1"
    android:valueFrom="0.666"
    android:valueTo="1.0"
    android:valueType="floatType"/>

<objectAnimator
    android:duration="@integer/ucrop_progress_loading_anim_time"
    android:propertyName="rotation"
    android:repeatCount="-1"
    android:valueFrom="0"
    android:valueTo="360"
    android:valueType="floatType"/>

ucrop_vector_loader.xml

<group
    android:name="circleGroup"
    android:pivotX="96.0"
    android:pivotY="96.0"
    android:rotation="0">

    <path
        android:name="circlePath"
        android:pathData="M96,5.56405C145.946,5.56405 186.436,46.0536 186.436,96C186.436,145.946 145.946,186.436 96,186.436C46.0536,186.436 5.56405,145.946 5.56405,96C5.56405,46.0536 46.0536,5.56405 96,5.56405Z"
        android:strokeAlpha="1"
        android:strokeColor="@color/ucrop_color_toolbar_widget"
        android:strokeWidth="13"
        android:trimPathEnd="0.7"/>

</group>

ucrop_vector_loader_animated.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
                 android:drawable="@drawable/ucrop_vector_loader">
    <target
        android:name="circleGroup"
        android:animation="@anim/ucrop_loader_circle_scale"/>
    <target
        android:name="circlePath"
        android:animation="@anim/ucrop_loader_circle_path"/>

</animated-vector>

menu_playlist.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_action_favorite_add"
        android:title="Add"
        app:showAsAction="always"
        android:icon="@drawable/ic_playlist_favorite_off"
        />


    <item
        android:id="@+id/menu_loader"
        android:enabled="false"
        android:icon="@drawable/ucrop_vector_loader_animated"
        android:title=""
        app:showAsAction="always"/>
</menu>

In Activity:

boolean mShowProgressMenuItemLoader = false;

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_playlist, menu);
        MenuItem menuItemLoader = menu.findItem(R.id.menu_loader);
        Drawable menuItemLoaderIcon = menuItemLoader.getIcon();
        if (menuItemLoaderIcon != null) {
            try {
                menuItemLoaderIcon.mutate();
//                menuItemLoaderIcon.setColorFilter(mToolbarWidgetColor, PorterDuff.Mode.SRC_ATOP);
                menuItemLoader.setIcon(menuItemLoaderIcon);
            } catch (IllegalStateException e) {
                Log.i(TAG, "onCreateOptionsMenu: ",e);
            }
            ((Animatable) menuItemLoader.getIcon()).start();
        }
        return super.onCreateOptionsMenu(menu);
    }

 @Override
    public boolean onPrepareOptionsMenu(Menu menu) {

            menu.findItem(R.id.menu_loader).setVisible(mShowProgressMenuItemLoader);
            menu.findItem(R.id.item_action_favorite_add).setVisible(!mShowProgressMenuItemLoader);

        return super.onPrepareOptionsMenu(menu);
    }


@Override
    public void showProgressMenuItem() {
        mShowProgressMenuItemLoader = true;
        invalidateOptionsMenu();
    }

    @Override
    public void hideProgressMenuItem() {
        mShowProgressMenuItemLoader = false;
        invalidateOptionsMenu();
    }

Usage:

showProgressMenuItem();
hideProgressMenuItem();