How to implement a cool falling letter effect on Android ?

Hey bros and sistas !

Here I'll describe how to create a super animation of letters falling one after the other, which can be used in a splashscreen for example ...

WWII Splashscreen

Let's start with the a simple horizontal LinearLayout.

[...]

<LinearLayout
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal" >
</LinearLayout>

[...]

The two animations we will use : the title's general bounce effect and the individual letters' animation.

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="50"
    android:fromYDelta="0%"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toYDelta="1%" />




<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fillAfter="true"
    android:fromYDelta="-100%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:startOffset="100"
    android:toYDelta="0%p" />

Then, in the UI setup, add one text view for each letter of the word displayed.

[...]

String appPublisher = getString(R.string.app_publisher);
for (int n = 0; n < appPublisher.length(); n++) {
    char c = appPublisher.charAt(n);
    TextView letterTV = new TextView(this);
    letterTV.setText("" + c);
    letterTV.setVisibility(View.GONE);
    mTitleLayout.addView(letterTV);
}

[...]

Now, initialize the animations !

[...]

mBounceAnimation = AnimationUtils.loadAnimation(this, R.anim.bounce_effect);

mLetterAnimation = AnimationUtils.loadAnimation(this, R.anim.falling_letter);
mLetterAnimation.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // start next letter animation and the general bounce effect
        startNextFallingLetterAnimation();
        mTitleLayout.startAnimation(mBounceAnimation);
    }
});

[...]

As you can see, when one letter animation is over, it runs the method "startNextFallingLetterAnimation". Let's implement this method now !

private int mCurrentAnimationPlaying = 0;

[...]

private void startNextFallingLetterAnimation() {
    if (mCurrentAnimationPlaying < mTitleLayout.getChildCount()) {
      // reset previous view's animation
      if (mCurrentAnimationPlaying > 0) {
        mTitleLayout.getChildAt(mCurrentAnimationPlaying - 1).setAnimation(null);
      }
      // play next animation
      View nextLetter = mTitleLayout.getChildAt(mCurrentAnimationPlaying);
      nextLetter.setVisibility(View.VISIBLE);
      nextLetter.startAnimation(mLetterAnimation);
      mCurrentAnimationPlaying++;
    }
}

Aaaaannnnnd that's it ! Each letter will fall one after the other and each time a bounce effect on the overall title view will be visible. And it really looks cool !

See you for a next article through WWII project's advancement !

Cheers