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

  • 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

  • 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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Baselines For Multiple Build Variants (For Android Lint)

Android RecyclerView — Creating a File Template

How i made this application?

Create a favorite selection in ListView using Flutter

Use Bottom Navigation in kotlin with Android Studio.

Write Your First UI Test in Android Using Espresso

Easy Map Maker — Create your own interactive map.

Setting up Circle CI for Android (Github repo)

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
Alexander

Alexander

More from Medium

AR-Core: Beginner guide

Mobile App UX (developer perspective)

Dynamically Update/Refresh/Reload ViewPager2 Fragments

Bottom Navigation in Android