Mastering Splash Screens in Android: A Complete Guide to Using Splash API

Android 12 with Splash API

Introduction

The splash screen is the first impression your app makes on users. With the introduction of the Splash API in Android 12, creating a visually appealing splash screen has become more straightforward and standardised. Android 12 leverages the app icon directly for the splash screen, ensuring a consistent look and feel. This article will guide you through the process of implementing the Splash API, addressing potential issues on older Android versions, and ensuring compatibility across various devices.

Splash Screen Dimensions

The Splash API requires the splash screen icon to adhere to specific dimensions, similar to adaptive icons:

• Brand image: 160×160 dp
• App icon with an icon background: 240×240 dp (fits within a circle 160 dp in diameter)
• App icon without an icon background: 288×288 dp (fits within a circle 192 dp in diameter)

Android 11 or lower

Handling Splash Screens on Lower Android Versions

On devices running Android versions lower than 12, the splash screen might appear as a blank screen like above. To address this, follow these steps:

1. Add Dependency:

implementation("androidx.core:core-splashscreen:1.0.1")

2. Update Theme Style:
Add the following to your theme style and update the theme name in the. manifest file.

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
   <!-- Set the splash screen background, animated icon, and animation duration. -->
   <item name="windowSplashScreenBackground">@color/your_prefer_color</item>

   <!-- Use windowSplashScreenAnimatedIcon to add a drawable or an animated drawable. One of these is required. -->
   <item name="windowSplashScreenAnimatedIcon">@drawable/your_prefer_drawable</item>
   <!-- Required for animated icons. -->
   <item name="windowSplashScreenAnimationDuration">200</item>

   <!-- Set the theme of the Activity that directly follows your splash screen. This is required. -->
   <item name="postSplashScreenTheme">@style/Theme.App</item>
</style>

3. Call `installSplashScreen()` in MainActivity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        installSplashScreen()
        setContentView(R.layout.activity_main)
    }
}

Ensure your drawable dimensions align with the guidelines mentioned above to avoid cropping issues. For more details, refer to the Android Developer documentation.

Special Case: Larger Icons on Lower Versions

If there’s a requirement to display larger icons on lower Android versions, although not recommended, you can achieve this by creating separate drawable and values folders targeting different API levels.

1. Create Folders:

• drawable-v31: Contains android_splash.xml
• drawable: Contains android_splash.xml
• values-v31: Contains theme.xml
• values: Contains theme.xml

2. Drawable File (android_splash.xml):

Selected Drawable

3. Theme for API 31+ (values-v31/theme.xml):

<style name="Theme.Splash" parent="android:Theme.Material.Light.NoActionBar" />

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/black</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/android_splash</item>
    <item name="windowSplashScreenAnimationDuration">1000</item>
    <item name="postSplashScreenTheme">@style/Theme.Splash</item>
</style>

4. Theme for Lower Versions (values/theme.xml):

<style name="Theme.App.Starting" parent="android:Theme.Material.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
    <item name="android:statusBarColor">@color/black</item>
</style>

Android 11 or lower

Centering the Icon in Lower Versions

One more issue you might face in lower versions is the splash icon expanding to full screen if applied directly in style. To fix this, create a drawable that wraps your preferred drawable, centering the icon with the proper size:

<layer-list xmlns:android="<http://schemas.android.com/apk/res/android>">
    <item android:drawable="@color/black" />
    <item
        android:drawable="@drawable/android_splash"
        android:gravity="center" />
</layer-list>

Conclusion

The Splash API simplifies the implementation of splash screens in Android, ensuring a consistent and professional look across different devices. By following the steps outlined above, you can address compatibility issues on lower Android versions and create a seamless user experience from the moment your app launches.

By integrating the appropriate dimensions for your splash screen icons and following best practices, you ensure that your app looks polished and performs well on all devices. Additionally, leveraging the layered drawable technique helps center your splash screen icons properly, avoiding any issues with icons expanding to full screen on older Android versions.

Here’s an example of a properly implemented splash screen on both Android 12 and lower versions:

Splash Screen on Android 12:

Android 12 or higher version expected result

Splash Screen on Lower Versions:

Android 11 or lower expected result

Stay tuned for more insights and advanced concepts on using the Splash API in upcoming articles. You can also explore the complete implementation by visiting the GitHub repository. Thank you for reading!