dev-resources.site
for different kinds of informations.
Getting started with splash screen in Jetpack Compose
Introduction
As Jetpack Compose continues to gain popularity in the Android ecosystem, it is important to deliver a smooth user experience and transition in our mobile app. Google has released an API to make splash screen seamless and this post will guide you on how to get started.
Prerequisite
- Android Studio (as of writing this code, hedgehog or later is perfect)
- Project setup with Jetpack Compose
Step-by-step guide
Step 1: Setting up dependency
Step 2: Adding app icon
Step 3: Setting up the splashscreen theme
Step 4: Modify the AndroidManifest.xml
Step 5: Integrating the splash screen into the MainActivity.kt
Step 1: Setting up dependency
In the app build.gradle.kts under the dependencies block, add implementation("androidx.core:core-splashscreen:1.0.1") as seen below
dependencies {
implementation("androidx.core:core-splashscreen:1.0.1")
}
Step 2: Adding app icon
If you do not have one already created, go to Icon Kitchen create one and download. The downloaded file will come with everything you need just navigate to the folder named android copy everything and paste it into the res folder in your Android project.
Step 3: Setting up the splashscreen theme
In your styles.xml file, create a theme with a parent of Theme.SplashScreen. Set the value of postSplashScreenTheme to the theme that the Activity must use and the value of windowSplashScreenAnimatedIcon to a drawable or animated drawable. The other attributes are optional
<resources>
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
<!-- Set the splash screen background, animated icon, and animation
duration. -->
<item name="windowSplashScreenBackground">@color/purple_500</item>
<!-- Use windowSplashScreenAnimatedIcon to add a drawable or an animated
drawable. One of these is required. -->
<item name="windowSplashScreenAnimatedIcon">@mipmap/app_icon</item>
<!-- Required for animated icons. -->
<item name="windowSplashScreenAnimationDuration">200</item>
<!-- Set the theme of the Activity that directly follows your splash
screen. This is required. -->
<item name="postSplashScreenTheme">@style/Theme.Kotlinarticles</item>
</style>
</resources>
Step 4: Modify the Android Manifest
Add android:theme="@style/Theme.App.Starting" to the application and activity tag respectively
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<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/app_icon"
android:supportsRtl="true"
android:theme="@style/Theme.App.Starting"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.App.Starting">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Step 5: Integrating the splash screen into the MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
val splashscreen = installSplashScreen()
var keepSplashScreen = true
super.onCreate(savedInstanceState)
splashscreen.setKeepOnScreenCondition { keepSplashScreen }
lifecycleScope.launch {
delay(5000)
keepSplashScreen = false
}
enableEdgeToEdge()
setContent {
KotlinarticlesTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(
name = "Android",
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
}
Best Practices
- Keep it simple: Don't overcomplicate your splash screen. A clean, branded design works best.
- Minimize duration: The splash screen should only be visible for as long as necessary to load your app's initial data.
- Provide visual feedback: If your app needs more time to load, consider adding a progress indicator.
- Test on various devices: Ensure your splash screen looks good on different screen sizes and orientations.
Conclusion
Implementing a splash screen in Jetpack Compose is a straightforward process that can significantly enhance your app's user experience. By following these steps and best practices, you can create a professional and smooth introduction to your application.
Remember, while splash screens are useful, they should be used judiciously. The goal is to provide a seamless transition into your app's main content, not to delay the user's access to it.
Happy coding!
Check out the repo
Notable links
Splashscreen API
Icon Kitchen
Featured ones: