Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Use Multiple Image Sources

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

You can replace each default or generated icon or splash screen with custom images. In addition, you can set 9-patch splash screens for all Android device resolutions.

If you want AppBuilder to create and configure the icons and splash screens from a single image source, see Use Single Image Source.

Prerequisites

AppBuilder Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.

Android Prerequisites

  • Verify that the image files that you want to use meet the requirements for Android. For more information about the icons and splash screen requirements in Android, see Iconography and Nine-Patch in the Android Developers documentation.

iOS Prerequisites

  • Verify that the image files that you want to use meet the requirements for iOS. For more information about the icons and splash screen requirements in iOS, see Icon and Image Sizes and Launch Images in the iOS Developer Library.

Procedure

In-Browser

  1. In the Project Navigator, double-click Properties.
  2. Navigate to the Assets tab.
  3. Configure the icons for your iOS app.
    You need to replace each icon individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the iOS tab under the generator, click the icon that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  4. Configure the splash screens for your iOS app.
    You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the iOS tab under the generator, click the splash screen that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  5. Configure the icons for your Android app.
    You need to replace each icon individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the icon that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  6. Configure the splash screens for your Android app.
    You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the splash screen that you want to set.
    2. Browse to locate the image file that you want to use, select it and click Open.
  7. (Optional) Configure the 9-patch splash screens for your Android app.
    Verify that the image files are 9-patch images. You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If you do not provide an image for one or more of the device screen resolutions, your app will use the default 9 patch image for these resolutions. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the 9-patch splash screen that you want to set.
    2. Browse to locate the image file that you want to use, select it and click Open.

Windows

  1. In the Project Navigator, double-click Properties.
  2. Navigate to the Assets tab.
  3. Configure the icons for your iOS app.
    You need to replace each icon individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the iOS tab under the generator, click the icon that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  4. Configure the splash screens for your iOS app.
    You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the iOS tab under the generator, click the splash screen that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  5. Configure the icons for your Android app.
    You need to replace each icon individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the icon that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  6. Configure the splash screens for your Android app.
    You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the splash screen that you want to set.
    2. Browse to locate the image file that you want to use, select it and click Open.
  7. (Optional) Configure the 9-patch splash screens for your Android app.
    Verify that the image files are 9-patch images. You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If you do not provide an image for one or more of the device screen resolutions, your app will use the default 9 patch image for these resolutions. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the 9-patch splash screen that you want to set.
    2. Browse to locate the image file that you want to use, select it and click Open.

Visual Studio

  1. In the Solution Explorer, double-click Properties.
  2. Navigate to the Assets tab.
  3. Configure the icons for your iOS app.
    You need to replace each icon individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the iOS tab under the generator, click the icon that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  4. Configure the splash screens for your iOS app.
    You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the iOS tab under the generator, click the splash screen that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  5. Configure the icons for your Android app.
    You need to replace each icon individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the icon that you want to replace.
    2. Browse to locate the image file that you want to use, select it and click Open.
  6. Configure the splash screens for your Android app.
    You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the splash screen that you want to set.
    2. Browse to locate the image file that you want to use, select it and click Open.
  7. (Optional) Configure the 9-patch splash screens for your Android app.
    Verify that the image files are 9-patch images. You need to replace each splash screen individually. Verify that the image file that you want to use meets the requirements listed under the placeholder image. If you do not provide an image for one or more of the device screen resolutions, your app will use the default 9 patch image for these resolutions. If your image does not meet the size requirements, AppBuilder will resize it.
    1. In the Android tab under the generator, click the 9-patch splash screen that you want to set.
    2. Browse to locate the image file that you want to use, select it and click Open.

