search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.29k stars 3.43k forks source link

Icongenie: Android icons aren't properly generated following adaptive icons guidelines #17045

Open IlCallo opened 1 month ago

IlCallo commented 1 month ago

What happened?

In a Quasar project using Capacitor and supporting Android, I generate the required icons via icongenie The resulting icons looked nice when viewed by themselves, but when opening src-capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml the preview looked wrong, and displayed icons after installing the app them were too

Seems like this is a problem with the new Adaptive Icons used by newer Android versions

Images of generated splashscreens and icons image image

Image of how the launcher preview and how it actually looked when installed image

What did you expect to happen?

Icongenie to correctly generate the icons

Reproduction URL

https://stackblitz.com/edit/quasarframework-mgd9kd

How to reproduce?

  1. Generate a Quasar project
  2. Add Capacitor mode
  3. Execute pnpm dlx @quasar/icongenie g -i src/assets/favicon.png
  4. Open src-capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml in Android Studio and check out the preview

StackBlitz apparently won't support running npx @quasar/icongenie, so it wasn't able to generate the icons as explained here

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Icon Genie CLI (@quasar/icongenie), Capacitor Mode

Platforms/Browsers

Android

Quasar info output

No response

Relevant log output

No response

Additional context

The problem here could be either in Capacitor scaffolded templates for Android AND/OR Icongenie generation

Possibly it could be fixed by re-generating files from Android Studio and updating Capacitor mode template files

It seems like this is related to latest icon specs changes, in particular about Adaptive Icons, or Android 13/14 new files: https://developer.android.com/develop/ui/views/launch/icon_design_adaptive

I initially workaround the problem by using this trick: https://stackoverflow.com/questions/69147332/android-adaptive-icon-foreground-always-too-big

Changing

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
</adaptive-icon>

into

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground>
      <inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="20%" />
    </foreground>
</adaptive-icon>

but results were suboptimal

Then I resorted in using Android Studio own Image Asset Studio as explained here: https://developer.android.com/studio/write/create-app-icons#create-adaptive

That re-generated many files in my project, especially ic_launcher_background.xml and this line into ic_launcher.xml and ic_launcher_round.xml

- <background android:drawable="@color/ic_launcher_background"/>
+ <background android:drawable="@drawable/ic_launcher_background"/>

Some more resources: