114
Views
8
Comments
Unable to modify app icon according to environment for iOS 12 and up
Application Type
Mobile

I've tried to set a dynamic app icon in the home screen based on the environment (e.g. DEV, UAT, PROD) by following the standard modify app icon guide provided: 

https://success.outsystems.com/Documentation/11/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Modify_the_App_Icon

However, only the android version seems to change according to expectations, while iOS simply gives a "blank icon?" (see example below with default on the left and Extensibility Configurations changed)

2021-04-12 11-47-04
Bart Nooijens

Hi Josiah,

Without seeing the extensiblity configuration it is hard to say why the icon is not showing up. What does your extensibility configuration look like? Also, What does your zip file look like? Any possibilities to share these?

Also, is the application fully installed? Can you open the application?

Best,

Bart

UserImage.jpg
Josiah Sng

Hi Brat, 

I've taken the standard icon JSON template from the site and added the required resource file paths. You can find a sample attached below: (the 3 dots are for the rest of the settings as stated in the site.) 

{

    "resource": "k2 icon.zip",

    "icons": {

        "android": [{

            "resource": "/k2 icon.png",

            "density": "ldpi"

        }, ... }],

          "ios": [{

            "resource": "/k2 icon.png",

            "width": "20",

            "height": "20"

        }, ... }]

}

Zip structure looks like this screenshot: 

Application can be installed for both Android & iOS, just that iOS has the missing app icon issue

2021-04-12 11-47-04
Bart Nooijens

Hi Josiah,

I would advise you to remove the spaces in your filenames and also your zip file. Also there is no need to put a / in front of the filename. See a working example below:

{

    "resource": "logos.zip",

    "icons": {

        "android": [{

            "resource": "logodevelopment36.png",

            "density": "ldpi"

        },

        {

            "resource": "logodevelopment48.png",

            "density": "mdpi"

        },

        {

            "resource": "logodevelopment72.png",

            "density": "hdpi"

        },

        {

            "resource": "logodevelopmentt96.png",

            "density": "xhdpi"

        },

        {

            "resource": "logodevelopment144.png",

            "density": "xxhdpi"

        },

        {

            "resource": "logodevelopment192.png",

            "density": "xxxhdpi"

        }]

    },

        "preferences": {

        "android": [

            {

                "name": "AndroidLaunchMode",

                "value": "singleTask"

            }

        ]

    }   

}

Hope this helps.

Best,

Bart

UserImage.jpg
Josiah Sng

May I know what function the preferences section is supposed to do?

2021-04-12 11-47-04
Bart Nooijens

It is not needed for you. It is used for push notifications. This was a copy paste (renamed the images and zip) from one of our applications.

UserImage.jpg
Josiah Sng

Um, I've updated the files and the JSON template with the same results. 

Is there any more methods that can be used to fix the current problems?


Regards, 

Josiah 

2021-04-12 11-47-04
Bart Nooijens

Hi Josiah,

Well anything you need to know is listed on the success page: https://success.outsystems.com/Documentation/11/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Modify_the_App_Icon

I have a separate image (with the correct dimensions) for each icon. Not sure if this is a requirement, but you could give it a try. Example below is working for Android and iOS.

{

    "resource": "otaplogos.zip",

    "icons": {

        "android": [{

            "resource": "logodevelopment36.png",

            "density": "ldpi"

        },

        {

            "resource": "logodevelopment48.png",

            "density": "mdpi"

        },

        {

            "resource": "logodevelopment72.png",

            "density": "hdpi"

        },

        {

            "resource": "logodevelopment96.png",

            "density": "xhdpi"

        },

        {

            "resource": "logodevelopment144.png",

            "density": "xxhdpi"

        },

        {

            "resource": "logodevelopment192.png",

            "density": "xxxhdpi"

        }],

        "ios": [{

            "resource": "logodevelopment20.png",

            "width": "20",

            "height": "20"

        },

        {

            "resource": "logodevelopment29.png",

            "width": "29",

            "height": "29"            

        },

        {

            "resource": "logodevelopment40.png",

            "width": "40",

            "height": "40"            

        },

        {

            "resource": "logodevelopment48.png",

            "width": "48",

            "height": "48"            

        },

        {

            "resource": "logodevelopment50.png",

            "width": "50",

            "height": "50"            

        },

        {

            "resource": "logodevelopment55.png",

            "width": "55",

            "height": "55"            

        },

        {

            "resource": "logodevelopment57.png",

            "width": "57",

            "height": "57"            

        },

        {

            "resource": "logodevelopment58.png",

            "width": "58",

            "height": "58"            

        },

        {

            "resource": "logodevelopment60.png",

            "width": "60",

            "height": "60"            

        },

        {

            "resource": "logodevelopment72.png",

            "width": "72",

            "height": "72"            

        },

        {

            "resource": "logodevelopment76.png",

            "width": "76",

            "height": "76"            

        },

        {

            "resource": "logodevelopment80.png",

            "width": "80",

            "height": "80"            

        },

        {

            "resource": "logodevelopment87.png",

            "width": "87",

            "height": "87"            

        },

        {

            "resource": "logodevelopment88.png",

            "width": "88",

            "height": "88"            

        },

        {

            "resource": "logodevelopment100.png",

            "width": "100",

            "height": "100"            

        },

        {

            "resource": "logodevelopment114.png",

            "width": "114",

            "height": "114"            

        },

        {

            "resource": "logodevelopment120.png",

            "width": "120",

            "height": "120"            

        },

        {

            "resource": "logodevelopment144.png",

            "width": "144",

            "height": "144"            

        },

        {

            "resource": "logodevelopment152.png",

            "width": "152",

            "height": "152"            

        },

        {

            "resource": "logodevelopment167.png",

            "width": "167",

            "height": "167"            

        },

        {

            "resource": "logodevelopment172.png",

            "width": "172",

            "height": "172"            

        },

        {

            "resource": "logodevelopment180.png",

            "width": "180",

            "height": "180"            

        },

        {

            "resource": "logodevelopment196.png",

            "width": "196",

            "height": "196"            

        },

        {

            "resource": "logodevelopment1024.png",

            "width": "1024",

            "height": "1024"

        }]

    }

}


Is there any errors showing up in service center? 

Best,

Bart

UserImage.jpg
Josiah Sng

There are no errors in the service center when using the JSON template provided by the site, but the icon does not show up for iOS. If I miss one of the sizes for iOS or density for android, I'll get an error telling me what the size or density that I'm missing. 

I'll try the exact size soon... when I can update all of the pictures. Also, removing all of the extension  configurations does not allow the icons to go back to the original icon. Anything I might be missing?


Thanks Brat

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.