ImageView doesn't slike on translationX animation

Question

I'm trying to create a slider, when users fling left or right, this slider will slide animatedly, translation animation. However, it doesn't work in a right way.

package pete.android.study.home.scrollingindicator;



import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class MainScreen extends Activity {

    protected ValueAnimator mScrollIndicatorAnimator;
    protected ValueAnimator mScrollator;
    protected ImageView mScrollIndicator = null;    
    protected static final int sScrollIndicatorFadeInDuration = 150;
    protected static final int sScrollIndicatorFadeOutDuration = 650;
    protected static final int sScrollIndicatorFlashDuration = 650;

    public static final int PAGE_COUNT = 4;
    private int mPageWidth = 0;

    private int mCurrentPage = 0;
    private int mIndicatorPos = 0;
    private int mIndicatorSpace = 0;

    private GestureDetector mGestureDetector;
    private static final boolean DEBUG = true;
    private static final String TAG = "indicator";
    private Handler mHandler;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        //ht = displaymetrics.heightPixels;
        mPageWidth = displaymetrics.widthPixels;

        mHandler = new Handler();
        setupScrollingIndicator();
        mGestureDetector = new GestureDetector(this, new LearnGestureListener());  
    }

    @Override  
    public boolean onTouchEvent(MotionEvent event) {  
      if (mGestureDetector.onTouchEvent(event))  
        return true;  
      else  
        return false;  
    }  

    public void setupScrollingIndicator() {
        if(mScrollIndicator == null) { 
            mScrollIndicator = (ImageView) findViewById(R.id.indicator);
        }

        mIndicatorSpace = mPageWidth / PAGE_COUNT;
        mIndicatorPos = mIndicatorSpace * mCurrentPage;

        if(DEBUG) {
            Log.i(TAG, "mIndicatorSpace = " + mIndicatorSpace);
            Log.i(TAG, "mCurrentPage = " + mCurrentPage);
            Log.i(TAG, "mIndicatorPos = " + mIndicatorPos);         
        }

        if(mScrollIndicator.getMeasuredWidth() != mIndicatorSpace) {
            mScrollIndicator.getLayoutParams().width = mIndicatorSpace;
            mScrollIndicator.requestLayout();           
        }

        mScrollIndicator.setTranslationX(mIndicatorPos);
        mScrollIndicator.invalidate();
    }

    public void showIndicator() {
        setupScrollingIndicator();

        mScrollIndicator.setVisibility(View.VISIBLE);
        cancelScrollingAnimations();

        mScrollIndicatorAnimator = ObjectAnimator.ofFloat(mScrollIndicator, "alpha", 1f);
        mScrollIndicatorAnimator.setDuration(sScrollIndicatorFadeInDuration);
        mScrollIndicatorAnimator.start();

        mScrollator = ObjectAnimator.ofFloat(mScrollIndicator, "translationX", mIndicatorPos);
        mScrollator.setDuration(sScrollIndicatorFlashDuration);
        mScrollator.start();
    }
    Runnable hideScrollingIndicatorRunnable = new Runnable() {
        @Override
        public void run() {
            hideIndicator();
        }
    };

    protected void flashIndicator() {        
        showIndicator();
        mHandler.postDelayed(hideScrollingIndicatorRunnable, sScrollIndicatorFlashDuration);
    }
    public void hideIndicator() {
        setupScrollingIndicator();
        cancelScrollingAnimations();

        mScrollIndicatorAnimator = ObjectAnimator.ofFloat(mScrollIndicator, "alpha", 0f);
        mScrollIndicatorAnimator.setDuration(sScrollIndicatorFadeOutDuration);
        mScrollIndicatorAnimator.addListener(new AnimatorListenerAdapter() {
            private boolean cancelled = false;
            @Override
            public void onAnimationCancel(android.animation.Animator animation) {
                cancelled = true;
            }
            @Override
            public void onAnimationEnd(Animator animation) {
                if (!cancelled) {
                    mScrollIndicator.setVisibility(View.INVISIBLE);
                }
            }
        });
        mScrollIndicatorAnimator.start();        
    }
    public void cancelScrollingAnimations() {
        if(mScrollIndicatorAnimator != null) {
            mScrollIndicatorAnimator.cancel();
        }
    }

    public void scrollToRight() {
        flashIndicator();
        mCurrentPage++; 
        if(mCurrentPage >= PAGE_COUNT) {
            mCurrentPage = 0;
        }
    }

    public void scrollToLeft() {
        flashIndicator();
        mCurrentPage--;
        if(mCurrentPage < 0) {
            mCurrentPage = PAGE_COUNT - 1;
        }
    }

    class LearnGestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override  
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {  
            if(e2.getX() - e1.getX() > 50) {

                scrollToLeft();
            } else if(e2.getX() - e1.getX() < 50) {
                scrollToRight();

            } 
            return true;  
        }  
    }  

}

Please help me fix this, thanks very much!

Answer 1

mScrollIndicator.setTranslationX(mIndicatorPos) just redraw your view on new position mIndicatorPos. It doesn't do animating.

If you wanna mScrollIndicator move along with your scroll event, try to override onScroll method instead of onFling.

Or another way, create an android.animation.ObjectAnimator object, setup it for your view and call ObjectAnimator.start() on Fling.