Keep menuitem animations from overlapping?

Issue

So I'm trying to animate a refresh menuitem whenever the webview is loading and whenever the activity starts. I'm also trying to hide a forward menuitem whenever it's not necessary. the following code works perfectly except whenever the webview is loading and you hit back or when you try to do more than one task at a time (clicking back through a lot of history). Whenever this happens the refresh menuitem tends to duplicate, animate, and overlap itself. This also happens with the forward menuitem. It tends to be overlapped by an animated refresh icon. is there any way to keep this from happening? the following code is my code exactly except whatever is not relevant has been trimmed. Can someone help me overcome this bug?

public class TideWeb extends Activity {
    private static WebView webView;
    String name = null;
    MenuItem refresh, forward;
    ActionBar ab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent launchingIntent = getIntent();
        name = launchingIntent.getType().toString();
        setContentView(R.layout.webview);
        webView = (WebView) findViewById(R.id.WebView);
        webView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView webview, String url) {
                    if (refresh != null && refresh.getActionView() == null) {
                        StartAnimation();
                    }
                    ab.setSubtitle("Loading...");
                    webView.loadUrl(url);

                return true;

            }
        });
        webView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                setSupportProgress(progress * 100);
                if (progress == 100) {
                    view.clearCache(true);
                    StopAnimation();
                    ab.setSubtitle(name);
                }
            }
        });
        String url = launchingIntent.getData().toString();

        webView.loadUrl(url);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getSupportMenuInflater().inflate(R.menu.tideweb, menu);
        forward = menu.findItem(R.id.forward_menu);
        if (webView.isFocused() && webView.canGoForward()) {
            forward.setVisible(true);
        } else {
            forward.setVisible(false);
        }
        ab.setSubtitle("Loading...");
        refresh = menu.findItem(R.id.refresh_menu);
        if (refresh != null && refresh.getActionView() == null) {
            StartAnimation();
        }
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case R.id.forward_menu:
            webView.goForward();
            invalidateOptionsMenu();
            break;
        case R.id.refresh_menu:
            webView.reload();
            invalidateOptionsMenu();
            break;
        case android.R.id.home:
            Intent intent = new Intent(this, Main.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            return true;
        }
        return true;
    }

    public void onBackPressed() {
        if (webView.isFocused() && webView.canGoBack()) {
            webView.goBack();
            invalidateOptionsMenu();
        } else {
            super.onBackPressed();
            finish();
        }
    }

    private void StartAnimation() {
    if (refresh != null && refresh.getActionView() == null) {
            final LayoutInflater inflater = (LayoutInflater) getApplication()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            final RelativeLayout ivRefresh = (RelativeLayout) inflater.inflate(
                R.layout.refresh_view, null);

            final Animation rotation = AnimationUtils.loadAnimation(
                getApplication(), R.anim.rotate);
            ivRefresh.startAnimation(rotation);
            refresh.setActionView(ivRefresh);
        }
    }

    private void StopAnimation() {
        if (refresh != null && refresh.getActionView() != null) {
            refresh.getActionView().clearAnimation();
            refresh.setActionView(null);
        }
    }
}

loading, then back:

loading, then back and back:

Solution

I didn't really find a fix for this, but instead of using an image and animating it, I set the actionview to a progressbar. The overlapping doesn't happen anymore, so I guess it's fixed now.

Answered By - TheWizKid95