Android: Text fade in and out

Question

I've read this stackoverflow question and answer and tried to implement a text fade in and out:

How to make text fade in and out in Android?

This is my implementation:

public class ShowActivity extends Activity 
{

    @Override
    protected void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show);

        final TextView mSwitcher = (TextView) findViewById(R.id.textFade);
        mSwitcher.setText("old text");

        final Animation in = new AlphaAnimation(0.0f, 1.0f);
        in.setDuration(5000);

        final Animation out = new AlphaAnimation(1.0f, 0.0f);
        out.setDuration(5000);
        out.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationEnd(Animation animation) {
                mSwitcher.setText("New Text");
                mSwitcher.startAnimation(in);

            }

            @Override
            public void onAnimationRepeat(Animation arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationStart(Animation arg0) {
                // TODO Auto-generated method stub

            }
        });


        mSwitcher.startAnimation(out);
        mSwitcher.setText("Text 1.");
        mSwitcher.startAnimation(in);

        mSwitcher.startAnimation(out);
        mSwitcher.setText("Text 2.");
        mSwitcher.startAnimation(in);

    }
}

The problem is, that only text 2 appears and it only fade in and not fade out. What could be wrong?

Answer 1

Look at my class. You only have to include it.

public class SuperTextView extends TextView {

    private boolean ready;

    public SuperTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        ready = false;
        addTextChangedListener(new CustomTextWatcher(this));
    }

    public SuperTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        ready = false;
        addTextChangedListener(new CustomTextWatcher(this));
    }

    public SuperTextView(Context context) {
        super(context);
        ready = false;
        addTextChangedListener(new CustomTextWatcher(this));
    }

    @Override
    public void setText(CharSequence text, BufferType type) {
        if (ready && getText() != null && text != null) {
            String toChange = (String) text.toString();
            String myText = "" + getText();
            if (!myText.equals(toChange)) super.setText(text, type);
        } else super.setText(text, type);
    }


    public class CustomTextWatcher implements TextWatcher {

        private TextView element;
        private Integer[] rgb;

        public CustomTextWatcher(TextView element) {
            this.element = element;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            final int from = 255, to = 0;

            ValueAnimator anim = ValueAnimator.ofFloat(0, 1);
            anim.setDuration(500);

            rgb = parseColor(element.getCurrentTextColor());
            final int[] alpha  = new int[1];
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    alpha[0] = (int) (from + (to - from)*animation.getAnimatedFraction());
                    element.setTextColor(Color.argb(alpha[0], rgb[0], rgb[1], rgb[2]));
                }
            });

            anim.start();
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            //Log.e("Text","change");
        }

        @Override
        public void afterTextChanged(Editable s) {
            ready = true;
            final int from = 0, to = 255;

            ValueAnimator anim = ValueAnimator.ofFloat(0, 1);
            anim.setDuration(500);

            final int[] alpha  = new int[1];
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    alpha[0] = (int) (from + (to - from)*animation.getAnimatedFraction());
                    element.setTextColor(Color.argb(alpha[0], rgb[0], rgb[1], rgb[2]));
                }
            });

            anim.start();
        }

        public Integer[] parseColor(int value) {
            Integer[] rgb = new Integer[3];

            String hexColor = String.format("%06X", (0xFFFFFF & value));

            int color = (int)Long.parseLong(hexColor, 16);
            rgb[0] = (color >> 16) & 0xFF;
            rgb[1] = (color >> 8) & 0xFF;
            rgb[2] = (color >> 0) & 0xFF;

            return rgb;
        }
    }
}

Note that this class can't be used inside ListView items managed by ViewHolders.

Answer 2

The problem is that you are starting a fade in animation immediately every time you start a fade out animation.

I was able to modify your code and get a simple example working, here's the code:

import android.os.Handler;

public class ShowActivity extends Activity
{
    Handler handler;
    TextView mSwitcher;

    Animation in;
    Animation out;

    int fadeCount;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show);

        fadeCount = 0;

        handler = new Handler();

        mSwitcher = (TextView) findViewById(R.id.textView);
        mSwitcher.setText("old text");

        in = new AlphaAnimation(0.0f, 1.0f);
        in.setDuration(5000);

        out = new AlphaAnimation(1.0f, 0.0f);
        out.setDuration(5000);
        out.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationEnd(Animation animation) {
                fadeCount++;
             if (fadeCount == 3){
                mSwitcher.setText("");
                Intent i = new Intent(getApplication() ,  MainActivity.class);
                startActivity(i);
             }
             else {
                if (fadeCount == 1) {
                    mSwitcher.setText("Text 2.");
                } else {
                    mSwitcher.setText("New Text");
                }

                mSwitcher.startAnimation(in);
                handler.postDelayed(mFadeOut, 5000);
             }    
            }

            @Override
            public void onAnimationRepeat(Animation arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationStart(Animation arg0) {
                // TODO Auto-generated method stub

            }
        });

        //mSwitcher.startAnimation(out);
        mSwitcher.setText("Text 1.");
        mSwitcher.startAnimation(in);

       /*
        mSwitcher.startAnimation(out);
        mSwitcher.setText("Text 2.");
        mSwitcher.startAnimation(in);
        */

        handler.postDelayed(mFadeOut, 5000);

    }

    private Runnable mFadeOut =new Runnable(){

        @Override
        public void run() {
            //Speed up the last fade-out so that the Activity opens faster
            if (fadeCount == 2){
                out.setDuration(2000);
            }
            mSwitcher.startAnimation(out);
        }
    };
}