Skip to main content
Version: Next

App Icons and Splash Images

info

You need to publish your application to see affects of changes. Smartface emulator won't be affected with customizations of app icon and splash image.

App icons have fixed sizes for device types.

For Android devices, every resource folder is used for a different type of device. In each folder, there is an icon.png that represents your app icon. Please note that the image sizes are fixed.;

iOS resources have same structure. The difference is that iOS has only one resource folder and you need to change the images names to start with "Icon" . Please note that the images sizes are fixed.;

Changing the Application Icon & Splash Icon

To change your application icon or splash image, follow this documentation

Splash Image​

iOS​

iOS resources have same structure. The difference is that iOS has only one resource folder and you need to change the images names to start with "Default ". Please note that the images sizes are fixed.;

info
  • When the splash image and the app icon are created, you'll find them in the images/iOS folders.
  • images/iOS folder contains the splash image and app icon for iOS devices. Named as Default.png and icon.png respectively.
  • To delete app icon and splash image, you can use the following commands:
    • Go to images/automated folder, find your LaunchImage.png and AppIcon.png. Right click on the file and select "Delete auto-resized images".
caution
  • If you accidentally delete the app icon and splash image from the images/automated folder, you'll need to workaround the issue by manually load the images again. It doesn't have to be the same image, only the file name is checked.
  • Just make sure that the image name is the same as the one you used in the images/automated folder.

Android​

With Android 12 splash image creation changed, you can follow the below steps to create a splash image.

Splash Screen dimensions

The splash screen icon uses the same specifications as Adaptive icons, as follows:

  • Branded image: This should be 200×80 dp.

  • App icon with an icon background: This should be 240×240 dp, and fit within a circle of 160 dp in diameter.

  • App icon without an icon background: This should be 288×288 dp, and fit within a circle of 192 dp in diameter.

Processes​

  1. Go to images/automated folder.
  2. Place your splash image in the images/automated folder.
  3. Right click on the file and select "Generate auto-resized images".
  4. You'll find the splash image in the images/Android folder.
  5. You can delete the splash image by right clicking on the file and selecting "Delete auto-resized images".
note

Make sure that the image dimensions are squared.

Image Generation
  1. Create or edit config/Android/res/values/styles.xml file.
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
       <item name="windowSplashScreenBackground">@color/colorSplashScreenBackground</item>
       <item name="windowSplashScreenAnimatedIcon">@drawable/icon</item>
       <item name="windowSplashScreenIconBackgroundColor">@color/colorSplashIconBackground</item>
       <item name="postSplashScreenTheme">@style/${CurrentTheme}</item>
</style>
info

@drawable/icon is the name of the icon that you want to use in the splash screen.

We can customize following attributes in splash screen.

  • windowSplashScreenBackground - color

  • windowSplashScreenAnimatedIcon - drawable (icon, can be animated)

  • windowSplashScreenAnimationDuration - integer

  • windowSplashScreenIconBackgroundColor - color

caution

Don't change the postSplashScreenTheme item

  1. Create or edit config/Android/res/values/colors.xml file.
<resources>
    <color name="colorSplashScreenBackground">#dddddd</color>
    <color name="colorSplashIconBackground">#eeeeee</color>
</resources>

  1. Create drawables via Smartface-IDE (image-generator) or copy under config/Android/res/drawable/

  2. Change activity theme in config/Android/AndroidManifest.xml file.

android:theme="@style/Theme.App.Starting"
<activity android:name=".A" 
android:label="${ApplicationName}"  
android:configChanges="keyboardHidden|orientation|screenSize" 
android:launchMode="singleTask"
android:windowSoftInputMode="adjustPan"
android:screenOrientation="${Orientation}"
android:theme="@style/Theme.App.Starting"
android:exported="true" 
android:resizeableActivity="false">

Dark Theme

In order to support Android dark theme, create colors.xml under config/Android/res/values-night/colors.xml

<resources>
    <color name="colorSplashScreenBackground">#000000</color>
    <color name="colorSplashScreenBackground">#000000</color>
</resources>

Branding Image

You can also add branding image to splash screen. It is only works Android 12 and above.

  1. Create or edit config/Android/res/values-v31/styles.xml file.
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
       <item name="android:windowSplashScreenBackground">@color/colorSplashScreenBackground</item>
       <item name="android:windowSplashScreenAnimatedIcon">@drawable/icon</item>
       <item name="android:windowSplashScreenIconBackgroundColor">@color/colorSplashIconBackground</item>
        <item name="android:windowSplashScreenBrandingImage">@drawable/$yourBrandingImage</item>
       <item name="android:postSplashScreenTheme">@style/${CurrentTheme}</item>
</style>

Android 12 problems

On Android 12, splash icon may not be displayed some situations, such as restarting the app, opening apps from home screen widget or notification.