Splash Screen API with Compose

Hello, amazing person of the internet! Hope you're doing well.

The first impressions are crucial. Creating a captivating user experience from the moment an app is launched has become a top priority. Users expect seamless, engaging interactions right from the start, and this is where the Splash Screen API, combined with the cutting-edge Jetpack Compose, takes center stage.

 

Implementation

First things first, we need to implement the splash screen API in our dependencies, within the gradle(Module:app):

	dependencies {
	[..]
	// Splash API
	implementation 'androidx.core:core-splashscreen:1.0.1'
	}

view raw build.gradle hosted with ❤ by GitHub

 

Theme

Now, let's create the style for our splash screen. To do that, go to your values and create the splash resource:

	<?xml version="1.0" encoding="utf-8"?>
	<resources>
	<style name="Theme.Shop.MySplash" parent="Theme.SplashScreen">
	</style>
	</resources>

view raw splash.xml hosted with ❤ by GitHub

You can name the style's name as you prefer, but the parent's name must be "Theme.SplashScreen".

	<resources>
	<style name="Theme.SplashScreen.MySplash" parent="Theme.SplashScreen">
	<item name="windowSplashScreenBackground">#FFD0BCFF</item>
	<item name="windowSplashScreenAnimatedIcon">@drawable/ic_launcher_foreground</item>
	<item name="postSplashScreenTheme">@style/Theme.SplashScreen</item>
	</style>
	</resources>

view raw splash.xml hosted with ❤ by GitHub

• windowSplashScreenBackground = background screen.
• windowSplashScreenAnimatedIcon = the splash screen icon.
• postSplashScreenTheme = the theme aftesplash screen.

Within your manifest, navigate to the activity tag and invoke the custom theme:

	<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	[...]
	android:theme="@style/Theme.SplashScreen.MySplash">
	[...]
	</manifest>

view raw AndroidManifest.xml hosted with ❤ by GitHub

 

Calling

Head to our Main Activity to display our splash screen. Simply call the installSplashScreen() function:

	class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	installSplashScreen()
	setContent {
	[...]
	}
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

That's it! You now have a splash screen.

 

Blank Screen

If you encounter an issue with a blank screen while using this API, don't worry. After calling the splash screen and proceeding to the next screen, you might experience a blank screen. To resolve this, simply call the setKeepOnScreenCondition{} function:

	installSplashScreen().setKeepOnScreenCondition{
	someCondition
	}

view raw MainActivity.kt hosted with ❤ by GitHub

 

Conclusion

Gone are the days of static and mundane splash screens that merely act as loading indicators. With Jetpack Compose, a revolutionary toolkit for building native Android UIs, and the introduction of the Splash Screen API, developers now have the tools to transform their app's launch sequence into an immersive and visually appealing experience.

All the code and exemple it is on this repository.

Happy coding ❤

---

Please let me know what you think in the comments…

Connect with me 👇

Linkedin

GitHub

Instagram

Medium

Comments

[Ian Bonaparte]

A quick, fun splash screen can do wonders to improving a user's experience on your app. If done correctly, they add a layer of polish that make your app feel "next level" to users.

Great tutorial!