Adaptive Icon Foreground needs to have padding otherwise ends up stretching

[TonySpegel]

I'm having trouble getting the setup right: Using the following settings:

flutter_icons:
  android: "launcher_icon"
  image_path: "lib/res/pizza.png"
  adaptive_icon_background: "#ffe082"
  adaptive_icon_foreground: "lib/res/pizza.png"

Produces this Icon

This isn't the desired output because this setting:

flutter_icons:
  android: "launcher_icon"
  image_path: "lib/res/pizza.png"

produces:

I've found a related issue here: https://github.com/fluttercommunity/flutter_launcher_icons/issues/79

Anyway setting a adaptive_icon_background results in a way too big Icon the desired output is like the second Icon but with a background. I'm not sure if I should pick one of the images produced by this tool or choosing the source image located in: lib/res/pizza.png. Choosing a produced image just results in the same way too big Icon (or a blurry one choosing a lower resolution)

How do I produce an Icon as seen like in the second image but with a background?

Oh and also: Removing settings as I did here, so deleting adaptive_icon_background & adaptive_icon_foreground and rerunning the tools does nothing, the settings generated are still there but should be removed.

[taliptako]

I had the same issue right now and figured out that in the example foreground image there are paddings before exact icon as seen below They are transparent padding but they affect how an image will be aligned on background image So if you add some padding to your foreground image like this it will be fine. But lets ask the author why this is like that @MarkOSullivan94 Are you aware of this situation ? if not why we need to add paddings like that

[enricobenedos]

We had the same issue at the moment

[gregorwinkler]

I can confirm that the same is happening to me. This should be the result:

And that is the actual app icon on Android, when using adaptive foreground and background:

[MarkOSullivan94]

Thanks for reporting this!

The best work around is to add the padding like the example image for now until a solution can be found to handle it better.

[jfrsbg]

I'm getting the same issue by now. Other thing is that once you set adaptive_icon_background and adaptive_icon_foreground you can't change your icon anymore because the commands do not update the icons and even not overwrite them. By now i have double issues, plus this that i described. I can't test the workarroud "add the padding into icon" because i cant update the icon anymore. is there a way to make a "flutter clean icons" in my project for me at least test this solution?

[permadart]

@jfrsbg Just go to android > app > src > main > res and delete all the drawable-dpi folders (except for the plain drawable folder), and the mipmap-any folder. Those folders contain the files for the adaptive icon, and without them Android just uses the regular icon.

[gisinator]

Unfortunately I'm facing the same issue. Adding a padding, exactly like in the example, didnt solve the problem. It seems the foreground element gets cut out and fills 100% of height and width of the final icon. Do you guys have any new workarounds? :)

[enricobenedos]

At the moment I'm using this configuration sucessfully

flutter_icons:

  ios: true
  android: "launcher_icon"
  image_path: "assets/launcher/icon.png"
  #image_path_ios: "assets/launcher/icon.png"
  #image_path_android: "assets/launcher/icon.png"
  #adaptive_icon_background: "assets/launcher/background.png"
  #adaptive_icon_foreground: "assets/launcher/foreground.png"

[gisinator]

So basically you're not using the adaptive part at all, am I right? How does your original icon.png look like? Did you round the corners manually?

[enricobenedos]

Yes you are right, I am not using the adaptive part. Unfortunately I cannot share the apps icons with you because they are private projects. But I have simply produced them using this guide: Add Launcher Icon - Medium. The icons are simply 900x900 without rounded corners. Very similar to @taliptako example.

[TonySpegel]

Is this relevant to the Bug I have opened?

Am Sa., 27. Juli 2019 um 11:23 Uhr schrieb enricobenedos < notifications@github.com>:

Yes you are right, I am not using the adaptive part. Unfortunately I cannot share the apps icons with you because they are private projects. But I have simply produced them using this guide: Add Launcher Icon - Medium https://medium.com/@psyanite/how-to-add-app-launcher-icons-in-flutter-bd92b0e0873a. The icons are simply 900x900 without rounded corners. Very similar to @taliptako https://github.com/taliptako example.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fluttercommunity/flutter_launcher_icons/issues/96?email_source=notifications&email_token=AAIXVKQXMXBM76WCSIWW6CTQBQHYTA5CNFSM4HJUUGKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD26H7GA#issuecomment-515669912, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIXVKXRY7SFZFR3Q64TW3DQBQHYTANCNFSM4HJUUGKA .

