[Tutorial] Create a Type Writer Effect

[sylsau]

Hello,

I create that thread to present you a tutorial learning you to create a Type Writer Effect on Android. It's also a good way to learn how to create a custom view implementation. The tutorial is also available in video where you could discover the Type Writer Effect in action at the end of the video.

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.

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");
      }
    });

  }
}

Don't hesitate to try the tutorial and give me your feedbacks if you need more explanations.

Thanks.

Sylvain

 

[B. Diddy]

Thanks for the guide!