Eyecandying Android app’s splash screen with animations

  • Splash screen is displayed immediately after app start. There’s no blank screen between clicking the app icon and showing the actual content
  • Time before animation starts is the time that the operating system needs to show first app’s screen with the actual content
  • Splash screen has a very simple and quick animation to show first screen of the app with the actual content.
  • Have a properly implemented splash screen (read what “proper” means below)
  • Open main app activity as soon as possible without activity transition
  • Have a special overlay view placed in the main activity that is perfectly aligned with splash screen’s image. This overlay view shows the actual animation. The animation can be done using Android’s animation framework but I preferred a lower level animation so there was more control over the animation.

1. Build a proper static splash screen

Building a proper splash screen is easy. “Proper” in this case means:

  • being able to be shown immediately after user clicks the app icon
  • not doing any heavy processing: no database queries or network requests.

2. Seamlessly open MainActivity

In this section by SplashScreenActivity and MainActivity I mean Android activities for the static splash screen and the first screen with actual app content.

  • There’s an overlay view placed on top of everything in MainActivity. This view draws logo, background and animates them when time comes. It’s the key part of the seamless transition
  • Disable animated transition between SplashScreenActivity and MainActivity so it’s visually impossible to see when next activity is displayed:
// SplashScreenActivity.kt
startActivity(Intent(this, MainActivity::class.java))
overridePendingTransition(0, 0)
finish()
  • Shared element transition is not really suitable and hardly customizable
  • Scaling vector drawable with scale() is not working well either due to bounds issues when animation can’t go outside bounds.

Notes

  1. I like building apps with edge to edge design so animation is going to infinity and beyond and nothing can stop it (status and navigation bars in particular).
  2. Complete code example is available on Github. Key files:
  • SplashScreenActivity - very simple splash screen with a background and a logo. Simply starts main app activity from onCreate without inflating a layout
  • MainActivity - activity for showing app content, takes part in seamless transition from splash to content by hosting an overlay view
  • SplashView - an overlay view used for seamless transition between splash screen and main activity and for animating the splash screen.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store