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: #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 < [email protected]>:

…

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 ***@***.***/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 <#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?

[erperejildo]

awesome support! (said no one)

so, which are the minimum?

that was irony

[Binozo]

Sadly, I have the same issue too

[scorninpc]

I'm facing sabe problem but only on list of apps

OK on docker

But problem on list of apps

[galaxiarmy]

https://www.youtube.com/watch?v=eMHbgIgJyUQ

[scorninpc]

https://www.youtube.com/watch?v=eMHbgIgJyUQ

Ok, but sorry. If we open a issue for the plugin works, that's because we don't want to do this manually. This plugin has a lot potential.

[ivirtex]

What happened to this package? Not a single commit has been made for almost a year.

[FiKa404]

Problem still exist !

[masteradit]

Any updates on this? It has been almost 3.5 years, and this issue is still there!

[mathiasgodwin]

I'm facing this issue as well. With my observation, I feel this issue is a bit difficult to deal with, it couldn't have been easy for them to neglect our complaint here, even @felangel said something like this about a year ago while considering this on very_good_cli. I also think the package maintainers are finding it hard to tell us to find a workaround for the time being while they're probably working on it.

[Kianto]

I found a solution:

After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%"
(Open Android module to review the image).
To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: https://medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e

[julienripet]

I found a solution:

After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%" (Open Android module to review the image). To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e

Worked great, thanks for the solution

[rafaellop]

There should be a parameter in pubspec.yaml to specify the inset value for the inset as in the @Kianto example. Now each time I regenerate icons using the CLI the changes to the android/.../res/mipmap-anydpi-v26/ic_launcher.xml are lost.

[kohj1018]

I found a solution:

After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%" (Open Android module to review the image). To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: https://medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e

This really worked for me.

Everyone seems to be able to use this solution.
For me, 28% was appropriate.
Thank you very much for your solution.

[theachoem]

Hope this help fix android adaptive icon padding problems. Tested with Android/IOS/MacOS/Web.

For other platforms, we can use IOS logo.

[alvincentino]

I found a solution:
After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%" (Open Android module to review the image). To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e

Worked great, thanks for the solution

This worked for me also, for me it was 24 for the insets. thanks

[sha3rawi33]

I found a solution:

After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%" (Open Android module to review the image). To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: https://medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e

Thanks, worked like a charm! ❤️‍🔥

[legenduzo]

I found a solution:

After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%" (Open Android module to review the image). To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: https://medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e

I had the error:
Android inset not allowed here
with this solution.

I think the best workaround in the meantime is to specify your dimensions as shown in @theachoem's example.

[amorenew]

According to Google Adaptive Icons, you need a safe area with about 33% padding, while background could fill the whole area

[GentiShtjefni]

I have an issue that in android shows the icon with some white background but in ios it shows the icon with the white background, like android, but also another black background

I only want the white background like in android. Any solutions?

[InkyGoose]

I found a solution. The design specifications for the Google icon provide a grid for creating icons. I created a 1024x1024 canvas and filled the entire canvas with this grid (I increased the width of the lines for clarity). Using this canvas as the foreground and a blank canvas as the background to generate icons, the results can be seen as follows.


Clearly, the visible part of the icon is the inscribed square of the larger circle. Therefore, when creating an icon, as long as it is placed within the inscribed square, the problem of the icon being too large can be avoided. In other words, leaving enough blank space around the edges can solve the problem, and how much space to leave can be determined by the grid.

[lehoangbaochung]

let's fix it !

[erperejildo]

This issue was opened more than 5 years ago.

• Is this repo abandoned?
• What's the problem to fix this?
• Any other option out there?

[LOCKEDFILE]

After reading @Kianto comment, I requested a PR for those who find it bothersome to change it manually every time. The default value for the inset is 16.

PR #563
or

  flutter_launcher_icons: 
    git: https://github.com/LOCKEDFILE/flutter_launcher_icons.git

how to use:

flutter_launcher_icons:
  android: true
  ios: true
  remove_alpha_ios: true
  image_path: "assets/app_icon/icon.png"
  adaptive_icon_background: "assets/app_icon/adaptive_icon_background.png"
  adaptive_icon_foreground: "assets/app_icon/adaptive_icon_foreground.png"
  adaptive_icon_foreground_inset: 16  # default value is 16

I found a solution:

After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xml by android:inset="16%" (Open Android module to review the image). To me 16% is ok, you can check this number and change it.

<?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="@drawable/ic_launcher_foreground"
      android:inset="16%" />
  </foreground>
</adaptive-icon>

Ref: https://medium.com/androiddevelopers/implementing-adaptive-icons-1e4d1795470e