Set Up App Icon and Splash Screen for iOS & Android with Compose Multiplatform

 

Kotlin Multiplatform (KMP) and Compose Multiplatform have paved the way for building apps across multiple platforms like Android, iOS, web, and desktop with shared codebases. However, elements like app icons and splash screens need platform-specific handling. In this article, we’ll walk through the steps to set up these features in Android and iOS while using Kotlin Multiplatform for shared business logic and Compose Multiplatform for UI.

 

Why App Icons and Splash Screens Need Platform-Specific Setup

Even though KMP and Compose Multiplatform help unify business logic and some UI elements across platforms, setting up a splash screen or app icon requires platform-specific configurations. These features are loaded before the shared code kicks in, so they depend on native code and project settings.

💡 Note: This setup doesn’t involve Kotlin Multiplatform code, as it runs before any shared code is initialized.

Graphic Assets 📲

For a clear starting point, let’s look at the primary graphic assets needed for both platforms:

1. App Icon: On the left 2nd one, we have a complete app icon with a logo and background color. This is used as a single-layer icon on iOS. Icons should ideally be created at a high resolution of 1024x1024 pixels.
2. Two-Layer App Icon (Android): On the right, we separate the logo from the background. Android requires app icons to consist of two layers — a foreground (logo) and a background color layer. This adds flexibility, as the app icon shape can adapt to different device preferences, such as circular or square icons. Those are 512x512 pixels. Export individual layers — the background as SVG and the logo itself as PNG or SVG if scalable assets are preferred. Android’s two-layer approach adds customization options, so ensure your assets align with these requirements.

Let’s dive into each platform’s process!

iOS Setup

Setting Up the App Icon

On iOS, app icons are managed within Xcode. When creating an iOS project within a KMP setup, the following steps should help you set up the icon:

1. Open iOS Project: Open /iosApp/iosApp.xcodeproj in Xcode.

2. Add Icon Assets: In Xcode, go to the Assets.xcassets folder. Here, you’ll find an AppIcon entry.

3. Drag and Drop Icons: Prepare your app icon image in 1024x1024 pixel size and drag them into the appropriate slots under AppIcon. Xcode will display placeholders for each size (if required for different screen resolutions).

That's it for App Icon.

Setting Up the Splash Screen

iOS uses a “Launch Screen” for splash functionality, which loads before the main app content. Create  

1. LaunchScreen.storyboard: In Xcode, create a new LaunchScreen.storyboard file. This storyboard defines the layout of your splash screen.

2. Design the Launch Screen: Customize the layout in the storyboard editor by adding images, labels, or background colors.

2.1 Add new icon in assets and drag the icon in 1x, 2x, 3x.

2.2 You can use my below storyboard file or Feel free to watch some basic iOS storyboard video and create own splash screen.

Storyboard Launch Screen file gist link : https://gist.github.com/wh173d3v11/19be67692ebacf35f8c3fd40ced2ae2b

3. Associate Launch Screen with App: Go to your app’s General settings in Xcode. Under App Icons and Launch Images, select your Launch Screen.storyboard file.

 

4. Configure a launch screen in an information property list.

4.1 In the settings for your target, select the Info tab.
4.2 In the Custom iOS Target Properties section, Click the Add button (+) and set key as "Launch screen interface file base name".

4.3 Set the value as "Launch Screen"

That's it for iOS! Run the iOS and EnjoY!       

Android Setup

Setting Up the App Icon

1. In Android studio project, create new Image asset.

2. Select Icon Type as "Launcher Icons" and select downloaded forground / background svg or png icons.

     

3. Check the preview and adjust scaling if needed. Click "Next" and "Finish".

That's it for app icon.!

Setting Up the Splash Screen

For Android, using the Jetpack SplashScreen library is the recommended approach. This ensures compatibility across Android versions and simplifies the setup.

1. Add Jetpack SplashScreen Library: Open build.gradle.kts for the composeApp module and add the SplashScreen dependency.

2. Create Splash Theme: Create a themes.xml value and define a splash theme in values/themes.xml. Here’s an example:

Add this lines in the themes.xml file.

Update AndroidManifest.xml: Apply the splash theme to the main activity in composeApp/src/androidMain/AndroidManifest.xml

Install Splash Screen in MainActivity: In MainActivity, add the installSplashScreen() call to handle the splash screen:

For more detailed instructions, refer to the Android core-splashscreen documentation.

That's all for Android. 

Wrapping Up

By setting up the splash screen and app icon natively on each platform, we’re ensuring the app’s first impression matches user expectations. While KMP and Compose Multiplatform are powerful tools for cross-platform development, some aspects, like splash screens and app icons, are better handled with platform-specific solutions. With this guide, you’re set to create a polished, consistent launch experience on both Android and iOS!

Stay Connected:🚀

Stay connected on LinkedIn — for the latest updates. Let’s continue shaping the future of tech together. Happy coding!