Skip to content

Custom Logo and Splash Screen

There are two ways to customize the application logo and splash screen in your app:

  • Automated Application Launcher and Splash Icon Generation (Recommended) This option uses the AppImages configuration to automatically generate the necessary image assets for both the app launcher and splash screen. This approach is efficient and simplifies the process of customization.

  • Manual Customization via App_Resources (Legacy Method) This method involves manually placing the images in the appropriate folders within the App_Resources directory. This approach is useful if the automated generation doesn't meet the business requirements.

Automate Application Launcher and Splash Icon Generation

To enable automatic generation of application launcher and splash icons, define AppImages configurations as shown below:

"AppImages": {
  "Launcher": {
    "Logo": "launcher",
    "Background": "android_launcher_background", // Android only
  },
  "Splash": {
    "Logo": "splash_logo",
    "Background": "background", // iOS only
    "LogoBackground": "android_splash_background", // Android only
  }
}
  • LauncherIcon->Logo: Name of the launcher image. Please provide an image with a minimum resolution of 1024 x 1024.
  • LauncherIcon->Background: Name of the background image of the launcher Logo image, supported only on Android (similar as Splash-> LogoBackground).
  • Splash-> logo: Name of the image displayed at the center of the splash view. Please provide an image with a minimum resolution of 460 x 460.
  • Splash-> Background: The name of the splash view's background image. Please provide an image with a minimum resolution of 2304 × 3072 (the largest resolution required for iPhone 3x). This is supported only on iOS.
  • Splash-> LogoBackground: The name of the splash logo background image. Note that on Android, this image is not the background of the whole splash view as Android doesn't support this. Provide an image of at least 460 x 460. This is supported only on Android.
  • The images must be stored in the metadata application folder, <xxxx>.mdkproject/App_Resources/MDK/Images. If the images are present in the subfolder, specify the relative path.
  • Dark theme image files should be named as, <xxxx>.dark.png, for example, launcher.dark.png, splash_background.dark.png, and launcher.dark.xml.
  • PNG and JPEG/JPG image formats are supported; however, it is recommended to use PNG for better quality and visual appearance. Android also supports vector image (XML) files, whereas iOS does not. The precedence for image formats is as follows: first vector images (XML), then PNG, and finally JPEG/JPG. Refer to the Android documentation for specifications on vector image (XML) files..
  • Android displays splash and launcher images in a circular shape, so ensure the image fits well within the circle of the rectangular image. Otherwise, the image may be cropped at the edges on Android.

Note

To avoid conflicts, remove any customization or override files added for the launcher and splash screens in the App_Resources and App_Resources_Merge folders for both iOS and Android.

  • Customers are encouraged to use this new way of automatic generation of app images, however, to enable old way of customization, disable this feature by removing the "AppImages" if added.

Manual Customization via App_Resources

To manually customize the application launcher and splash icon via App_Resources, refer to the sections below:

App Launcher Icon and Splash Screen for iOS

App launcher icon and splash screen for iOS is customizable by providing the following resources in the /App_Resources/iOS/ folder.

  • Assets.xcassets: The resource folder that holds your image asset catalogs (for AppIcons, LaunchImages and LaunchScreen).
  • LaunchScreen.storyboard: Your default storyboard used for your launch screen (used in iOS versions 8+).

You can use the template version provided by Mobile Development Kit as your initial template from here:

  • <MDKClient_SDK Folder>/App_SDK/template/app/App_Resources/iOS/Assets.xcassets
  • <MDKClient_SDK Folder>/App_SDK/template/app/App_Resources/iOS/LaunchScreen.storyboard

Tip

You are highly recommended to use Xcode to modify the Assets.xcassets or LaunchScreen.storyboard, so that you can ensure you have provided all of the required icons and images.

In the template version of Assets.xcassets you will find the following sub-folders:

  • The app launcher icons are stored in AppIcon.appiconset

    • AppIcon.appiconset: The resource that holds the images for your app launch icons for all iOS versions.
    • Note: Make sure the resolution of the images and icons are correct.

  • The splash screen images used by the LaunchScreen.storyboard are stored in the following folders:

    • LaunchImage.launchimage: The resource folder that holds the images for your launch screen images (for iOS 7 and lower versions).
    • LaunchScreen.AspectFill.imageset: The resource folder that holds the background image for your LaunchScreen.storyboard (for iOS versions 8+).
    • LaunchScreen.Center.imageset: The resource folder that holds the centered image for your LaunchScreen.storyboard (for iOS versions 8+).

Warning

Make sure you have provided all required images or your app will be rejected from publishing in the Apple App Store.

Custom Icon for Onboarding Screen in iOS

You can specify this by adding a Branding.nss file in the App_Resources/iOS directory. If a file exists, the client will pick it up and load it first. NSS is cumulative, so styles in Branding.nss can be overridden by SDK level styles in the definitions out of the box.

For example, this file can be used to brand the Welcome Page Logo:

/* Branding.nss */
fdlFUIWelcomeScreen_logoImageView {
  image-name: custom-logo.png;   /* user is in charge of putting this file in the App_Resources/iOS as well */

}

App Launcher Icon for Android

In Android, you can customize the app launcher icon by providing mipmap resources named ic_launcher and ic_launcher_round in the mipmap-<xyz> folder.

It is recommended to use Android Studio's Image Asset Studio tools to generate these necessary files based on the screen density of the device.

Follow the steps given below to generate and customize your app launcher icon:

  • In Android Studio, create an empty Android project with No Activity option.
  • In the Project window, select the Android view and delete all the files under the app > res folder.
  • Right-click on the res folder and select New > Image Asset.
  • The Image Asset Studio dialog box appears.
  • Choose "Launcher Icons (Adaptive and Legacy)" as the Icon Type, and "ic_launcher" as the Name. Note: <Name>_round version will be automatically generated based on the provided name.
  • Fill in the other details based on your business requirements.
  • Click Finish, and your icons will be generated in the res folder.
  • Right-click the res folder and select Open In > Finder (macOS)/File Explorer (Windows).
  • Copy the entire res folder and paste it in the main folder-   YourApp.mdkproject/App_Resources_Merge/Android/src/main.
  • Build your project using the create-client command.

For more information, please refer to this document.

Splash Screen for Android

Splash Screen in Android can be customized by providing a resource named splash_screen in your drawable folders.

You are recommended to use LayerList image for splash screen so that it can be scaled automatically.

e.g. splash_screen.xml in drawable-nodpi folder:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
  <item>
    <!-- This is where you specify the drawable for Splashscreen Background-->
    <bitmap android:gravity="fill" android:src="@drawable/background" />
  </item>
  <item>
    <!-- This is where you specify the drawable for image or icon-->
    <bitmap android:gravity="center" android:src="@drawable/splash_logo" />
  </item>
</layer-list>

In this example, you can have 2 images (background and splash_logo) in your drawable folders. The background image will be used to fill the background of the splash screen and the splash_logo will be displayed at the center in the splash screen. You can also provide splash_logo in the different drawable-<dpi> folders.

Last update: May 21, 2025