Android ion icon is not the same original size / ratio

Question

I created a simple icon 1024x1024 icon.png under resources/ :

Then I launch ionic resources, and all the icons I need are created in resources/android/icon/

My config.xml changes to this:

 <platform name="android"> <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/> <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/> <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/> <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/> <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/> <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/> <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/> <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/> <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/> </platform> <icon src="resources/android/icon/drawable-xhdpi-icon.png"/> 

Now, if I look at the application icon after installing it, it looks like the figure in the middle is larger and the ratio is not respected:

As you can see, the little red ball has become a huge ball, this is something that I do not understand, can someone explain this to me?

Answer 1

(I can not leave comments, so I will do this by replying)

In appearance, you are using some kind of icon. (Since all the icons have the same shaped background with the original icon on top). I assume that the icon set eliminates most of the transparent space surrounding your icon (and everyone else) in order to fit the same icon design.

You can easily find out if this is true:

• disable the package icon (the red circle should be a normal size with the surrounding space)

• creating an icon with a border on the sides of the icon, so it probably won’t crop the spaces.

If this is really an icon that removes the surrounding spaces, you can try to have a very light (99% transparent) layer as the background. This will prevent the gaps in iconpack from being filled, so it will not scale the circle.

I would not recommend this, although most people will not use the icon pack, and then the icon may look a little strange on other devices.

Answer 2

I think this is because of the ionic resources command. It will read the image and automatically crop the image depending on the size of each screen.

Ionic Resource Site said that no rounded corners maybe it is for opaque pixels outside the main image, or it will resize / crop it to fit:

The minimum sizes of icon images should be 192x192 px and should not have rounded corners.

You can try the following:

• Go to project\resources\android\icon :
  • Check to see if the wrong ratio is generated in each icon.
  • If it is larger than the original image, open any image editor, such as Photoshop or Paint , and manually change it manually until it matches your expected ratio (because you only need ionic resources ).
  • Save and do it again for the rest.
  • Restore the project.

UPDATE: Put 4 tiny color pixels at 4 corners and try again. I think the device should know where the correct border for the icon is, and not resize it.