Adaptive Icon Foreground needs to have padding otherwise ends up stretching
TonySpegel opened this issue · 72 comments
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.
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
We had the same issue at the moment
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:
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.
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?
@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.
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? :)
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"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?
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.
I just wanted to show the “solution” I adopted waiting for the bug fix.
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 :)
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.
@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.
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.
You just need to make it ~70% original size for adaptive icons. Android Studio proof:
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.
@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?
@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.
This issue is still happening with v0.7.5
Yes. This issue is still happening with v0.7.5
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.
What should be minimum icon dimensions which put in to the asests directory?
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.
Any plans to merge this?
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.
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
This is still an issue, and @knyghtryda PR is still not merged. Can we make this happen please?
It is working for me like this:
flutter_icons:
image_path: "assets/icon/icon.png"
android: "launcher_icon"
assets:
- assets/icon/icon.png
why is it still not merged?
Now we are in March 2021 and the issue is still exist.
The issue still exists....
This issue still.
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.
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.
This is still an issue
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"
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.
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
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
Please , any updates ?
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!!!
issue not solve December 21
issue not solve December 21
Yeah, but that was yesterday. Today... oh well, today still not fixed
Are there any news on this?
And the problem is that on round Android icon this plugin produces square inside(
This is still not fixed...
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.
awesome support! (said no one)
awesome support! (said no one)
so, which are the minimum?
that was irony
Sadly, I have the same issue too
I'm facing sabe problem but only on list of apps
OK on docker
But problem on list of apps
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.
What happened to this package? Not a single commit has been made for almost a year.
Problem still exist !
Any updates on this? It has been almost 3.5 years, and this issue is still there!
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.
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 found a solution:
After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/
ic_launcher.xmlbyandroid: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
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.
I found a solution:
After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/
ic_launcher.xmlbyandroid: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.
Hope this help fix android adaptive icon padding problems. Tested with Android/IOS/MacOS/Web.
For other platforms, we can use IOS logo.
I found a solution:
After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/ic_launcher.xmlbyandroid: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
I found a solution:
After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/
ic_launcher.xmlbyandroid: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! ❤️🔥
I found a solution:
After generating your icon with adaptive_icon_foreground then modify the file: android/.../res/mipmap-anydpi-v26/
ic_launcher.xmlbyandroid: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.
According to Google Adaptive Icons, you need a safe area with about 33% padding, while background could fill the whole area
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?
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.
let's fix it !
This issue was open more than 5 years ago.
- Is this repo abandoned?
- What's the problem to fix this?
- Any other option out there?