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

How to implement an awesome fullscreen video background on Android ?

Hey folks !

I'll describe here how I managed to get this awesome fullscreen video background for my next Android Game Project : WWII.

The screenshot is in a quite low quality I am afraid !

So, first in the layout, let's add a simple VideoView into a RelativeLayout :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black" >

    <VideoView
        android:id="@+id/backgroundVideo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

[...]

</RelativeLayout>

In order to stretch the video to make it fullscreen, the dirty hack resides in the four "layout_align..." values.

Ok now, let's have a look at the code :

[...]

// setup background video
mBackgroundVideoView = (VideoView) findViewById(R.id.backgroundVideo);
Uri videoUri = Uri.parse("android.resource://" + getPackageName() + "/"
    + R.raw.video_bg_home);
mBackgroundVideoView.setVideoURI(videoUri);

[...]

Now let's start and pause the video according to the Activity's lifecycle :

private int mVideoStopPosition = 0;


[...]

@Override
protected void onStart() {
 super.onStart();
 mBackgroundVideoView.seekTo(mVideoStopPosition);
 mBackgroundVideoView.start();
}

@Override
protected void onPause() {
 super.onPause();
 // store the stop position to restart the video at the correct position
 mVideoStopPosition = mBackgroundVideoView.getCurrentPosition();
 mBackgroundVideoView.pause();
 if (mAboutDialog != null) {
  mAboutDialog.dismiss();
 }
}

If you want to disable the sound of the video and make it repeat when it ends, here is how I did it :

[...]
mBackgroundVideoView.setOnPreparedListener(mPreparedListener);

[...]
// remove background video sound - enable video looping
MediaPlayer.OnPreparedListener mPreparedListener = new MediaPlayer.OnPreparedListener() {
 @Override
 public void onPrepared(MediaPlayer m) {
   try {
    if (m.isPlaying()) {
     m.stop();
     m.release();
     m = new MediaPlayer();
    }
    // disable sound
    m.setVolume(0f, 0f);
    // repeat video
    m.setLooping(true);
    m.start();
   } catch (Exception e) {
    e.printStackTrace();
   }
 }
};

That's it for now ! Watch out this blog for further cool tips through WWII advancement.
Tchuss !