Typewriter TextView

Today, we will develop the element to be one character to stamp text on the screen.

Development TypewriterTextView

The basis of our class will be normal TextView. Create a new class TypewriterTextView and extend it from TextView.

public class TypewriterTextView extends TextView {
 
   
    public TypewriterTextView(Context context) {
        super(context);
    }
    
    public TypewriterTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    public TypewriterTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
}

Add the following attributes to our class:

- The display time a single character

private final static float TEXT_CHARACTER_DELAY = 0.1f;

private final static int TEXT_CHARACTER_DELAY_MS = (int)(TEXT_CHARACTER_DELAY * 1000);

- The index of the current character

private int mCurrentCharacter;

- The time elapsed since the last character display

private long mLastTime;

- The display text

private CharSequence mText;

Override method rendering for displaying text character by character (onDraw()).

public void onDraw(Canvas canvas) {
        final long time = SystemClock.uptimeMillis();
        final long delta = time - mLastTime;
        if (delta > TEXT_CHARACTER_DELAY_MS) {
            if (mText != null) {
                if (mCurrentCharacter <= mText.length()) {
                    CharSequence subtext = mText.subSequence(0, mCurrentCharacter);
                    setText(subtext, TextView.BufferType.SPANNABLE);
                    mCurrentCharacter++;
                    postInvalidateDelayed(TEXT_CHARACTER_DELAY_MS);
                }
            }
        }
        super.onDraw(canvas);
    }

Add a method to set a new text

public void setTypewriterText(CharSequence text) {
        mText = text;
        mCurrentCharacter = 0;
        mLastTime = 0;
        postInvalidate();
    }

And the method to display the full text of the entire

public void snapToEnd() {
        mCurrentCharacter = mText.length() - 1; 
    }

Preparing resources

Source code of string resources (values/strings)

  <resources>

      <string name="app_name">TypewriterTextView</string>

      <string name="btn_txt">Type</string>

      <string name="sample_text">Android powers hundreds of millions of mobile devices in more than 190 countries around the world. It\'s the largest installed base of any mobile platform and growing fast—every day another million users power up their Android devices for the first time and start looking for apps, games, and other digital content.</string>

  </resources>

Layout of application will consist of the input text fields, button and typewriter TextView.

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <EditText

        android:id="@+id/typeEd"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

    <Button

        android:id="@+id/typeBtn"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="@string/btn_txt" />

    <org.snowpard.proects.seventeen.TypewriterTextView

        android:id="@+id/typeTxt"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1" />

  </LinearLayout>

MainActivity

Source code of the main Activity

public class MainActivity extends Activity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  final TypewriterTextView ttv = (TypewriterTextView)findViewById(R.id.typeTxt);
  ttv.setTypewriterText(getString(R.string.sample_text));
  ttv.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    ttv.snapToEnd();
   }
  });
  
  final EditText et = (EditText)findViewById(R.id.typeEd);
  Button btn = (Button)findViewById(R.id.typeBtn);

  btn.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    ttv.setTypewriterText(et.getText());
   }
  });
 }


}

Links

• The source codes of this project can be downloaded here: zip