How to Create an Android Splash Screen API Like a Pro

Learn how to expertly integrate the Android SplashScreen API into your app, ensuring a smooth and professional launch experience.

This guide covers everything from setting up the splash screen to configuring your theme and implementing the main activity, complete with step-by-step instructions and best practices.

Step-by-Step Integration Guide

Add the dependency in your build.gradle file:

AndroidX Core Library: The primary requirement is to include the AndroidX Core library, which contains the SplashScreen API.

  
dependencies {
    // 📱 Include the AndroidX Core library with SplashScreen API support
    implementation "androidx.core:core-splashscreen:1.0.0"
    
    // 🛠️ Add other dependencies as needed for your project
    // implementation "androidx.appcompat:appcompat:1.3.1"
    // implementation "com.google.android.material:material:1.4.0"
}

Step 1: 🎨Setting Up Your Splash Screen Theme

🎨 Define a custom theme in your res/values/styles.xml.
🎨 Set the background color to match your app’s branding.
🎨 Specify the animated icon to be displayed during the splash screen.
⏱️ Set the animation duration to control how long the splash screen stays visible.
🎨 Post-splash screen theme: Define the theme your app will use after the splash screen is dismissed.

res/values/splash.xml (light mode)

res/values-night/splash.xml (dark mode)

  
    <resources>
        <style name="Theme.AnimatedSplash.MySplash" parent="Theme.SplashScreen">
            <item name="windowSplashScreenBackground">@color/white</item>
            <item name="windowSplashScreenAnimatedIcon">@drawable/logo</item>
            <item name="windowSplashScreenIconBackgroundColor">@color/white</item>
            <item name="windowSplashScreenAnimationDuration">1000</item>
            <item name="postSplashScreenTheme">@style/Theme.CartUIX</item>
        </style>
    </resources>

Step 2: 💻 Implementing the Main Activity

🔧 Install the splash screen using installSplashScreen() in onCreate().
📱 Enable edge-to-edge display for a modern, immersive UI.
🛠️ Set the content view to your main activity layout.
🎯 Handle window insets to properly adjust UI components based on system bars.

java/com/shopping/cart/MainActivity.kt

  
package com.shopping.cart

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // 🚀 Install the splash screen and set the condition to keep it on screen
        installSplashScreen().setKeepOnScreenCondition { false }
        
        super.onCreate(savedInstanceState)
        
        // 🌐 Enable edge-to-edge display for a modern UI look
        enableEdgeToEdge()
        
        // 🖼️ Set the content view to the main activity layout
        setContentView(R.layout.activity_main)

        // 🖱️ Apply window insets to adjust for system bars (like status and navigation bars)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    }
}

Step 3: 🖼️ Designing the Logo

🖌️ Create a vector drawable for your logo to ensure scalability and performance.
📏 Ensure the icon size is set to 192dp for optimal display on the splash screen.
📐 Follow guidelines for adaptive icons if you're using a background with the icon.

res/drawable/logo.xml

  
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="276.5dp"
        android:height="306dp"
        android:viewportWidth="276.5"
        android:viewportHeight="306">
      <path
          android:pathData="M187.83,105.76l-8.25,0c-1.32,-17.52 -15.37,-31.42 -32.43,-31.42c-17.13,0 -31.17,13.9 -32.43,31.42L107.42,105.76c-8.63,0 -15.68,7.31 -15.68,16.4l0,23.45c0,0.46 -0.38,0.86 -0.82,0.86l0,0c-4.35,0 -8.06,3.56 -8.12,8.04c-0.06,4.61 3.46,8.37 7.87,8.37l16.44,0c2.52,0 4.6,2.17 4.6,4.81l0,0c0,2.64 -2.08,4.81 -4.6,4.81L79.33,172.49c-4.35,0 -8.06,3.56 -8.12,8.04c-0.06,4.61 3.46,8.37 7.87,8.37l28.02,0c2.52,0 4.6,2.17 4.6,4.81l0,0.59c0,2.64 -2.08,4.81 -4.6,4.81L97.4,199.1c-6.23,0 -11.52,5.14 -11.65,11.73c-0.06,3.36 1.26,6.32 3.34,8.56c2.08,2.17 4.91,3.49 8,3.49l61.65,0c0.57,0 1.2,-0.07 1.76,-0.13l27.33,0c8.63,0 15.62,-7.31 15.62,-16.34L203.45,122.09C203.51,113.07 196.52,105.76 187.83,105.76zM130.09,105.76c1.2,-8.7 8.38,-15.35 17.07,-15.35c8.63,0 15.81,6.72 17,15.35L130.09,105.76zM172.66,203.45c0,1.58 -1.2,2.83 -2.71,2.83l-41.44,0c-3.53,0 -6.36,-2.96 -6.36,-6.65l0,-4.15l29.66,-42.16l-25.19,0c-1.51,0 -2.71,-1.25 -2.71,-2.83l0,-8.3c0,-1.58 1.2,-2.83 2.71,-2.83l37.59,0c4.09,0 7.43,3.49 7.43,7.77l0,4.15l-28.84,41.04L169.95,192.32c1.51,0 2.71,1.25 2.71,2.83L172.66,203.45z">
        <aapt:attr name="android:fillColor">
          <gradient 
              android:startX="72.4"
              android:startY="148.58"
              android:endX="204.66"
              android:endY="148.58"
              android:type="linear">
            <item android:offset="0" android:color="#FFB621FE"/>
            <item android:offset="0.16" android:color="#FFB325FE"/>
            <item android:offset="0.31" android:color="#FFA930FE"/>
            <item android:offset="0.46" android:color="#FF9943FD"/>
            <item android:offset="0.6" android:color="#FF825DFC"/>
            <item android:offset="0.75" android:color="#FF657FFB"/>
            <item android:offset="0.88" android:color="#FF42A9FA"/>
            <item android:offset="1" android:color="#FF1FD1F9"/>
          </gradient>
        </aapt:attr>
      </path>
      <path
          android:pathData="M127.25,123.94m-4.72,0a4.94,4.72 90,1 1,9.45 0a4.94,4.72 90,1 1,-9.45 0"
          android:fillColor="#383838"/>
      <path
          android:pathData="M170.58,123.94m-4.72,0a4.94,4.72 90,1 1,9.45 0a4.94,4.72 90,1 1,-9.45 0"
          android:fillColor="#383838"/>
    </vector>

Step 4: 📚 Long Description: How to Integrate the SplashScreen API

The Android SplashScreen API, introduced in Android 12, offers a streamlined way to enhance the launch experience of your app. By leveraging this API, you can display a branded splash screen with animations, providing a smooth transition into your app.

🚀 Why Use a Splash Screen in Your App:

📱 Brand Identity: Reinforces brand recognition immediately.
⏳ Visual Feedback: Shows that the app is loading, improving perceived speed.
🌟 First Impressions: Creates a polished, professional first impression.
⚙️ Initialization: Utilizes loading time effectively, keeping users engaged.
🔄 Seamless Transition: Smoothly transitions users into the main app.

Usage:

Launch / Splash screens can be displayed upon an app’s launch from the home screen when an app loads, instead of displaying a blank screen.

Displaying a launch screen can decrease the sense of a long load time, and has the potential to add delight to the user experience.

Launch screens shouldn’t be displayed if an app is running.

Ref:

https://developer.android.com/develop/ui/views/launch/splash-screen

Search This Blog

Bolt UiX

How to Create an Android Splash Screen API Like a Pro

Comments

Post a Comment