Animated Icon for Actionitem

Animated Icon for ActionItem

You're on the right track. Here is how the GitHub Gaug.es app will be implementing it.

First they define an animation XML:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"
    android:interpolator="@android:anim/linear_interpolator" />

Now define a layout for the action view:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_refresh"
    style="@style/Widget.Sherlock.ActionButton" />

All we need to do is enable this view whenever the item is clicked:

 public void refresh() {
     /* Attach a rotating ImageView to the refresh item as an ActionView */
     LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     ImageView iv = (ImageView) inflater.inflate(R.layout.refresh_action_view, null);

     Animation rotation = AnimationUtils.loadAnimation(getActivity(), R.anim.clockwise_refresh);
     rotation.setRepeatCount(Animation.INFINITE);
     iv.startAnimation(rotation);

     refreshItem.setActionView(iv);

     //TODO trigger loading
 }

When the loading is done, simply stop the animation and clear the view:

public void completeRefresh() {
    refreshItem.getActionView().clearAnimation();
    refreshItem.setActionView(null);
}

And you're done!

Some additional things to do:

• Cache the action view layout inflation and animation inflation. They are slow so you only want to do them once.
• Add null checks in completeRefresh()

Here's the pull request on the app: https://github.com/github/gauges-android/pull/13/files

Add animated icon to Android Action Bar (no Action Bar Sherlock)

I had to do that for a project. You just subclass ImageView and use that class as your Action View for the menu item.

package com.---.events.android;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AnimatedImageView extends ImageView {

    public AnimatedImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public AnimatedImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public AnimatedImageView(Context context) {
        super(context);
    }

    public void initializeAnimation(){
        setImageDrawable(null);
        setBackgroundAnimation();
        AnimationDrawable da = (AnimationDrawable) getBackground();
        da.start();
    }

    public void setBackgroundAnimation() {
        setBackgroundResource(R.drawable.logo_animation); // this is an animation-list
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        Handler handler = new Handler();
        final AnimatedImageView me = this; 
        handler.post(new Runnable(){
            public void run() {
                me.initializeAnimation();
            }
        });
    }
}

Here's how you specify the Action View from your menu XML.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_animation"
          android:title="test"
          android:showAsAction="always" 
          android:actionViewClass="com.--.events.android.AnimatedImageView" />
</menu>

Android animate toolbar icon while changing its image

Okay, so finally thanks to Victorldavila i managed to get it working, this is my final code:

View button = toolbar.findViewById(R.id.action_button);

//Remove icon animation
if (button != null) {
   Animation animation = AnimationUtils.loadAnimation(getBaseContext(), R.anim.fragment_fade_out);
   animation.setStartOffset(0);
   button.startAnimation(animation);
}

//Add icon animation
if (button != null) {
   Animation animation = AnimationUtils.loadAnimation(getBaseContext(), R.anim.fragment_slide_in_up);
   animation.setStartOffset(0);
   button.startAnimation(animation);
}

How to animate toolbar overflow menu icon

Well, you play with the View specifically ActionMenuView so try this, copy the codes into your Activity

//we declare our objects globally
Toolbar tool;  ActionMenuView amv;

then override onPrepareOptionsMenu, what you decide to return is your choice

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    //to be safe you can check if children are greater than 1
    amv = (ActionMenuView) tool.getChildAt(1);//hope you've met amv
    return true;
}

now this is the crucial part- whenever you want to animate the "3 verticall dots" -(your overflow) you have to check visible children-(i.e if you want to) actually forget that

amv.getChildAt(amv.getChildCount()-1).startAnimation(AnimationUtils.loadAnimation(
        MainActivity.this,R.anim.abc_fade_in));

that gives you a basic fade-in animation- you can pimp your ride now.

EDIT 1:

The above code made assumptions that you have nothing added to your Toolbar aside from just inflating the menu in onCreateOptionsMenu.

Suppose you have a complex ToolBar use this rather for your initialisation

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    for(int i =0; i < tool.getChildCount(); ++i){
        if(tool.getChildAt(i).getClass().getSimpleName().equals("ActionMenuView")){
            amv = (ActionMenuView) tool.getChildAt(i);
            break;
        }
    }
    return true;
}

Also where you call your initialisation of amv View can be in either onCreateOptionsMenu or onPrepareOptionsMenu, i chose onPrepareOptionsMenu because i wanted readability

Hope it helps

Android: ActionBar Item Animation

Call findItem() on the Menu supplied to onCreateOptionsMenu().

Animated Refresh icon

Change

Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate_refresh);

to

Animation rotation = AnimationUtils.loadAnimation(YourActivity.this, R.anim.rotate_refresh);

The reason is that at that point in your code, this refers to View.OnClickListener, not to your activity.

---

Related Topics