Uncategorized

Blinking text animation in Android

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 :

  • 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 –

 

Related Links

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s