Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adaptive Icon Scaling #181

Open
wants to merge 19 commits into
base: master
Choose a base branch
from

Conversation

knyghtryda
Copy link

Since the adaptive icons seems to have extra padding when compared to their iOS counter parts I added a new scaling factor parameter so that the image for the adaptive icon can be scaled before finally scaling down to icon size. This scaling is done by enlarging the canvas, not scaling down the original image, so image quality should in theory be better. The two new yaml parameters are:

adaptive_icon_foreground_scale_factor: 0.66
adaptive_icon_foreground_scale_fill_color: "#FFFFFFFF" #probably not needed as default is fill transparent

Adding background image scaling will be next.

@Aulig
Copy link

Aulig commented Nov 13, 2020

Just tested it and seems to be working well for my use case too. @MarkOSullivan94 it'd be great if this could get merged, many people in the issue #96 would appreciate it :)

Or if you could let us know what's stopping it from getting merged?

@knyghtryda knyghtryda changed the title Scaling Adaptive Icon Scaling Dec 6, 2020
@Aulig
Copy link

Aulig commented Jan 21, 2021

After more extensive use I think I've found a small bug. When using a non-square image as adaptive_icon_foreground, the outputted ic_launcher_foreground in the drawable folders is off-centered.

I used this configuration:

  android: true
  adaptive_icon_background: "#000000"
  adaptive_icon_foreground: "img.png"
  adaptive_icon_foreground_scale_factor: 0.66
  adaptive_icon_foreground_scale_fill_color: "#000000"

img.png is 1240x877.

Actual result (red border added for easier visibility):
issue-actual

Expected result (red border added for easier visibility):
issue-expected

I've achieved the actual result by manually padding img.png with a transparent border to make sure it is square (1240x1240)

Let me know if I'm doing anything wrong or if this is actually a bug.

Thanks for this great PR!

@tirth-stasis
Copy link

Any updates on this? @MarkOSullivan94

@dsgriffin
Copy link

dsgriffin commented Feb 17, 2021

few open issues mentioning this PR/adaptive icon bug (#96, #226), anyone able to take a look? @slightfoot

@knyghtryda
Copy link
Author

knyghtryda commented Feb 23, 2021

After more extensive use I think I've found a small bug. When using a non-square image as adaptive_icon_foreground, the outputted ic_launcher_foreground in the drawable folders is off-centered.

I used this configuration:

  android: true
  adaptive_icon_background: "#000000"
  adaptive_icon_foreground: "img.png"
  adaptive_icon_foreground_scale_factor: 0.66
  adaptive_icon_foreground_scale_fill_color: "#000000"

img.png is 1240x877.

Actual result (red border added for easier visibility):
issue-actual

Expected result (red border added for easier visibility):
issue-expected

I've achieved the actual result by manually padding img.png with a transparent border to make sure it is square (1240x1240)

Let me know if I'm doing anything wrong or if this is actually a bug.

Thanks for this great PR!

@Aulig I do believe all icons (including adaptive) expect square input files. I would put your image on a square canvas before using it to generate the adaptive icon.

@Aulig
Copy link

Aulig commented Feb 23, 2021

After more extensive use I think I've found a small bug. When using a non-square image as adaptive_icon_foreground, the outputted ic_launcher_foreground in the drawable folders is off-centered.
I used this configuration:

  android: true
  adaptive_icon_background: "#000000"
  adaptive_icon_foreground: "img.png"
  adaptive_icon_foreground_scale_factor: 0.66
  adaptive_icon_foreground_scale_fill_color: "#000000"

img.png is 1240x877.
Actual result (red border added for easier visibility):
issue-actual
Expected result (red border added for easier visibility):
issue-expected
I've achieved the actual result by manually padding img.png with a transparent border to make sure it is square (1240x1240)
Let me know if I'm doing anything wrong or if this is actually a bug.
Thanks for this great PR!

@Aulig I do believe all icons (including adaptive) expect square input files. I would put your image on a square canvas before using it to generate the adaptive icon.

Yea, that's what I'm doing now :) Thanks for the info - in that case it makes sense that this PR doesn't handle it separately.

@knyghtryda
Copy link
Author

knyghtryda commented Feb 24, 2021

Yea, that's what I'm doing now :) Thanks for the info - in that case it makes sense that this PR doesn't handle it separately.

@Aulig Now, to be fair, there was a bug in my code for the scaling that caused non-square photos to be scaled incorrectly 😛 I am now enforcing a square canvas just to make everyone's life easier 😃

@tirth-stasis
Copy link

It's May 2021 and it's still not merged. :D

Copy link
Contributor

@SimonIT SimonIT left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works like a charm.
I merged master into this branch in my own fork if someone want's to use an up-to-date version or @MarkOSullivan94 want's to merge it without the conflicts

@tirth-stasis
Copy link

@knyghtryda 🎉 🎉

@MarkOSullivan94
Copy link
Collaborator

@knyghtryda could you please provide an image which has issues with the scaling? 🙂

It'll make it easy for me to test this and see the before vs after.

Definitely should provide some kind of info on the README so if people are running into similar issues they can make use of the changes you have implemented here 🥳

@AdamBridges
Copy link

AdamBridges commented Aug 22, 2021

@knyghtryda could you please provide an image which has issues with the scaling? 🙂

It'll make it easy for me to test this and see the before vs after.

Definitely should provide some kind of info on the README so if people are running into similar issues they can make use of the changes you have implemented here 🥳

@MarkOSullivan94 I'm getting the same result after adding the scale factor with the following image not scaling for me:

AchooLogo_foreground_512x512

Current configuration:

flutter_icons:
android: true
ios: true
image_path: "assets/images/logo_192x192.png"
adaptive_icon_background: "#275DAD"
adaptive_icon_foreground: "assets/images/AchooLogo_foreground_512x512.png"
adaptive_icon_foreground_scale_factor: 0.66
adaptive_icon_foreground_scale_fill_color: "#000000"

Result:

Screenshot_1629672750

@devj3ns
Copy link

devj3ns commented Jan 17, 2022

Hey @MarkOSullivan94, I hope you are doing well.

Is there a chance this PR gets merged in the near future? :)

There are many open Issues which are related to this PR.

@bradintheusa
Copy link

I'll start taking a look at this.

@bradintheusa bradintheusa self-assigned this Jun 12, 2022
@MarkOSullivan94 MarkOSullivan94 force-pushed the master branch 2 times, most recently from 41b290f to b8ad042 Compare August 7, 2022 04:47
@RatakondalaArun
Copy link
Contributor

@MarkOSullivan94 we may need to add this to our roadmap

workaround #181 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.