Background
In last post we saw how to do a simple animation of bouncing ball. In this we will see how to make a text blink using ObjectAnimator. We will make text - "Hello World!" start and stop blinking using buttons.Creating the Layout
Create layout file - blinking_text_layout.xml and add following content in it.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/startBlinkTextButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Start Blinking Text" /> <Button android:id="@+id/stopBlinkTextButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/startBlinkTextButton" android:layout_centerHorizontal="true" android:text="Stop Blinking Text" /> <TextView android:id="@+id/blinkTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/stopBlinkTextButton" android:layout_centerHorizontal="true" android:paddingTop="10dp" android:text="Hello World!" android:textSize="40sp" /> </RelativeLayout>
The layout should get rendered on your phone as follows -
Now lets write code to animate this text.
Animate Blinking of Text
As you can see from the layout we have two buttons - one to start the blinking animation and other to stop it. Code is as follows -
package com.osfg.animationdemo;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
public class AnimationStarter extends Activity {
private static final String TAG = "AnimationStarter";
ObjectAnimator textColorAnim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.blinking_text_layout);
Button startBlinkTextButton = (Button) findViewById(R.id.startBlinkTextButton);
Button stopBlinkTextButton = (Button) findViewById(R.id.stopBlinkTextButton);
final TextView blinkText = (TextView) findViewById(R.id.blinkTextView);
startBlinkTextButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
textColorAnim = ObjectAnimator.ofInt(blinkText, "textColor", Color.BLACK, Color.TRANSPARENT);
textColorAnim.setDuration(1000);
textColorAnim.setEvaluator(new ArgbEvaluator());
textColorAnim.setRepeatCount(ValueAnimator.INFINITE);
textColorAnim.setRepeatMode(ValueAnimator.REVERSE);
textColorAnim.start();
}
});
stopBlinkTextButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(textColorAnim != null) {
textColorAnim.cancel();
blinkText.setTextColor(Color.BLACK);
}
}
});
}
}
Notice on "Stop Blinking Text" button press we are simply cancelling the current animation and setting the color back to black as the transparency of the text can be different as per the state in which the blinking animation was cancelled.
Note :
Note :
- clearAnimation() method of View will have no effect on ObjectAnimator.
- If you call start() on your ObjectAnimator instance n times then you will have to call cancel() n times for animation to completely stop.
You can try out the code. Recorded video is as follows -
