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

feat: Added support for generating android adaptive icons #5667

Merged
merged 8 commits into from Mar 25, 2023

Conversation

CatchABus
Copy link
Contributor

@CatchABus CatchABus commented May 3, 2022

PR Checklist

What is the current behavior?

Command ns resources generate icons <source image path> cannot generate app launcher icons ever since the adaptive icons addition (ic_launcher). Right now, developers have no ways to generate android launcher icons apart from using Android Studio.

What is the new behavior?

Command ns resources generate icons <source image path> will generate all needed icons.

According to google, adaptive icons have few requirements:

  • Both layers must be sized at 108 x 108 dp.
  • 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.

In order to comply with these requirements, I updated image-definitions.json using the following concept:

  1. Source image will also be used to create an ic_launcher_foreground resized to 72 dp converted to pixels.
  2. A new resize operation called outerScale was added to CLI. Using this operation, we can scale the outer part of the image (it's a bottom layer actually), which will become an opaque layer using hex #00000000.
  3. Scale is set to 1.5x to resize image (but not the inner content) to pixels that equal to 108dp according to device dpi. (72dp x 1.5 = 108dp)

Fixes/Implements/Closes #5571.

@vallemar
Copy link
Contributor

vallemar commented Aug 11, 2022

this PR is quite useful, now the icon generation is broken and it is quite annoying to execute the command and not see the change in the application

@CatchABus
Copy link
Contributor Author

CatchABus commented Aug 13, 2022

@NathanWalker I know there's been a discussion about a different approach but perhaps we could give this one a try until then.

This PR is trying to follow the principles described in this guide: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

These new dimensions equal to size of inner content of foreground layer which has to be 72dp.
New values inside image-definitions file make sense according to "dp to pixels" conversion board:
image

Multiplying those by 1.5 during asset generation gives us the right pixels for both layers size that equal to 108dp.
Inner icon will maintain its size of 72dp.

An example of new android asset definitions:

{
	"width": 144,
	"height": 144,
	"directory": "drawable-xhdpi",
	"filename": "ic_launcher_foreground.png",
	"resizeOperation": "outerScale",
	"scale": "1.5x"
}

It's using the existing asset generation API with the addition of new outerScale type of resizeOperation.

@CatchABus CatchABus changed the title feat: Updated ns resources generate icons command to work with latest app templates feat: Added support for generating android adaptive icons Aug 29, 2022
@CatchABus
Copy link
Contributor Author

CatchABus commented Aug 29, 2022

@NathanWalker I have applied my final changes on this one.

Few details regarding android icons.

CLI did not generate icons unless it found old icons with identical names in file system. This is actually a feature that was introduced here: 075686c
This was really confusing and frustrating, and was the reason for all open tickets to begin with.
I took the liberty and removed that check so that asset definitions are always generated but if we still need it I can add it back.

Regarding the output content, it generates simple icons whose rendering is similar to the one of the 'legacy icons' used in old app templates (icon.png).
If a developer wants to create more complex adaptive icons, Android Studio is still the preferred choice.

@CatchABus
Copy link
Contributor Author

this PR is quite useful, now the icon generation is broken and it is quite annoying to execute the command and not see the change in the application

You can test and post feedback if you like using my branch: https://github.com/CatchABus/nativescript-cli/tree/android-generate-icons-fix
It will need building TS and using command from repo bin directory.

@bretep
Copy link

bretep commented Dec 15, 2022

Hi! I'm also running into this issue. Is there a plan to release these fixes?

@rigor789 rigor789 merged commit 73694bd into NativeScript:main Mar 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ns resources generate icons - cli script update needed to support latest Android vector graphic launchers.
4 participants