Android Tip: Type Writer Animation

    Meaningful animations always make our application more exciting and friendly. So, in the development work, you should pay attention to this topic. Android SDK supports us a lot in building the our own animations, sometimes just a few simple steps in code.
   In this tip, you’re going to learn how to create a Type Writer Effect in Android. Like you’re going to see, it’s really easy to create this cool effect on Android by creating a subclass of the TextView component (make a custom view) and by using a Handler and it's postDelayed() method.

Creating a custom TextView

    I named this class is TypeWriterTextView, it will extend from TextView. All you need is combining a Handler with a Runnable that is used to type each letter of the text to display at some defined delay by calling the postDelayed() method of the Handler object:

TypeWriterTextView.java

package info.devexchanges.typewriteranimation;

import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.widget.TextView;

public class TypeWriterTextView extends TextView {

    private CharSequence sequence;
    private int mIndex;
    private long delay = 150; //default is 150 milliseconds

    public TypeWriterTextView(Context context) {
        super(context);
    }

    public TypeWriterTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private Handler handler = new Handler();
    private Runnable runnable = new Runnable() {

        @Override
        public void run() {
            setText(sequence.subSequence(0, mIndex++));
            if (mIndex <= sequence.length()) {
                handler.postDelayed(runnable, delay);
            }
        }
    };

    /**
     * Display text with type writer animation
     * @param txt content will be displayed
     */
    public void displayTextWithAnimation(CharSequence txt) {
        sequence = txt;
        mIndex = 0;

        setText("");
        handler.removeCallbacks(runnable);
        handler.postDelayed(runnable, delay);
    }

    /**
     * Change the delay value with this method
     * @param m
     */
    public void setCharacterDelay(long m) {
        delay = m;
    }
}

Declaring in activity layout

    In order to use it, just put a TypeWriterTextView object to activity layout (XML) file like this:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.devexchanges.typewriteranimation.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/button" />

    <info.devexchanges.typewriteranimation.TypeWriterTextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="20sp" />
</RelativeLayout>

Start animation in activity programmatically code

    Nothing special at the activity Java code, we have just to start the animation by calling the displayTextWithAnimation() method of our TypeWriterTextView implementation:

MainActivity.java

package info.devexchanges.typewriteranimation;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        final TypeWriterTextView animationText = (TypeWriterTextView) findViewById(R.id.text_view);
        Button btnStartAnimation = (Button) findViewById(R.id.button);

        //Start animation in TextView after click
        btnStartAnimation.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animationText.setText("");
                animationText.setCharacterDelay(160);
                animationText.displayTextWithAnimation(getString(R.string.lorem_ipsum));
            }
        });

    }
}

Output when running

    After launching the app, you'll have this output:

Final thoughts

    As you can see, by making a custom view from TextView, we now have type writer animation in our UI. Moreover, you can visit this tag link to read all posts about Android animation on my blog.
    Reference: Original post from Ssaurel Blog.

Author : Hong Thai

Share