AnimatedEditText for Android

This repository contains AnimatedEditText, PinEntryEditText and TextDrawable all of which extend the behaviour of EditText and implement features that are otherwise not available.

Features

Text animates in as typed.
PinEntryEditText which supports animations.
TextDrawable which allows you to set and use text as a drawable.
AnimatedEditText and PinEntryEditText let you specify any mask you want for the text.

Usage

How to include dependecy in gradle

Below is a fast guide to getting started. However, if you need to read about these widgets in details. Read more about AnimatedEditText, PinEntryEditText, TextDrawable.

Then simply add the following to your dependencies.

compile 'com.alimuzaffar.lib:animated-edit-text:0.0.2'

Setup AnimatedTextView and PinEntryView in your layout

    <com.alimuzaffar.lib.widgets.PinEntryEditText
        android:id="@+id/txt_pin_entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cursorVisible="false" //recommended
        android:digits="1234567890"
        android:inputType="number"
        android:maxLength="4" //required
        android:textIsSelectable="false" //recommended
        android:textSize="20sp"
        app:pinAnimationType="popIn|fromBottom" //optional
		app:pinCharacterMask="*" //optional
        app:pinLineColors="@color/pin_line_colors" /> //optional

    <com.alimuzaffar.lib.widgets.AnimatedEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Animate pop in"
        android:inputType="textNoSuggestions" //recommended when typing text to avoid autocomplete.
        app:pinAnimationType="popIn|fromBottom|fromRight|fromMiddle" //optional
        app:animationType="popIn" /> //optional

Listen for pin entry and setup TextDrawable in code

    EditText regular = (EditText) findViewById(R.id.txt_regular);
    final PinEntryEditText pinEntry = (PinEntryEditText) findViewById(R.id.txt_pin_entry);
    if (pinEntry != null) {
        pinEntry.setAnimateText(true); //needed, no animation by default for PinEntryEditText
        pinEntry.setOnPinEnteredListener(new PinEntryEditText.OnPinEnteredListener() {
            @Override
            public void onPinEntered(CharSequence str) {
                if (str.toString().equals("1234")) {
                    Toast.makeText(AnimatedEditTextWidgetsActivity.this, "SUCCESS", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(AnimatedEditTextWidgetsActivity.this, "FAIL", Toast.LENGTH_SHORT).show();
                    pinEntry.setText(null);
                }
            }
        });
    }
    if (regular != null) {
        regular.setCompoundDrawables(new TextDrawable(regular, "+61 "), null, new TextDrawable(regular, "\u2605"), null);
    }

Supported Animations

PopIn (default)
Bottom Up
In from right
In from middle

You can see a YouTube video of all the animations here: YouTube video

Pop-in animation

Bottom Up Animations

In from right

In from middle

Known limitations

Animations are only triggered when adding to the end of the string. This is why autocomplete doesn't work as it technically replaces the whole word.
Animation will work best if android:inputType="textNoSuggestions" is set.
Only android:gravity="left|right|center_horizontal" is supported.
No RTL language support.
Animate in from middle doesn't work properly except from android:gravity="left"
Not all features of EditText will work
PinEntryView will only perform bottom up or pop-in animations.
Using some Unicode characters as masks causes the cursor to lose position. If this happens, I recommend setting cursor visibility to false or setting textPassword or numberPassword as the input type for the fields which improves the situation but doesn't really solve it in all cases.

lfeng0822/AnimatedEditText