Animate the Actionbar button

Question

Good afternoon, I have an app that has a refresh button on Actionbar :

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:com.my.app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/action_refresh"
        android:icon="@mipmap/ic_refresh"
        android:title="@string/app_name"
        com.my.app:showAsAction="always"
          />
</menu>

I would like to click, start an Animation on the button.
As a starting point, I took an example where you add a ProgressBar in place of the button. Follows:

     public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId())
            {
                case R.id.action_refresh:
                    mRefreshAction = item;
                    mRefreshAction.setActionView(R.layout.menu_progress);
                    mRefreshAction.expandActionView();

                    break;
                default:
                    break;
            }
            return true;
        }

menu_progress.xml :

<?xml version="1.0" encoding="utf-8"?>

<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progressBar2"
    android:indeterminate="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

</ProgressBar> 

This one worked perfectly, so I tried to change the ProgressBar for an image and animate it:

    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId())
        {
            case R.id.action_refresh:
                mRefreshAction = item;
                mRefreshAction.setActionView(R.layout.menu_progress);
                mRefreshAction.expandActionView();
                Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate);
                rotation.setRepeatCount(Animation.INFINITE);
                mRefreshAction.getActionView().startAnimation(rotation);
                break;
            default:
                break;
        }
return true;
}

menu_progress.xml :

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progressBar2"
    android:src="@mipmap/ic_refresh"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

</ImageView>

But the image is not displayed! Would anyone know how to animate an image in Actionbar? Thanks in advance!

Answer 1

I managed to solve as follows: Includes the image inside a LinearLayout and worked properly.

Follow the updated code:

As I will use on multiple screens, I created an abstract class to take care of:

Java:

public  abstract  class LoaderModelActivity extends AppCompatActivity {

    protected MenuItem mRefreshAction;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu_main, menu);
        this.mRefreshAction = menu.findItem(R.id.action_refresh);
        boolean r = super.onCreateOptionsMenu(menu);
        onLoadAction();
        return r;
    }


    /**
     * Metodo abstrato que executa a ação da classe filha, logo que o menu estiver pronto
     */
    protected  abstract void onLoadAction();


    /**
     *Inicia a animação
     */
    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
    public void startSyncMenu()
    {
        if(null == mRefreshAction)
        {
            return;
        }
        mRefreshAction.setActionView(R.layout.menu_progress);
        mRefreshAction.expandActionView();
        final Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate);
        rotation.setRepeatCount(Animation.INFINITE);
        // Anima-se a Imagem, pois e necessario um layout para corrigir a posicao
        ImageView.class.cast(mRefreshAction.getActionView().findViewById(R.id.progressBar2)).startAnimation(rotation);

    }

    /**
     * Para a animação
     */
    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
    public void stopSyncMenu()
    {
        if(null == mRefreshAction)
        {
            return;
        }
        ImageView.class.cast(mRefreshAction.getActionView().findViewById(R.id.progressBar2)).clearAnimation();
        mRefreshAction.setActionView(null);
        mRefreshAction.expandActionView();
        mRefreshAction.collapseActionView();
    }

}

menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:com.my.app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/action_refresh"
        android:icon="@mipmap/ic_refresh"
        android:title="@string/app_name"
        com.my.app:showAsAction="always"
        />

</menu>

menu_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <ImageView
        android:id="@+id/progressBar2"
        android:src="@mipmap/ic_refresh"
        android:layout_marginRight="8dp"
        android:layout_width="31dp"
        android:layout_height="31dp">
    </ImageView>
</LinearLayout>

xml Rotate.

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromDegrees="-360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:interpolator="@android:anim/linear_interpolator" />

Greetings,