Skip to main content

Delivering Mobile Apps

 

Applies only to Mobile Apps
OutSystems

Modify the App Icon

When you create a mobile application, the icon for the app is generated automatically in the app creation wizard. This icon is then used to identify the app in the devices, being automatically adapted to all aspects of the device or context as the density or screen size of the device’s screen or the size of the place where the icon is displayed.

Define Custom Icons for Your App

To change the default icon and use your own icon image, providing multiple versions regarding the icon's context, device screen size or density:

  1. Create (if not yet created) a zip file and add all the Android/iOS icons (.png image format);
  2. Open the main application module and import the new or the updated zip file to the resources folder;

    image01.png
  3. Select the application module, go to its properties and open the Extensibility Configurations property;

    image06_2.png
  4. In the Extensibility Configurations value window, you must create a JSON object (if not created) where you can specify all the information about the icons to use. If not yet specified, start by indicating the resource file that contains the icons;

  5. Add the “icons” tag to the JSON to indicate that you want to use your own icons for your application;

  6. For each mobile platform, specify the size (iOS) and density (Android) and the correspondent icon location in the zip folders. Ensure that you define icons for all size and densities available, otherwise, you'll get an error (the example below is just for reference). Check the JSON template for the icons to avoid mistakes;

  7. To make this change available for the users, publish and generate a new mobile application and distribute it.

    image02.png

Icon Sizes and Densities

For iOS

Width

Height

Displayed on

29

29

  • iPhone Spotlight (iOS 5, 6)
  • iPhone Settings (iOS 5 - 9)
  • iPad Settings (iOS 5 - 9)

40

40

  • iPad Spotlight (iOS 7 - 9)

50

50

  • iPad Spotlight (iOS 5, 6)

57

57

  • iPhone App (iOS 5, 6)

58

58

  • iPhone Spotlight (iOS 5, 6)
  • iPhone Settings (iOS 5 - 9)
  • iPad Settings (iOS 5 - 9)

72

72

  • iPad App (iOS 5, 6)

76

76

  • iPad App (iOS 7 - 9)

80

80

  • iPhone Spotlight (iOS 7 - 9)
  • iPad Spotlight (iOS 7 - 9)

87

87

  • iPhone Spotlight (iOS 5, 6)
  • iPhone Settings (iOS 5 - 9)

100

100

  • iPad Spotlight (iOS 5, 6)

114

114

  • iPhone App (iOS 5, 6)

120

120

  • iPhone Spotlight (iOS 7 - 9)
  • iPhone App (iOS 7 - 9)

144

144

  • iPad App (iOS 5, 6)

152

152

  • iPad App (iOS 7 - 9)

167

167

  • iPad Pro App (iOS 9)

180

180

  • iPhone App (iOS 7 - 9)

For Android

Width

Height

Density

Displayed on

36

36

ldpi

  • Notification icons

48

48

mdpi

  • Launcher icons
  • Action bar, Dialog and Tab icons
  • Small Contextual Icons

72

72

hdpi

  • Launcher icons
  • Notification icons

96

96

xhdpi

  • Launcher icons
  • Action bar, Dialog and Tab icons
  • Notification icons

144

144

xxhdpi

  • Launcher icons

192

192

xxxhdpi

  • Launcher icons

Icons JSON Template

{
    "resources": "<path_to_resources_file>",
    "icons": {
        "android": [{
            "resource": "<path_to_icon_image>",
            "density": "ldpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "mdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "hdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xhdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xxhdpi"
        },
        {
            "resource": "<path_to_icon_image>",
            "density": "xxxhdpi"
        }],
        "ios": [{
            "resource": "<path_to_icon_image>",
            "width": "29",
            "height": "29"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "40",
            "height": "40"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "50",
            "height": "50"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "57",
            "height": "57"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "58",
            "height": "58"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "72",
            "height": "72"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "76",
            "height": "76"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "80",
            "height": "80"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "87",
            "height": "87"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "100",
            "height": "100"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "114",
            "height": "114"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "120",
            "height": "120"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "144",
            "height": "144"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "152",
            "height": "152"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "167",
            "height": "167"
        },
        {
            "resource": "<path_to_icon_image>",
            "width": "180",
            "height": "180"
        }]
    }
}
 
  • Was this article helpful?