Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Adaptive Icons question
Started by ammar71 Feb 05 2020 02:29 PM

3 replies to this topic
adaptive icons

Best Answer Aarbron , 05 February 2020 - 02:40 PM

You need to leave space around ic_launcher_foreground.png only.

 

For the exact space I just followed corona sdk icons in sample code.

 

I would like to know other people's approach though.

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ammar71

[GLOBAL: userInfoPane.html]
ammar71
  • Enthusiast

  • 98 posts
  • Corona SDK

Hi all,

 

I read the page about adaptive icons and I am a bit confused about the size of the icos.

https://docs.coronalabs.com/guide/distribution/androidResources/

 

In the "AndroidResources\res\" folder there are few sub folders (mipmap-*) and in each folder there are 2 icons.

1- ic_launcher.png      (48x48, 72x72, 96x96, 144x144, 192x192)

2- ic_launcher_foreground.png    (108x108,162x162,216x216,324x324,432x432)

 

Do I fill both with my icon graphics to the edge or do I need to leave some space around my icon in both?

If I need to leave a space around it, how many pixels do I need to leave?

 

Thanks.

 

 

 



[TOPIC: post.html]
#2

Aarbron

[GLOBAL: userInfoPane.html]
Aarbron
  • Contributor

  • 224 posts
  • Corona SDK

  Best Answer

You need to leave space around ic_launcher_foreground.png only.

 

For the exact space I just followed corona sdk icons in sample code.

 

I would like to know other people's approach though.


  • ammar71 likes this

[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,697 posts
  • Enterprise

See this page: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

 

Look at the second animated GIF. It shows the background of the icon. Then it shows the foreground. But the important thing is the third layer, a mask which is applied by the device manufacturer. On some devices you might get round icons, on some rounded rectangles. Who knows, someone might some day use a triangle. 

 

The point is the only part of your icon that's going to show is what is in the hole in the mask. If you extend your icon imagery out side of the mask it will be cut off.  So it's best to have a background that fills the max area and a foreground that's about half the space.

 

Rob


  • ammar71 likes this

[TOPIC: post.html]
#4

ammar71

[GLOBAL: userInfoPane.html]
ammar71
  • Enthusiast

  • 98 posts
  • Corona SDK

Thanks @Aarbron and @Rob

 

Will follow Aarbron's suggestion.


  • Aarbron likes this


[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: adaptive icons