Android Splash Screen
Tags: android, beginners, kotlin
Published: 2022-05-26 22:14:00

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rto6d7l0uzfmz7lwkwvx.png)
* Project configuration (name, package, etc.)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l3gf5xnpx9q8cxphfk0.png)

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'
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wad5vn09m0u5mah5cq21.png)

### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i44vozu7v0vg0qb792d.png)
 
### 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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8mxad4y2xdrueki9se7.png)

### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25gnr7c2qblcgmu7mey9.gif)

# Git repository
[Github](https://github.com/diegodeabreu/splash-screen)

# References

[Android Developers](https://developer.android.com/guide/topics/ui/splash-screen/migrate)
[Youtube](https://youtu.be/Loo4i5IrZ4Y)