[enricobenedos]

I just wanted to show the “solution” I adopted waiting for the bug fix.

[TonySpegel]

Sorry, did not want to come across as rude :) glad that you provided a Solution. I think we've got a couple of workarounds here which is good. Let's keep this open until it really is fixed :)

[repentsinner]

I found that adding a reticle to force the resizing algorithm to not trim framing/padding transparency helped keep the icon foreground image centered/sized correctly. While they do remain in the drawable/mipmap files, they should get trimmed away by the adaptive mechanism. The samples here have a larger reticle to illustrate the technique and to help me get the sizing figured out; in the attached template I reduced it to a smaller framing angle at the top left and bottom right.

I started with an arbitrary 1024x1024 workspace and experimented until the results kind of matched what I see on my phone (Pixel 2, Android 9). I haven't tried other devices that may use squircles or other oddball adaptive icon masks.

I have no idea if any of the dimensions are right for the way this is being used, but at least the ratio is correct and will keep us going until the issue is resolved. Some template values in the documentation would go a long way to making this make more sense.

This zip file is a .psd template that implements this concept. After positioning your artwork, disable the background shape and field layers and export both the reticle and icon asset layers combined to get a working adaptive_icon_foreground asset.

flutter_launcher_icons.zip

[jeffsieu]

@taliptako @MarkOSullivan94 According to Android Developer guidelines:

The inner 72 x 72 dp of the icon appears within the masked viewport. The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.

The reason why the foreground image seems to be cropped is because the adaptive icon mechanism makes use of the outer margins of the image to display parallax effects (i.e. upon dragging). Only 66% of the original image will be shown in the final, cropped version of the app icon.

A useful illustration from a related Medium post:

A possible workaround will be to add an optional parameter adaptive_icon_padding: true/false in pubspec.yaml to add padding to the foreground image to ensure it's within the safe zone.

[ghost]

I'm having this same issue. I've made a custom version of my android icon with no background and added padding to all sides. Still is stretched and it doesn't look good.

[bernaferrari]

You just need to make it ~70% original size for adaptive icons. Android Studio proof:

[k00na]

I can confirm that @bernaferrari answer helped me as well.

You must open the android folder of your flutter project with Android Studio, and open the menu as show bellow with the right mouse click on your the left pallate in AS and select New->Image Asset

Then do the setup for your launcher icon in AS... I've set mine foreground icon size to 66% and now it fits perfectly fine.

[talamaska]

@k00na @MarkOSullivan94 @bernaferrari So, does this plugin actually tries to replicate what Android Studio is doing? And if it does, do we want full support of all the little settings on that screen as setting in the pubspec? And I think I want them, it that case should it still be a CLI build runner or A full blown desktop flutter app for generating app icons? Cause I feel having a preview and a slider for the scaling are necessairy. Just thinking out loud here. Maybe another thread for this?

[elmariocarlos]

@MarkOSullivan94 so any news on when the plugin might get the necesary accomodations to get the expected results? This plugin originally helped us a lot, but after the adaptive icon and foreground requirement from Google, this extra step seems like a pedal backwards.

[damiafuentes]

This issue is still happening with v0.7.5

[zxl777]

Yes. This issue is still happening with v0.7.5

[knyghtryda]

I just created a PR #181 to take care of this issue, at least for the foreground image (which was my use case). Give it a go on your own fork and see what you think. I'll add background image support shortly.

[hakankucuk]

What should be minimum icon dimensions which put in to the asests directory?

[knyghtryda]

What should be minimum icon dimensions which put in to the asests directory?

if you want zero upscaling across all platforms then use 1024x1024, as the largest icon used will be the iOS app store icon at that size. FYI play store icons are 512x512.

[0x7061]

Any plans to merge this?

[brianbhsu]

