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

[Dicussion] handling with app icon assets with Resizetizer #109

Closed
pictos opened this issue Mar 31, 2023 · 6 comments
Closed

[Dicussion] handling with app icon assets with Resizetizer #109

pictos opened this issue Mar 31, 2023 · 6 comments
Assignees
Labels
kind/bug Something isn't working kind/consumer-experience Categorizes issue or PR as related to improving the experience of consumers

Comments

@pictos
Copy link
Contributor

pictos commented Mar 31, 2023

Some title

It's known that each Platform has its own guidelines for handling app icons. In general, Resizetizer can generate assets for both Idioms (mobile and desktop), but it lacks some intrinsic guidelines, where we can't infer if the user will deliver an asset following the guidelines or not. To better illustrate the scenario will be used Android and Windows.

SVG with padding

The svg used by this first sample is one that respects the guidelines for mobile Idiom. That means the foreground is centered and there's padding, represented by the fact the svg image is smaller than the ViewBox. The assets used are in the zip file below.

icons_with_padding.zip

The dimensions of the Foreground assets are:
svg width="456" height="456"
viewBox="0 0 912 912"

The dimensions of the Background assets are:
svg width="456" height="456"
viewBox="0 0 456 456"

As you can see, we just have to add the padding on the Foreground file.

On mobile we will have the following result:

appIcon_android

As you can see the Uno logo is centered and there's a padding around it.

For Windows the result is different, because of that extra size on ViewBox the Uno logo becomes very smaller, you can see the result at image below:

appIcon_windows

SVG without padding

The svg used by this second sample is one that doesn't respect the guidelines for mobile Idiom. That means the foreground is not centered and there's no padding. The assets used are in the zip file below.

icons_without_padding.zip

The dimensions of the Foreground assets are:
svg width="450" height="450"
viewBox="0 0 50.369617 49.826836"

The dimensions of the Background assets are:
svg width="456" height="456"
viewBox="0 0 456 456"

On mobile we will have the following result:

old_appIcon_android

As you can see the Uno logo fills all the icon space horizontally and vertically. The padding is not respected.

Otherwise, for Windows the result is different, it looks good because the Uno logo is centered and the icon is bigger than before. You can see the result in image below:

old_appIcon_windows

Possible solutions

1. Using the ForegroundScale property

If needed the user can specify the scale of the Foreground asset, increasing or reducing its size. Something like this:

<UnoIcon Include="$(MSBuildThisFileDirectory)Icons\iconapp.svg"
        ForegroundFile="$(MSBuildThisFileDirectory)Icons\appconfig.svg"
        Color="#00000000" 
        ForegroundScale="0.65"/>

This can work for some cases, but there are cases where the Foreground just disappears, and it has to do with the content position inside the svg file, I couldn't find a good metric for that with the svg that I've available, so that will be a more empiric way to test and resize the app icon.

2. During the resizing process, we add a padding to the image

We can infer that assets will not have the padding, so we can add it during the resizing process. And we can do that per platform, which will give us more control over asset generation. The question here is, should this padding be added implicitly or should we add a new property to the UnoIcon item? Something like AddPadding="true", where the padding will be implicitly added by Resizetizer defaults, or per platform, something like, WindowsPadding= "10" and AndroidPadding="20" where the user can specify the padding value for each platform if doesn't specify the value will be 0.

3. Infer that the asset will have a padding

We can infer that the asset will have a padding, so on Desktop idioms we can increase the scale of the generated ForegroundFile, that way the icon will not too small.

4. Use the platform idioms to take care

Instead of trying to apply those paddings on Resizetizer code (which uses Skia to renderer the image) we can use what the platform gives to us, on android, we can adjust the inset property and that will be aligned with their units. So the xml for the adaptive-icon will be:

<?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>

For more context and other points of view, you can see this issue on .NET MAUI repo: dotnet/maui#11295
And this one on Flutter's repo: fluttercommunity/flutter_launcher_icons#96

@pictos
Copy link
Contributor Author

pictos commented Apr 6, 2023

Without padding:

svg file:
Uno_Logo_default.zip

result:
image

With padding:
svg file:
Uno_Logo_with_padding.zip

result:
image

cc: @nickrandolph

BTW I used this webapp to edit the svg files: https://boxy-svg.com/

@nickrandolph nickrandolph added kind/consumer-experience Categorizes issue or PR as related to improving the experience of consumers kind/enhancement New feature or request. kind/bug Something isn't working and removed kind/enhancement New feature or request. labels Apr 12, 2023
@Darsh0307
Copy link

Hello @nickrandolph @pictos
For the tube player project the icon on Android even after using AndroidForegroundScale and properly setting the scale.
We are not able to get the icon coming in the center, If we see it carefully it is a little bit on the left side. I am also attaching the photo for your response.
Screenshot 2023-04-24 at 6 40 39 PM

@pictos
Copy link
Contributor Author

pictos commented Apr 24, 2023

@Darsh0307, from my last interactions, this is a thing on the .svg asset, if you open it on an svg editor you will see it's not centered. So in that case it isn't a Resizetizer issue.

@agneszitte
Copy link
Contributor

@pictos I checked the svg files and seems to me the icon is correctly centered
Here are the files if you want to test it on your side:
TubePlayer app icon svg.zip

@pictos
Copy link
Contributor Author

pictos commented Apr 24, 2023

@agneszitte I'll take a look asap, will see if I've the asset that I made it work before

@pictos
Copy link
Contributor Author

pictos commented Apr 24, 2023

@Darsh0307 what version of Resizetizer are you using?

@pictos pictos closed this as completed Apr 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind/bug Something isn't working kind/consumer-experience Categorizes issue or PR as related to improving the experience of consumers
Projects
None yet
Development

No branches or pull requests

4 participants