You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by "kalwinskidawid (via GitHub)" <gi...@apache.org> on 2023/09/29 12:37:45 UTC

[GitHub] [cordova] kalwinskidawid created a discussion: Cordova-android how to properrly declare adaptive icon

GitHub user kalwinskidawid created a discussion: Cordova-android how to properrly declare adaptive icon

Hi,
I'm writing here because I can't find the discussion panel in the cordova-android branch. 
I'm using version 12.0.1 and I have a problem with adaptive icons. I have read [#1616](https://github.com/apache/cordova-android/issues/1616), however I still can't generate a working icon.
In [documentation](https://cordova.apache.org/docs/en/12.x/config_ref/images.html#adaptive-icon-with-vectors) it says that I should do: 
```xml
<platform name="android">
  <resource-file src="res/values/colors.xml" target="/app/src/main/res/values/colors.xml" />

  <icon monochrome="res/icon/android/ldpi-monochrome.png" background="@color/background" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon monochrome="res/icon/android/mdpi-monochrome.png" background="@color/background" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon monochrome="res/icon/android/hdpi-monochrome.png" background="@color/background" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon monochrome="res/icon/android/xhdpi-monochrome.png" background="@color/background" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="@color/background" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="@color/background" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>
```
However when I generate icons in Android Studio I get: 
![image](https://github.com/apache/cordova/assets/9535316/41729d6e-b93b-4cd5-aea1-d45b2f3c1c85)
Monochrome is defined at `anydpi-v26`, so how should I define the `<icon>` attributes? I tried importing the icons via the `<resource-file>` tag and modifying the AndroidManifest without the `<icon>` tag in `config.xml`, but then I got an error that `ic_launcher.webp` already exists (the default cordova icon). I also tried: 
```xml 
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="mdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/mdpi/ic_launcher.webp"/>
[...]
``` 
But it does not work as it should. Android Studio does not generate `ldpi`. How to define it correctly? 



GitHub link: https://github.com/apache/cordova/discussions/435

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org


[GitHub] [cordova] kalwinskidawid edited a discussion: Cordova-android how to correctly declare an adaptive icon

Posted by "kalwinskidawid (via GitHub)" <gi...@apache.org>.
GitHub user kalwinskidawid edited a discussion: Cordova-android how to correctly declare an adaptive icon

Hi,
I'm writing here because I can't find the discussion panel in the cordova-android branch. 
I'm using version 12.0.1 and I have a problem with adaptive icons. I have read [#1616](https://github.com/apache/cordova-android/issues/1616), however I still can't generate a working icon.
In [documentation](https://cordova.apache.org/docs/en/12.x/config_ref/images.html#adaptive-icon-with-vectors) it says that I should do: 
```xml
<platform name="android">
  <resource-file src="res/values/colors.xml" target="/app/src/main/res/values/colors.xml" />

  <icon monochrome="res/icon/android/ldpi-monochrome.png" background="@color/background" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon monochrome="res/icon/android/mdpi-monochrome.png" background="@color/background" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon monochrome="res/icon/android/hdpi-monochrome.png" background="@color/background" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon monochrome="res/icon/android/xhdpi-monochrome.png" background="@color/background" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxhdpi-monochrome.png" background="@color/background" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon monochrome="res/icon/android/xxxhdpi-monochrome.png" background="@color/background" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>
```
However when I generate icons in Android Studio I get: 
![image](https://github.com/apache/cordova/assets/9535316/41729d6e-b93b-4cd5-aea1-d45b2f3c1c85)
Monochrome is defined at `anydpi-v26`, so how should I define the `<icon>` attributes? I tried importing the icons via the `<resource-file>` tag and modifying the AndroidManifest without the `<icon>` tag in `config.xml`, but then I got an error that `ic_launcher.webp` already exists (the default cordova icon). I also tried: 
```xml 
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="mdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/mdpi/ic_launcher.webp"/>
[...]
``` 
But it does not work as it should. Android Studio does not generate `ldpi`. How to define it correctly? 



GitHub link: https://github.com/apache/cordova/discussions/435

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org


[GitHub] [cordova] breautek added a comment to the discussion: Cordova-android how to correctly declare an adaptive icon

Posted by "breautek (via GitHub)" <gi...@apache.org>.
GitHub user breautek added a comment to the discussion: Cordova-android how to correctly declare an adaptive icon

If `ldpi` is the only one that doesn't work, it should be safe to omit that resource honestly. I do not think there is any device supported (that runs API 24) that is a low density resolution device.

I believe `anydpi` is used for vectors, since they can scale to any DPI.

If you have a source SVG vector, this is what I did.

1. Open/Create new android studio project (Can only access the Vector Asset Tool from within a project)
2. Via `Resource Manager`, Click on the `+` button
3. Select `Image Asset`, which will open a `Asset Studio` dialog where you can experiment with different settings and preview your icons.

![Screenshot from 2023-09-29 09-54-07](https://github.com/apache/cordova/assets/11200662/8256ca5f-e107-4f28-b59a-a60a3079f0d9)

4. Configure the settings to your preferences.
5. You'll likely need to rescale your SVG, even if your SVG follows the [recommended DP sizes](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive#design-adaptive-icons). If your SVG uses the recommended, then a scale of ~62% seems to work good (judging based on 3 different apps that I've done this with).

The monochrome icon should follow the same thing as your foreground, except it should be binary colour (e.g. only white `#FFFFFF` and black (`#000000`). The colour that gets filled in depends on user settings and whether they are in dark mode or not. 

GitHub link: https://github.com/apache/cordova/discussions/435#discussioncomment-7144327

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org


[GitHub] [cordova] kalwinskidawid added a comment to the discussion: Cordova-android how to correctly declare an adaptive icon

Posted by "kalwinskidawid (via GitHub)" <gi...@apache.org>.
GitHub user kalwinskidawid added a comment to the discussion: Cordova-android how to correctly declare an adaptive icon

After several hours of testing different ways and dozens of compilations I managed to define all the icons correctly (`WOOOOOOHO!`), if anyone would be interested I attach below how it should look like: .
So in config for android platform I did: 
```xml
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
         <application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round"/>
</edit-config>
<!-- colors include <resources><color name ="ic_launcher_background">#FFFFFF</color></resources> -->
<resource-file src="res/android/colors.xml" target="/app/src/main/res/values/colors.xml" />
<!-- import drawable -->
<resource-file src="res/android/drawable/ic_launcher_foreground.xml" target="app/src/main/res/drawable/ic_launcher_foreground.xml" />
<!-- import anydpi -->
<resource-file src="res/android/mipmap/anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
<!-- import rounded icons --> 
<resource-file src="res/android/mipmap/anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
<resource-file src="res/android/mipmap/hdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/mdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/xhdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/xxhdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp" />
<resource-file src="res/android/mipmap/xxxhdpi/ic_launcher_round.webp" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp" />
<!-- create icons -->
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="mdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/mdpi/ic_launcher.webp"/>
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="hdpi"     
            foreground="res/android/drawable/ic_launcher_foreground.xml" src="res/android/mipmap/hdpi/ic_launcher.webp"/>
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="xhdpi"    
            foreground="res/android/drawable/ic_launcher_foreground.xml" src ="res/android/mipmap/xhdpi/ic_launcher.webp" />
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="xxhdpi"   
            foreground="res/android/drawable/ic_launcher_foreground.xml" src ="res/android/mipmap/xxhdpi/ic_launcher.webp" />
<icon monochrome="res/android/drawable/ic_launcher_foreground.xml" background="@color/ic_launcher_background" density="xxxhdpi"  
            foreground="res/android/drawable/ic_launcher_foreground.xml" src ="res/android/mipmap/xxxhdpi/ic_launcher.webp" /> 
```


GitHub link: https://github.com/apache/cordova/discussions/435#discussioncomment-7144712

----
This is an automatically sent email for issues@cordova.apache.org.
To unsubscribe, please send an email to: issues-unsubscribe@cordova.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org