This issue should be pinned in the repo. If you skip setting adaptive_icon_background and adaptive_icon_foreground for an android app, it can lead to unintended effects such as the app icon appearing different (different background colors) in the overview screen vs the home screen. And in order to use the adaptive icon settings, this issue I would say is high priority since it significantly affects how the icon is displayed to the end user.

[edisonywh]

Thanks @knyghtryda, tested it out and works great! This issue has been such a headache, would be great for the team to merge this.

EDIT: Do you know if this affects the notification icon too? It seems like it's shrunk too, but I'm not certain

[AlexHartford]

This is still an issue, and @knyghtryda PR is still not merged. Can we make this happen please?

[als409]

It is working for me like this:

flutter_icons: image_path: "assets/icon/icon.png" android: "launcher_icon"

assets:

• assets/icon/icon.png

[tirth-stasis]

why is it still not merged?

[mdarif]

Now we are in March 2021 and the issue is still exist.

[hayatbangash55]

The issue still exists....

[DevDorrejo]

This issue still.

[fabiancrx]

The issue still exists because none of us has fixed it, this is OSS for the good and the bad, and complaining won't fix it.

[Aulig]

The issue still exists because none of us has fixed it, this is OSS for the good and the bad, and complaining won't fix it.

Totally agree. However, there is a PR #181 which is just waiting to get merged. Anyone who urgently needs this can just use that version.

[PrimeAnteneh]

This is still an issue

[blarz-bix]

UPDATED

To fix the centered logo issue I followed the Android adaptative icon guidelines. So I created a logo with the next specs.

First try

I just created an image of 900x900 and it worked only with this. I tried with a smaller image and it didn't work.

Version: flutter_launcher_icons: "^0.9.0"

flutter_icons:
  android: true
  ios: true
  image_path: "assets/images/launcher/undebtme-logo.png"
  adaptive_icon_background: "assets/images/launcher/background.png" 
  adaptive_icon_foreground: "assets/images/launcher/undebtme-logo.png" 

[DevDorrejo]

I just created an image of 900x900 and it worked only with this. I tried with a smaller image and it didn't work.

Version: flutter_launcher_icons: "^0.9.0"

flutter_icons:
  android: true
  ios: true
  image_path: "assets/images/launcher/undebtme-logo.png"
  adaptive_icon_background: "assets/images/launcher/background.png" 
  adaptive_icon_foreground: "assets/images/launcher/undebtme-logo.png" 

looks fine, but is not centered, we need an improve on flutter launcher icon.

[erperejildo]

please, we need this fixed. The main idea of this package is creating icons and right now the icon is not created properly. This issue was created more than 2 years ago

[elmariocarlos]

+1 @MarkOSullivan94

[elmariocarlos]

The issue still exists because none of us has fixed it, this is OSS for the good and the bad, and complaining won't fix it.

Totally agree. However, there is a PR #181 which is just waiting to get merged. Anyone who urgently needs this can just use that version.

Easy workwaround? @MarkOSullivan94

[ariefwijaya]

Please , any updates ?

[pabloherrero1986]

image_path: "assets/images/launcher/undebtme-logo.png" adaptive_icon_background: "assets/images/launcher/background.png" adaptive_icon_foreground: "assets/images/launcher/undebtme-logo.png"

This works for me !! Thanks, @DevDorrejo!!!

[TuupleMasterAndroid]

issue not solve December 21

[erperejildo]

issue not solve December 21

Yeah, but that was yesterday. Today... oh well, today still not fixed

[adminant]

Are there any news on this? And the problem is that on round Android icon this plugin produces square inside(

[MilanObrenovic]

This is still not fixed...

[daniel-hopkins]

I created a psd template that has guides for creating the adaptive icon. What I did was to save my logo layer a transparent png, and save the clean background separately. It loads well onto android for me, but would love if someone else wants to try it out.

adaptive_icon_background: "dev_assets/my_icon_900x900_background.png"
adaptive_icon_foreground: "dev_assets/my_icon_900x900.png"

It certainly doesn't solve the issue, but at least provides a workaround.

[erperejildo]

awesome support! (said no one)