capacitor-assets icon indicating copy to clipboard operation
capacitor-assets copied to clipboard

Scaling option for Android launcher icons

Open imhoffd opened this issue 4 years ago • 12 comments

image

Basically recreate the options under "Scaling" above for devs to provide the same icon as iOS but scale it differently when generating adaptive and legacy icons for Android. Usually, devs will want to use ~66% if they want to use the same icon for iOS and Android.

  • Trim: Yes/No - trims the safe area (--icon-foreground-trim/--icon-background-trim because it's specific for Android icons)
  • Resize: 0-400% - scales the source asset the specified amount (--scale?)

imhoffd avatar May 01 '20 00:05 imhoffd

I'm hitting the same issue as the other guys with the zoomed in icon. Going to do the manual way for the time being but this would be a great addition. +1 from me

mwyld avatar Jun 22 '20 07:06 mwyld

Is there any way to stop the app icon in android from being overly zoomed in?
Can't seem to use cordova-res at all for this and have to do it manually.

madmacc avatar Feb 20 '21 23:02 madmacc

When will this be released?

wizevlad avatar May 07 '21 00:05 wizevlad

Is there any way to stop the app icon in android from being overly zoomed in? Can't seem to use cordova-res at all for this and have to do it manually.

@madmacc, for the Android adaptive icon, here is my workaround:

Assume I have an original icon resource icon.512x512.png. Then add transparent padding for it, make sure the new icon size is 512/0.67=764, so my icon stays in a safe area.

arzyu avatar Jul 20 '21 06:07 arzyu

@arzyu thanks for the advice. If people searching for a command line tool, use imagemagick:

convert icon.png -background none -gravity center -extent 1528x1528 icon2.png

faciliooshell avatar Aug 05 '21 18:08 faciliooshell

Is there any way to stop the app icon in android from being overly zoomed in? Can't seem to use cordova-res at all for this and have to do it manually.

@madmacc, for the Android adaptive icon, here is my workaround:

Assume I have an original icon resource icon.512x512.png. Then add transparent padding for it, make sure the new icon size is 512/0.67=764, so my icon stays in a safe area.

Here needs to be corrected, use the icon background color for padding instead of the transparent color

arzyu avatar Aug 06 '21 05:08 arzyu

image

Basically recreate the options under "Scaling" above for devs to provide the same icon as iOS but scale it differently when generating adaptive and legacy icons for Android. Usually, devs will want to use ~66% if they want to use the same icon for iOS and Android.

  • Trim: Yes/No - trims the safe area (--icon-foreground-trim/--icon-background-trim because it's specific for Android icons)
  • Resize: 0-400% - scales the source asset the specified amount (--scale?)

Where do I find this configuration dialog box?

morsagmon avatar Jul 21 '22 20:07 morsagmon

In Android Studio, right click on "Res" and then click "New" / "Image Asset".

francoisduchemin avatar Aug 30 '22 06:08 francoisduchemin

I don't understand why the icon is scaled. There is no legit reason. The (rounded) icon shapes are always smaller than the source icon. Who had the brilliant idea to zoom the icon? 🤦‍♂️ Adding an option for scaling is not necessary. Just set this option to never scale. Btw. I'm from Cordova and I've never experienced such a problem. Some time ago the Android Icon appearance has been changed. The icon shapes are handled by the Android system. No need for manual rounding etc. At the transition time some legacy icons are rendered smaller with a padding. Is this scaling feature related to this? Weird... why does this not occur with Cordova? I believe there is a configuration for perfect fix. But idk ... I just want to make sure all users see the same icon on any device and OS. I would prefer smaller icons on legacy devices but never crop it. But when I adding a safe padding, the icon appears too small on some devices. Argh... For me scaling down is not really a workaround. It's just a way better than cropped icons. Because the icon is still zoomed in or out on some devices. It reverses the issue. It just looks unprofessional.

twoco avatar Nov 07 '22 16:11 twoco

Same is for iOS imo. Look how all are equal to the source except the higher res once, those are scalled down (padding between "e" and border is higher)...

Bildschirm­foto 2022-11-09 um 09 11 58

muuvmuuv avatar Nov 09 '22 08:11 muuvmuuv

Ok found out that if you define ios/icon.png and android/icon.png yourself, it will override the ios Icon with the source of the Android icon which in my case has a larger padding specific to this case here. Hmm..

muuvmuuv avatar Nov 09 '22 10:11 muuvmuuv

Maybe someone has time to test my draft which adds --android-resize that behaves like the Android Studio resize UI.

muuvmuuv avatar Nov 09 '22 11:11 muuvmuuv