From Punched Cards to Prompts
AndroidIntroduction When computer programming was young, code was punched into cards. That is, holes were punched into a piece of cardboard in a format...
The impending release of Android 12 brings with it a group of new APIs for Android developers to learn and play with. Being a good citizen in the Android developer community means always giving the users of our applications a smooth transition when upgrading our targetSdk
. In Android 12, there are quite a few changes affecting our users and in this blog post we will focus on the upcoming App Splash Screen changes.
Splash screens have quite a history with Android, and the Ranch. In a previous post here we detailed the “right way” to add a splash screen to your Android app by overriding android:windowBackground
. Now, splash screen support has been grafted into the Android platform (and backported with an androidx library). Starting with Android 12, App Splash Screens are enabled by default, and if you do not take the time to update your application when targeting Android 12, it may result in an undesirable effect.
To illustrate these changes, I’ve updated an example app from my previous post on DiffUtil. I’ve modified my build.gradle
to change my targetSdk
and compileSdk
to 31
and here are the results on my device running the Android 12 beta:
Not bad. By default on Android 12, the Splash Screen API uses the windowBackground
of your theme if it’s a single color and the launcher icon. But what about the majority of our users, on devices below Android 12?
The same build on a pre-Android 12 device:
Well, that was anticlimactic… 😒
Like most things in the Android world, we can access backports of newer APIs via an androidx
dependency. To start, add the following line to your build.gradle
:
implementation "androidx.core:core-splashscreen:1.0.0-alpha02"
Sync your project with gradle files, then we’ll make an adjustment to our applications theme.
Create a new style, with it’s parent set to Theme.SplashScreen
, along with a few other attributes you can customize:
<style name="Theme.Splash" parent="Theme.SplashScreen"> <item name="postSplashScreenTheme">@style/Theme.App</item> <item name="windowSplashScreenBackground">#FF27140F</item> <item name="windowSplashScreenAnimatedIcon">@drawable/app_icon</item> </style>
postSplashScreenTheme
is a reference to your applications “normal” theme that will be set after your splash screen has finished showing.windowSplashScreenBackground
sets the background color of your splash screen.windowSplashScreenAnimatedIcon
references the icon you wish to show in the center of your splash screen. You may have noticed the “Animated” part of windowSplashScreenAnimatedIcon
😉 we’ll cover that a bit later.Next, modify your application theme in your AndroidManifest.xml
:
<application
--------
android:theme="@style/Theme.Splash"
-------
>
Finally, in your launch Activity
, before setContentView()
is called (order matters here) in your onCreate()
method, add the following method call:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
installSplashScreen() // <---- this one!!
setContentView(R.layout.activity_main)
}
That’s it! Let’s build and run our application on a pre-Android 12 device to see what has changed.
👌 nice
The androidx splash screen library also lets us customize the splash screen’s exit animation. Let’s add a quick fade exit animation:
installSplashScreen().setOnExitAnimationListener { splashScreenView ->
val alpha = ObjectAnimator.ofFloat(
splashScreenView.view,
View.ALPHA,
1f,
0f
)
alpha.duration = 500L
alpha.doOnEnd { splashScreenView.remove() }
alpha.start()
}
}
🎉 It’s always nice to bring new features to older versions of Android, as we know OS updates can take some time to propogate through our user base. But, this doesn’t mean we should not take advantage of new APIs available to us.
You may have read Google’s Splash Screen Guide and noticed a few more features available on Android 12. The Splash Screen platform API supports Animated Vector Drawables and even allows us to add a branding image to our splash screen.
Taking a look at the docs:
The app icon (1) should be a vector drawable, and it can be static or animated. Although animations can have an unlimited duration, we recommend that it not exceed 1,000 milliseconds. By default, the launcher icon is used.
Let’s take adavantage of this by animating a “ring” around our Planets application icon. I’ve converted the VectorDrawable
icon to an AnimatedVectorDrawable
and added this animation:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
----
[my vector icon]
---
</vector>
</aapt:attr>
<target android:name="ring">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="trimPathEnd"
android:startOffset="500"
android:duration="500"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
Let’s take a look…
Neat!
It’s nice to see Android have a standard for App Splash Screens built into the platform. Up until now, it was common practice to implement your own splash screen for your application. If you did implement a splash screen, it’s important to note any unintended side effects when upgrading your targetSdk
to Android 12. Applications using a separate Activity
for their splash screen without a properly configured theme may result in a user seeing 2 splash screens! 😳
Cheers to another Android release, and thanks for reading.
Happy coding!
P.S. 📣 Special thanks to Clint M. and Donovan L. for design help! 🙌
Introduction When computer programming was young, code was punched into cards. That is, holes were punched into a piece of cardboard in a format...
Jetpack Compose is a declarative framework for building native Android UI recommended by Google. To simplify and accelerate UI development, the framework turns the...
Big Nerd Ranch is chock-full of incredibly talented people. Today, we’re starting a series, Tell Our BNR Story, where folks within our industry share...