Android Splash Screen

Diego de Abreu — Thu, 26 May 2022 22:14:00 +0000

Hello folks!
This is my first post, so I'll start with a beginner article about Android Development.

Thinking about any Android application we use nowadays, the first thing we stare at is the Splash Screen. Since the beginning of my journey into Android development, I have always had difficulty finding the correct way to develop it. The "problem" ended at the end of last year when it came out in an official way provided by the Android Developer's team.

Note: In this article, I'll show only the Kotlin language because Android development has been "Android's Kotlin-first" approach since 2019, but it's possible to use Java as well.

Let's start our project!

Project

To create the project you'll just need to follow the steps below:

Create New Project > Empty Compose Activity
Project configuration (name, package, etc.)

After this part you'll be ready to implement the Splash Screen into your project.

Settings

Now we need to set up some configurations in our project.

Build.gradle

Your compileSdk needs to be at least 31 and you need to add the Splash Screen dependency.

android {
   compileSdkVersion 32
   //Other configuration
}
dependencies {
   //Other dependencies
   implementation 'androidx.core:core-splashscreen:1.0.0-rc01'
}

Theme

It's needed to create a new theme, and for that, you can follow the example below:
The parent of your theme needs to be Theme.SplashScreen, which is the theme from the Android system. Also, you need to set the theme of your following activity on the postSplashScreenTheme attribute.

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

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

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

Note 1: If you want to add a background color for your icon, you can use the following theme Theme.SplashScreen.IconBackground and use the attribute windowSplashScreenIconBackground.

Note 2: The attribute windowSplashScreenAnimationDuration is only used with animations. For images, it's not necessary.

Manifest

Now you need to add this new theme to your application or activity. I prefer to add to the activity, but it's a personal choice.

<application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SplashScreen"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.App.SplashScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

Activity

In your Activity you need to call the method installSplashScreen() after super.onCreate(). The method installSplashScreen returns the Splash Screen object, so you can customize the behavior with these two methods: setKeepOnScreenCondition and setOnExitAnimationListener. You can use these methods together or independently, depending on your project's need.

setKeepOnScreenCondition

Like the name already says, it'll keep the Splash Screen until something happens. In my case, I have a viewModel handling how long it will take to disappear.

class MainActivity : ComponentActivity() {

    private val mainViewModel: MainViewModel by viewModels()

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

        installSplashScreen().apply {
            setKeepOnScreenCondition {
                mainViewModel.isLoading.value
            }
        }

        setContent {
            SplashScreenTheme {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Hello World!")
                }
            }
        }
    }
}

setOnExitAnimationListener

In this case, as soon as your Splash Screen finishes, you can execute anything. E.g., Load data, validate cache, etc.

class MainActivity : ComponentActivity() {

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

        installSplashScreen().apply {
            setOnExitAnimationListener{
                //Do something after the Splash Screen
                it.remove()
            }
        }

        setContent {
            SplashScreenTheme {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Hello World!")
                }
            }
        }
    }
}

And that's all you need to create a Splash Screen following the official Android Developers' site approach.

Git repository

Github

References

Android Developers
Youtube

DEV Community: Diego de Abreu