Pimp-up your splash screen

In the past, splash screen in Android was a dirty word, It was usually a bad sign to an app that was converted from iPhone. But lately- Google added launch screens to the design guidelines, and maybe they changed the name, but the concept is still the same.

Splash screen- Good or Bad debate aside, in Ripples I decided to go with the Google guidelines and do my own splash screen, but no just a simple one with the app logo, I wanted to do something different.

A couple of words about Ripples to the ones who don’t know- It’s a very simple app that all about little circles that slowly reveals and getting bigger. So what I thought is revealing the Ripples logo in the splash screen with some ripples animations in some masking-like way:

The easiest way to do it is just taking this gif and put it in the splash screen, but I’m not gonna do it because:

1. It’ll make this blog post to a pretty short and pointless
2. It will add a lot of resources to the app and make it bigger with no reason
3. We won’t learn anything new

So how we gonna do it? With some basic and easy Android drawing methods!

First lets build the splash view with the image, It’s a simple view that just load the bitmap and give the view the same size as the bitmap, pay attention that we not displaying anything yet:

Now lets start drawing our graphic- We’ll draw some masking over the logo bitmap:

Please ignore the constants value all over the place, those are parameter that I’ve played with (things that you can’t do if you chose to implement it with gif!) while making the animation. The important things are how we creating a new path (that built from circles) and clipping the canvas to this path so this what will gonna be visible eventually. After setting to mask for the canvas we just need to draw the bitmap.

Now we just need to put the animation:

And that’s it:

Originally published at shem8.github.io on October 2, 2015.