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: How to Integrate the SplashScreen API
To use a splash screen, you've added android:theme="@style/Theme.AnimatedSplash.MySplash" to your MainActivity
<!-- 📱 Main Activity for the application -->
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.AnimatedSplash.MySplash">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
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.
Splash screen dimensions
- The splash screen icon uses the same specifications as adaptive icons, as follows:
- Branded image: this must be 200×80 dp.
- App icon with an icon background: this must be 240×240 dp and fit within a circle 160 dp in diameter.
- App icon without an icon background: this must be 288×288 dp and fit within a circle 192 dp in diameter.
- For example, if the full size of an image is 300×300 dp, the icon needs to fit within a circle with a diameter of 200 dp. Everything outside the circle turns invisible (masked).
🚀 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
Comments
Post a Comment