Simple fade-out animation for a string on canvas, android

Question

I have a custom view extending from View with lots of text drawn at different angles and I want a particular string to decrease its alpha value to a certain level once, after first start. Any suggestion or snippet would be appreciated :)

postInvalidateDelayed(...) doesn't seem to work for this task.

Answer 1

There was a mistake in the correct measurement of vertical text bounds to be faded. Here is my onDraw method

Paint myPaint = new Paint();
myPaint.setColor(Color.parseColor("#" + colorAlpha + "3AA6D0"));// initially colorAlpha is ff
Rect r = new Rect();
char[] a = "Hello World".toCharArray();
datePaint.getTextBounds(a, 0, a.length, r);// get the bound of the text, I was not calculating this correctly
canvas.drawText("Hello World", 0, 0, myPaint);// draw the text

int colorValue = Integer.parseInt(colorAlpha, 16);
    colorValue -= 20;// decrease alpha value for next call to onDraw method by postInvalidateDelayed
if (colorValue > 40) {
        colorAlpha = Integer.toHexString(colorValue);


 // this will create the effect of fade out animation
 // because each call to onDraw method is at the difference of 50 millisecond delay 
 // and in each call we are decreasing alpha value by 20.
        postInvalidateDelayed(50, r.left, r.top, r.right, r.bottom);
}

Answer 2

One possibility might be to create two views, inside of a FrameLayout that overlap each other. One view would contain all the static strings, the other the string you want to animate. Then it would be a simple matter of adding an alpha animation to the animated view.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <package.MyNonAnimatedView
        android:id="@+id/nonAnimatedView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <package.MyAnimatedView
        android:id="@+id/animatedView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</FrameLayout>

And for an animation you would attach to the animated view:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="100" />

From within your activity's onCreate(Bundle) method, you can call AnimationUtils.loadAnimation(Context, int) to load the animation from the xml resource and attach it to the animated view (provided you give it an id).

Answer 3

You can add a Handler to your activity that can send messages at a specified interval. When your activity receives a callback from the handler, it can notify the view to update the parts that you want to change.

An example:

public class myActivity extends Activity implements Handler.Callback {

    int mDelay = 100; // Update interval (milliseconds).
    Handler mHandler = new Handler(this);
    private Runnable mEvent = new Runnable() {
        @Override
        public void run() {
            mHandler.postDelayed(mEvent, mDelay);
            Message message = mHandler.obtainMessage();
            // Add arguments to message, if required.
            mHandler.sendMessage(message);
        }
    };

    @Override
    public boolean handleMessage(Message message) {
        // Your view update code.
    }

    private void start() {
        mHandler.postDelayed(mEvent, mDelay);
    }

    private void stop() {
        mHandler.removeCallbacks(mEvent);
    }
}

Calling start() starts the handler, stop() stops it. Determining when to stop the handler will probably be in the handleMessage(Message) code.