Create a Type Writer Effect on Android

In that tutorial, you’re going to learn how to create a Type Writer Effect on Android. Like you’re going to see, it’s really easy to create this cool effect on Android by creating a custom implementation of the TextView component and by using a Handler and its postDelayed method.

Image for post
Image for post

1. Create the Type Writer View

public class TypeWriter extends TextView {  private CharSequence mText;
private int mIndex;
private long mDelay = 150; // in ms
public TypeWriter(Context context) {
super(context);
}
public TypeWriter(Context context, AttributeSet attrs) {
super(context, attrs);
}
private Handler mHandler = new Handler(); private Runnable characterAdder = new Runnable() { @Override
public void run() {
setText(mText.subSequence(0, mIndex++));
if (mIndex <= mText.length()) {
mHandler.postDelayed(characterAdder, mDelay);
}
}
};
public void animateText(CharSequence txt) {
mText = txt;
mIndex = 0;
setText("");
mHandler.removeCallbacks(characterAdder);
mHandler.postDelayed(characterAdder, mDelay);
}
public void setCharacterDelay(long m) {
mDelay = m;
}
}

The TypeWriter class is a specific implementation of the standard TextView component. All the magic is in the characterAdder 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.

2. Create a layout to display a Button and the TypeWriter view

<?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: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="com.ssaurel.typewriter.MainActivity">
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="20dp"
android:text="Start Animation" />
<com.ssaurel.typewriter.TypeWriter
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/btn"
android:layout_centerInParent="true"
android:textSize="23sp" />
</RelativeLayout>

3. Start the Animation in the Main Activity

Now, we have just to start the Animation in the Main Activity by calling the animateText method of our TypeWriter implementation.

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 TypeWriter tw = (TypeWriter) findViewById(R.id.tv);
Button btn = (Button) findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tw.setText("");
tw.setCharacterDelay(150);
tw.animateText("Type Writer Effect");
}
});
}
}

4. Demo

To see the Type Writer in action and enjoy this tutorial with audio comments, watch the following video on Youtube :

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store