1. sylsau's Avatar
    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

    Code:
    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

    Code:
    <?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.

    Code:
    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 likes this.
    09-16-2016 03:55 AM
  2. B. Diddy's Avatar
    Thanks for the guide!
    09-17-2016 02:28 AM

Similar Threads

  1. Enlarging the screen size when typing a text?
    By anken in forum Samsung Galaxy S7
    Replies: 10
    Last Post: 05-30-2018, 06:54 AM
  2. Replies: 1
    Last Post: 09-20-2016, 07:38 AM
  3. Replies: 2
    Last Post: 09-16-2016, 02:50 AM
  4. [Tutorial] Reduce APK size
    By milanbarta in forum Software Development and Hacking
    Replies: 1
    Last Post: 09-15-2016, 09:31 PM
  5. Replies: 0
    Last Post: 09-15-2016, 01:07 AM

Tags for this Thread

LINK TO POST COPIED TO CLIPBOARD