Wednesday, March 27, 2013

Typewriter TextView

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