dev-resources.site

for different kinds of informations.

Build a Modern Android Splash Screen

Published at

12/29/2024

Step 1

Let us start by adding the splash screen dependency.

implementation 'androidx.core:core-splashscreen:1.0.1'

Step 2

The next steps would be to create a splash screen icon and an optional brand image.

We will discuss later on how to create the splash screen icon and make it appear center on the screen—in the Extras section at the bottom of the screen.

Step 3

Once we have the image asset ready, we can apply the same using the splash screen theme.

    <style name="Theme.Splash.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">
            @color/splash_screen_background
        </item>
        <item name="windowSplashScreenAnimatedIcon">
            @drawable/ic_splash_icon
        </item>
        <item name="windowSplashScreenAnimationDuration">
            @integer/splash_screen_animation_duration
        </item>
        <item name="postSplashScreenTheme">
            @style/Theme.App.NoActionBar
        </item>
        <!--Android 12 specific styles (put this in values-v31) -->
        <item name="android:windowSplashScreenBrandingImage">
            @drawable/ic_brand_icon
        </item>
        <!--Android 12 specific styles (put this in values-v31) -->
    </style>

Anatomy of splash screen

Let’s take a look at the style attributes.

windowSplashScreenBackground — As you have probably guessed, it’s the background colour that will occupy the whole screen.

windowSplashScreenAnimatedIcon — This can either be a normal vector icon or an animated vector icon. Note: An animated vector icon will only show animation on Android 12+ devices, older API devices will simply show the static icon without any animation.

windowSplashScreenAnimationDuration — The duration of the animated icon. The recommended duration is 1,000 milliseconds.

postSplashScreenTheme — This theme is used once the app is loaded. It’s required because we will set the launcher activity theme as Theme.SplashScreen in the app manifest — which works great for showing a splash screen, an animated logo, and a brand icon. However, once the app is loaded, we would get an exception if we didn’t use Theme.AppCompat or Theme.MaterialComponents . Hence, this attribute comes to the rescue.

windowSplashScreenBrandingImage — Brand image to show bottom of the screen (only available from Android 12).

Step 4

Now set the launcher activity theme as Theme.Splash.Starting

    <activity
        android:name=".MainActivity"
        android:exported="true"
        android:label="@string/app_name"
        android:theme="@style/Theme.Splash.Starting">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

Step 5

And finally, inside MainActivity onCreate method add installSplashScreen()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        installSplashScreen()

        setContent {
            AndroidSplashScreenTheme {
                 Greeting("Android splash screen demo")
            }
        }
    }

Other features

Now that we have completed setting up our new Android splash screen, we can take a look at the other features that come with it.

Control splash screen visibility.

The splash screen API provides support to keep the splash screen visible as long as we want it.

Let’s say we need to fetch some resources that are crucial to rendering our screen, and without those resources, there is no use showing the UI. In this case, we can defer showing our application’s UI until our resources are fetched and ready.

    installSplashScreen().setKeepVisibleCondition {
        mainViewModel.isScreenLoading.value
    }

setKeepVisibleCondition

This method takes a callback which returns a boolean to tell whether to keep the screen on or not. True value indicates the splash screen should remain as is, and False would indicate dismissal of the splash screen.

SplashScreen API will regularly call this callback to check whether to keep the splash screen or dismiss it.

Animate screen content when the splash screen is dismissing

    installSplashScreen()
    .setOnExitAnimationListener { splashScreenViewProvider ->
        // Animation code
    }

Extras

Let us discuss how to create the splash screen image.

As we can see in the splash screen icon, section 1 is masked by section 3

If we apply our icon as is, it will zoom out and stretch out.

So how do we fix this? We need to create an icon that caters to this masked padding.

Let’s say we have a splash screen icon of 54x54, then we would be creating a wrapper layer with a size of 108x108 (double the actual icon) and placing our icon content in the centre of it.

Example

    <?xml version="1.0" encoding="utf-8"?>
    <vector
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:name="vector"
        android:width="108dp"
        android:height="108dp"
        android:viewportWidth="108"
        android:viewportHeight="108">
        <!--Optional background spanning full 108x108 dp-->
        <path
            android:name="background"
            android:pathData="M 0 0 L 108 0 L 108 108 L 0 108 Z"
            android:fillColor="@color/splash_icon_background"
            android:strokeWidth="1"/>
       <!--Splash screen icon placed in the centre of the screen-->
        <group
            android:name="group_icon"
            android:pivotX="54"
            android:pivotY="54">
            <path
                android:name="path_pi"
                android:pathData="M 30 44.591 L......."
                android:fillColor="@color/splash_icon_color"
                android:strokeWidth="1"/>
        </group>
    </vector>

That’s it, folks. Thanks for reading.

Source Code

https://github.com/sridhar-sp/android-splash-screen-demo

androiddev Article's

30 articles in total