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

Adaptative Icons Improvements #117

Merged
merged 2 commits into from
Mar 3, 2020

Conversation

andreban
Copy link
Member

@andreban andreban commented Feb 29, 2020

  • Background for transparent icons is white.
  • Moves icon to the foreground layer, instead of background.
  • Adds android.useAndroidX=true to build.gradle to make importing the project into Android Studio more seamless (unrelated to the icon).

Closes #112

- Background for transparent icons is white.
- Moves icon to the foreground layer, instead of background.

Closes GoogleChromeLabs#112
Closes GoogleChromeLabs#115
@andreban
Copy link
Member Author

@NotWoods would mind taking a quick look?

@andreban andreban requested a review from PEConn February 29, 2020 13:48
Copy link
Contributor

@NotWoods NotWoods left a comment

Choose a reason for hiding this comment

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

These were intentional choices to align with the spec, where Chrome deviates slightly.

  • Maskable icons should not be transparent at all. I think using black to indicate this is fine, perhaps an additional warning can be added.

  • Maskable icons don't fill 100% of the icon area, so they should be placed on the background layer to reduce parallax. (Admittedly this part was just in discussions by the spec authors and not in the spec itself.)

@FluorescentHallucinogen
Copy link
Contributor

I believe we should align with WebAPK behavior (fill the transparent space with white color, not black).

See also my #112 (comment) and #112 (comment).

The first is WebAPK, the second is TWA:

webapk-twa

@andreban
Copy link
Member Author

andreban commented Mar 2, 2020

Thanks for the input, @NotWoods

Regarding the white background:

The spec does advise against use transparent icons for the maskable icon, but does provide guidance on how user agents should handle it:

If the icon contains transparent pixels, the user agent MUST composite the icon onto a solid color (eg. white) of the user agent's choice.

It does seem that we could switch the fill color from black to white and remain true to the spec. This would also replicate the behaviour for WebAPKs and the Android Platform in general.

Regarding the parallax effect

Would you have more details on that discussion? If this is likely to make it to the spec, it may be worth keeping it as it is. Otherwise, I think making it compatible with WebAPKs and with what Android expects as a platform worth it. I'll double check how it works in WebAPKs and understand the design decisions on their side too.

@NotWoods
Copy link
Contributor

NotWoods commented Mar 2, 2020

@andreban andreban changed the title Adaptative Icons Bugfixes Adaptative Icons Improvements Mar 3, 2020
- Discussed with the WebAPK team and this is being considered to
be changed in the WebAPK side. Keeping the current llama-pack
behaviour.
@andreban
Copy link
Member Author

andreban commented Mar 3, 2020

I have discussed with the WebAPK team and reverted the icon back to the background layer, as it's currently being considered to be changed there.

@andreban andreban merged commit 4a80a90 into GoogleChromeLabs:master Mar 3, 2020
@andreban andreban added bug Something isn't working enhancement New feature or request and removed bug Something isn't working labels Mar 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Icons with transparent background are displayed with black background
4 participants