CLI

  1. On your local file system, open the directory that contains your app and navigate to the App_Resources directory.
    Each subdirectory in this folder is named after a mobile platform and contains the image resources for the corresponding mobile platform.
  2. To configure the icons and splash screens for each mobile platform, replace the following images.
    Verify that the images that you want to use meet the listed requirements.

    Mobile Platform Image Purpose Image Requirements File Name and Location
    Android Low density icon Dimensions: 36 x 36 pixels App_Resources → Android → drawable-ldpi → icon.png
    Medium density icon Dimensions: 48 x 48 pixels App_Resources → Android → drawable-mdpi → icon.png
    High density icon Dimensions: 72 x 72 pixels App_Resources → Android → drawable-hdpi → icon.png
    XHDPI icon Dimensions: 96 x 96 pixels App_Resources → Android → drawable-xhdpi → icon.png
    XXHDPI icon Dimensions: 144 x 144 pixels App_Resources → Android → drawable-xxhdpi → icon.png
    XXXHDPI icon Dimensions: 192 x 192 pixels App_Resources → Android → drawable-xxxhdpi → icon.png
    Low density portrait splash screen
    • Dimensions: 200 x 320 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-ldpi→ splashscreen.png
    Low density landscape splash screen
    • Dimensions: 320 x 200 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-land-ldpi→ splashscreen.png
    Medium density portrait splash screen
    • Dimensions: 320 x 480 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-mdpi→ splashscreen.png
    Medium density landscape splash screen
    • Dimensions: 480 x 320 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-land-mdpi→ splashscreen.png
    High density portrait splash screen
    • Dimensions: 480 x 800 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-hdpi→ splashscreen.png
    High density landscape splash screen
    • Dimensions: 800 x 480 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-land-hdpi→ splashscreen.png
    XHDPI portrait splash screen
    • Dimensions: 720 x 1280 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-xhdpi→ splashscreen.png
    XHDPI landscape splash screen
    • Dimensions: 1280 x 720 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-land-xhdpi→ splashscreen.png
    XXHDPI portrait splash screen
    • Dimensions: 1080 x 1920 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-xxhdpi→ splashscreen.png
    XXHDPI landscape splash screen
    • Dimensions: 1920 x 1080 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-land-xxhdpi→ splashscreen.png
    XXXHDPI portrait splash screen
    • Dimensions: 1440 x 2560 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-xxxhdpi→ splashscreen.png
    XXXHDPI landscape splash screen
    • Dimensions: 2560 x 1440 pixels
    • Format: regular PNG image
    App_Resources → Android → drawable-land-xxxhdpi→ splashscreen.png
    Default nine-patch splash screen Format: nine-patch graphic App_Resources → Android → drawable-nodpi→ splashscreen.9.png
    Low density portrait nine-patch splash screen
    • Dimensions: 200 x 320 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-ldpi→ splashscreen.png
    Low density landscape nine-patch splash screen
    • Dimensions: 320 x 200 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-land-ldpi→ splashscreen.png
    Medium density portrait nine-patch splash screen
    • Dimensions: 320 x 480 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-mdpi→ splashscreen.png
    Medium density landscape nine-patch splash screen
    • Dimensions: 480 x 320 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-land-mdpi→ splashscreen.png
    High density portrait nine-patch splash screen
    • Dimensions: 480 x 800 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-hdpi→ splashscreen.png
    High density landscape nine-patch splash screen
    • Dimensions: 800 x 480 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-land-hdpi→ splashscreen.png
    XHDPI portrait nine-patch splash screen
    • Dimensions: 720 x 1280 pixels
    • Format: nine-patch graphice
    App_Resources → Android → drawable-xhdpi→ splashscreen.png
    XHDPI landscape nine-patch splash screen
    • Dimensions: 1280 x 720 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-land-xhdpi→ splashscreen.png
    XXHDPI portrait nine-patch splash screen
    • Dimensions: 1080 x 1920 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-xxhdpi→ splashscreen.png
    XXHDPI landscape nine-patch splash screen
    • Dimensions: 1920 x 1080 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-land-xxhdpi→ splashscreen.png
    XXXHDPI portrait nine-patch splash screen
    • Dimensions: 1440 x 2560 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-xxxhdpi→ splashscreen.png
    XXXHDPI landscape nine-patch splash screen
    • Dimensions: 2560 x 1440 pixels
    • Format: nine-patch graphic
    App_Resources → Android → drawable-land-xxxhdpi→ splashscreen.png
    iOS iPhone splash screen (portrait mode) Dimensions: 320 x 480 pixels App_Resources → iOS → Default.png
    iPhone splash screen (portrait mode, Retina displays) Dimensions: 640 x 960 pixels App_Resources → iOS → Default@2x.png
    iPhone splash screen (portrait mode, iPhone 5) Dimensions: 640 x 1136 pixels App_Resources → iOS → Default-568h@2x.png
    iPhone 6 splash screen (portrait mode) Dimensions: 750 x 1334 pixels App_Resources → iOS → Default-667h.png
    iPhone 6 Plus splash screen (portrait mode) Dimensions: 1242 x 2208 pixels App_Resources → iOS → Default-736h.png
    iPhone 6 splash screen (landscape mode) Dimensions: 1334 x 750 pixels App_Resources → iOS → Default-Landscape-667h.png
    iPhone 6 Plus splash screen (landscape mode) Dimensions: 2208 x 1242 pixels App_Resources → iOS → Default-Landscape-736h.png
    iPad Pro splash screen (landscape mode) Dimensions: 2732 x 2048 pixels App_Resources → iOS → Default-Landscape-1366@2x.png
    iPad splash screen (landscape mode) Dimensions: 1024 x 748 pixels App_Resources → iOS → Default-Landscape.png
    iPad splash screen (landscape mode, Retina displays) Dimensions: 2048 x 1496 pixels App_Resources → iOS → Default-Landscape@2x.png
    iPad splash screen (portrait mode) Dimensions: 768 x 1004 pixels App_Resources → iOS → Default-Portrait.png
    iPad splash screen (portrait mode, Retina displays) Dimensions: 1536 x 2008 pixels App_Resources → iOS → Default-Portrait@2x.png
    iPad Pro splash screen (portrait mode) Dimensions: 2048 x 2732 pixels App_Resources → iOS → Default-Portrait-1366@2x.png
    iPhone app icon Dimensions: 57 x 57 pixels App_Resources → iOS → icon.png
    iPhone app icon (Retina displays) Dimensions: 114 x 114 pixels App_Resources → iOS → icon@2x.png
    iPhone and iPad search results icon (iOS 7 and later) Dimensions: 40 x 40 pixels App_Resources → iOS → icon-40.png
    iPhone and iPad search results icon (iOS 7 and later, Retina displays) Dimensions: 80 x 80 pixels App_Resources → iOS → icon-40@2x.png
    iPhone 6 Plus search results icon Dimensions: 120 x 120 pixels App_Resources → iOS → icon-40@3x.png
    iPhone app icon (iOS 7 and later) Dimensions: 60 x 60 pixels App_Resources → iOS → icon-60.png
    iPhone app icon (iOS 7 and later, Retina displays) Dimensions: 120 x 120 pixels App_Resources → iOS → icon-60@2x.png
    iPhone 6 Plus app icon Dimensions: 180 x 180 pixels App_Resources → iOS → icon-60@3x.png
    iPad app icon Dimensions: 72 x 72 pixels App_Resources → iOS → icon-72.png
    iPad app icon (Retina displays) Dimensions: 144 x 144 pixels App_Resources → iOS → icon-72@2x.png
    iPad app icon (iOS 7 and later) Dimensions: 76 x 76 pixels App_Resources → iOS → icon-76.png
    iPad app icon (iOS 7 and later, Retina displays) Dimensions: 152 x 152 pixels App_Resources → iOS → icon-76@2x.png
    iPad Pro app icon Dimensions: 167 x 167 pixels App_Resources → iOS → icon-83.5@2x.png
    iPhone search results icon (iOS 6.1 and earlier) Dimensions: 29 x 29 pixels App_Resources → iOS → Icon-Small.png
    iPhone search results icon (iOS 6.1 and earlier, Retina displays) Dimensions: 58 x 58 pixels App_Resources → iOS → Icon-Small@2x.png
    iPad search results icon (iOS 6.1 and earlier) Dimensions: 50 x 50 pixels App_Resources → iOS → Icon-Small-50.png
    iPad search results icon (iOS 6.1 and earlier, Retina displays) Dimensions: 100 x 100 pixels App_Resources → iOS → Icon-Small-50@2x.png

Next Steps

Run your app on device. If you have already deployed your app on device, you need to re-deploy it for the configuration changes to take effect.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.