Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cordova android app not showing icon on home screen

We've got a web app powered by cordova to generate mobile apps. Everything does work on iOS.

We're trying to add the android platform and about everything works well except application icons.

The config.xml mostly follows what's on the docs:

<widget
    id="xxx"
    version="xxx"
    ios-CFBundleVersion="xxx"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
>
    <name>xxx</name>
    <description></description>
    <author email="xxx" href="xxx">xxx</author>
    <content src="index.html" />

    <engine name="ios" spec="~4.5.1" />
    <engine name="android" spec="~6.3.0" />

    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="BackupWebStorage" value="none" />
        <preference name="deployment-target" value="8.0" />
        <preference name="KeyboardDisplayRequiresUserAction" value="false" />
        <preference name="UIWebViewDecelerationSpeed" value="normal" />

        <icon src="resources/icons/Icon-Small.png" width="29" height="29" />
        <icon src="resources/icons/[email protected]" width="58" height="58" />
        <icon src="resources/icons/[email protected]" width="87" height="87" />
        <icon src="resources/icons/Icon-40.png" width="40" height="40" />
        <icon src="resources/icons/Icon-50.png" width="50" height="50" />
        <icon src="resources/icons/[email protected]" width="100" height="100" />
        <icon src="resources/icons/Icon.png" width="57" height="57" />
        <icon src="resources/icons/[email protected]" width="114" height="114" />
        <icon src="resources/icons/[email protected]" width="80" height="80" />
        <icon src="resources/icons/[email protected]" width="120" height="120" />
        <icon src="resources/icons/Icon-60.png" width="60" height="60" />
        <icon src="resources/icons/[email protected]" width="120" height="120" />
        <icon src="resources/icons/[email protected]" width="180" height="180" />
        <icon src="resources/icons/Icon-72.png" width="72" height="72" />
        <icon src="resources/icons/[email protected]" width="144" height="144" />
        <icon src="resources/icons/Icon-76.png" width="76" height="76" />
        <icon src="resources/icons/[email protected]" width="152" height="152" />
        <icon src="resources/icons/Icon-83.5.png" width="83.5" height="83.5" />
        <icon src="resources/icons/[email protected]" width="167" height="167" />
        <icon src="resources/icons/[email protected]" width="1024" height="1024" />

        <preference name="ShowSplashScreenSpinner" value="false"/>

        <splash src="resources/splash/Default@2x~universal~anyany.png" width="2732" height="2732"/>
    </platform>

    <platform name="android">
        <allow-intent href="market:*" />

        <icon src="resources/icons/ldpi.png" density="ldpi" />
        <icon src="resources/icons/mdpi.png" density="mdpi" />
        <icon src="resources/icons/hdpi.png" density="hdpi" />
        <icon src="resources/icons/xhdpi.png" density="xhdpi" />
        <icon src="resources/icons/xxhdpi.png" density="xxhdpi" />
        <icon src="resources/icons/xxxhdpi.png" density="xxxhdpi" />

        <splash src="resources/splash/splash-land-hdpi.png" density="land-hdpi"/>
        <splash src="resources/splash/splash-land-ldpi.png" density="land-ldpi"/>
        <splash src="resources/splash/splash-land-mdpi.png" density="land-mdpi"/>
        <splash src="resources/splash/splash-land-xhdpi.png" density="land-xhdpi"/>
        <splash src="resources/splash/splash-port-hdpi.png" density="port-hdpi"/>
        <splash src="resources/splash/splash-port-ldpi.png" density="port-ldpi"/>
        <splash src="resources/splash/splash-port-mdpi.png" density="port-mdpi"/>
        <splash src="resources/splash/splash-port-xhdpi.png" density="port-xhdpi"/>

        <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    </platform>

    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-navigation href="https://*/*" />
    <allow-intent href="mailto:*" />
    <allow-navigation href="mailto:*" />

    <universal-links>
        <ios-team-id value="xxx" />
        <host name="$host" scheme="$scheme" event="universal-link-clicked"/>
    </universal-links>

    <plugin name="cordova-plugin-file-transfer" spec="~1.6.2" />
    <plugin name="cordova-plugin-file" spec="~4.3.3" />
    <plugin name="cordova-plugin-network-information" spec="~1.3.2" />
    <plugin name="cordova-plugin-statusbar" spec="~2.2.2" />
    <plugin name="cordova-plugin-background-fetch" spec="https://github.com/christocracy/cordova-plugin-background-fetch.git" />
    <plugin name="cordova-plugin-inappbrowser" spec="~1.7.0" />
    <plugin name="cordova-plugin-disable-bitcode" spec="~1.3.2" />
    <plugin name="com.batch.cordova" spec="https://github.com/floo51/cordova-plugin.git" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.2" />
    <plugin name="cordova-plugin-ios-non-exempt-encryption" spec="~1.0.0" />
    <plugin name="cordova-universal-links-plugin" spec="~1.2.1" />
</widget>

There are different types of icons:

  • APK file icon (works)
  • Install screen (works)
  • Apps menu (does not work)
  • Home screen (does not work) enter image description here

  • Runnings apps (does not work) enter image description here

Most weird is that it does work on simulator (nexus 5) but not on a OnePlus One or a Moto G4.

We're using cordova 6.5. All icons are resized according to what's on the docs. Did we miss anything ?

like image 353
Florian F. Avatar asked Oct 31 '17 13:10

Florian F.


People also ask

Why is my app icon not on my home screen?

Go to Settings, then tap on “Display” then tap on “Full screen apps“. From there, turn on what apps you want to appear on your home screen. Go back to home screen after turning on all the apps you want icons for, scroll right to left, they should all be there.

How do I add icons to Cordova app?

Place your source splash image and icon images in this folder. Update the config. xml configuration file to point to your custom files. If you have an Android app, the requirements to for identifying the splash images depends on whether you created the app with or without the MobileFirst template.


1 Answers

I recommend two things:

1) Use qualifier instead of density. Example:

<icon src="resources/icons/ldpi.png" qualifier="ldpi" />

2) Add default icon & splash as a fallback in the root folder of your project:

<icon src="icon.png" />
<splash src="splash.png" />
like image 97
Racil Hilan Avatar answered Sep 18 '22 05:09

Racil Hilan