javascript - ionic android icon not same original sizeratio - Stack Overflow

admin管理员组

文章数量:1425232

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

Then i run ionic resources and all the icons i need are generated under resources/android/icon/

My config.xml is changed 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 app icon once installed it looks like the figure in the middle is bigger and ratio is not respected:

As you can see, the little red ball became a huge ball, this is something i don't understand, can anybody clarify me this?

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

Then i run ionic resources and all the icons i need are generated under resources/android/icon/

My config.xml is changed 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 app icon once installed it looks like the figure in the middle is bigger and ratio is not respected:

As you can see, the little red ball became a huge ball, this is something i don't understand, can anybody clarify me this?

• javascript
• android
• cordova
• ionic-framework

Share Improve this question Follow asked Oct 22, 2015 at 8:51 Filippo orettiFilippo oretti 49.9k9696 gold badges229229 silver badges351351 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

(Can't place ments yet, so I'll do it by answering)

By the looks of it you're using an iconpack of some sort. (Since all the icons have the same shaped background with the original icon on top). My guess is that the icon pack eliminates most of the transparent space surrounding your icon (and all others), to fit the same icon design.

You can easily find out if this is indeed the case by either:

• disabling the iconpack (the red circle should be normal sized now, with the surrounding whitespace)

• making an icon with a border around the sides of the icon, so it probably won't cut off the whitespace.

If it is indeed the iconpack that's eliminating the surrounding whitespace, you could try to have a very light (99% transparent) layer as a background. This will prevent the iconpack from eliminating whitespace, so it won't scale the circle.

I wouldn't really remend this though, since most people won't use an icon pack and then the icon could look a little strange on other devices.

I think it is because of the ionic resources mand. It will read the image and auto crop the image depend on each screen size.

Ionic Resource Site said that no rounded corners maybe It's for non-transparent pixels outside the main picture, or it will resize/crop it to fit:

The icon image’s minimum dimensions should be 192x192 px, and should have no rounded corners.

You can try this:

• Navigate to the project\resources\android\icon:
  • Check if every icon in was generated wrong ratio.
  • If it is bigger than your's original image, open up any picture editor like Photoshop or Paint and resize it manually by hand until fit your expected ratio (because you should only need the ionic resources generate the pre-sized picture).
  • Save and do it again for the others.
  • Rebuild the project.

UPDATE: Put 4 tiny pixel of color for 4 corners and try again. I think the device should know where is the correct border for the icon instead of resizing it.

本文标签： javascriptionic android icon not same original sizeratioStack Overflow