Search code examples
androidcordovaphonegap

app icon has white circle around it for android on phonegap/cordova

I updated phonegap, and now the Android icon shows a white circle around it like 1/2 of the icons on my phone. I don't want the white circle.

Attached shows the Arlo icon which is normal, then two other icons with white circles around them. My config.xml has the icons listed to a png that does not look like this.

How can I get my icon without the circle again, like the Arlo icon?

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

enter image description here

Solution

  • I did fix it but I honestly can't recall exactly everything I did. Here's what I remember for sure.

    1) I updated to cordova 8.0.0 (not sure if this is required)

    2) Removed all android icon configs from config.xml, except I left:

    <icon src="icon.png" />

    3) Generate Adaptive Icons with Android Studio (Pretty easy): https://developer.android.com/studio/write/image-asset-studio#create-adaptive

    The following steps must be done every time you use phonegap prepare android (or cordova prepare android), and of course if you rm/add the platform.

    4) Copy the generated drawable/values folders/files from Android Studio to approot/platforms/android/app/src/main/res

    5) Double check the approot/platforms/android/app/src/AndroidManifest.xml has this piece:

    <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">

    There's probably a better way, but my app is working with adaptive icons and I'm happy. Hopefully this helps. Sorry I cannot remember all the details!