Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Problem with new icon system
Started by lomeglio098 Aug 01 2019 11:09 AM

5 replies to this topic

Best Answer Rob Miracle , 05 August 2019 - 11:36 AM

Yes, you can have background images. It's a matter of changing what you noticed and dropping an appropriately sized .PNG file that's you're background. But you really need to understand what Google is doing and you may have to re-think your icons to make them work.

 

Consider this icon:

 

 

This is for a game I've been working on for a while. So my alien dude is on a dark gradient background. When splitting the two images I get:

 

Okay, cool, I have an image in the background giving it a little texture. This icon is horrible for Android Adaptive icons because of why there are adaptive icons in the first place.

 

If you follow this guide (and look at the animated images):

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

 

Google lets each Android device maker to provide a mask, it could be round, a rounded rect or a unique shape. It layers the background image, the foreground image and then the mask. This means that using an icon like I have, when a round mask is applied, my alien gets cut pretty horribly.

Here it is with a circular mask applied:

 

You can see that the gun is gone. Most  of the antenna are gone and you can't really see the crest on his uniform. 

Your foreground needs to be 66% of the image and the rest transparency. My icon doesn't work well with space around it, it was designed to be packed into the corner of a square.

 

So while you can use an image in the background, a good portion of it's going to be masked out so if you have important graphics in the corners, it may still not be a good look for Adaptive icons. Google clearly wants a background they are free to crop and that your foreground image fits completely within the masked area.

Feel free to use an image in the background. You certainly can do it. You just may not like what you get. Solid colors may end up being your friend.

 

 

Rob

 

 

 

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

lomeglio098

[GLOBAL: userInfoPane.html]
lomeglio098
  • Observer

  • 18 posts
  • Corona SDK

hi everyone, i just built my first 64bit app and everything works just fine, so thanks to all the developers for the big work they have done in such a short time.

Anyway there is a little problem, but maybe it is just me cause i didn't really understand the new icon system. What's ic_launcher and ic_launcher_foreground? I put the same file there but on the phone it is just zoomed.

Can anyone explain me how to properly set up the files? Reading online it says it is a layers thing, but i didn't understand if one just has to be a white background image since if i start a new project it is not. 

Thanks in advance for the help.



[TOPIC: post.html]
#2

mysticeti

[GLOBAL: userInfoPane.html]
mysticeti
  • Contributor

  • 143 posts
  • Corona SDK

Adaptive icons were introduced from Android 8.0 (api level 26). For previous versions of the Android ic_launcher icons will be shown but for the api level 26 and above the ic_launcher_foreground will be used which are a bit larger sized icon than previous ones. You can also add ic_launcher_background if you have different color scheme instead of solid colors. Remember to change ic_launcher.xml file in mipmap-anydpi-v26 folder if you add background png.

Possible causes of zooming checklist:
- Since the names are all the same, try to check whether you accidentally copied the same image to every folder, verify the dimension of the icons with the sample project specifications.

- Check this article https://medium.com/google-design/designing-adaptive-icons-515af294c783, which describes safe zones of the icon, foreground images need to have transparent space around for the benefits of adaptive icons to shine.



[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,534 posts
  • Enterprise

For the pre-64-bit Android support which supports Android 7 and earlier icons, we tried to make things easy on you (well that's always our goal).

 

We let you create the 6 icons and give them easy to remember names that included the Android screen density in them:

 

Icon-xxxhdpi.png

 

for instance. Then magically behind the scenes during our build process we would move that icon to the appropriate "Android" folder inside the .apk. You didn't have to worry about having a res folder with a bunch of sub folders in it. Icons were simple then, we knew the exact size and by giving you a very simple naming scheme life was easy.

 

But Google couldn't leave well enough alone and came up with Adaptive icons staring with Android 8. These beasts take a background of some sort (PNG file, solid color, etc.) and a foreground image with transparency, and how they can pick the right one for the right screen density and do all kinds of "cool" (questionable) things with it like have rectangular or round icons. Having a separate background allows them to stretch it to fit whatever and plop the main foreground image into place.

 

To support this we had to mimic the exact folder structure that Android was using. These Icons are intended to be created in Android Studio and have it output everything sized right. But here is where it gets ugly fast.

 

Android calls these ic_launcher images, not icons. If you use Android Studio, that's what it's going to be outputting. So now you have an ic_launcher.png for 7.0 and earlier, an ic_launcher_foreground.png for Android 8 and later and then depending if you're going for a solid color background or an image background, you might end up with an ic_launcher_background.png file. All of this ends up getting written to some XML files. Then you have a folder for each of the screen densities. It looks like they have dropped the ldpi (low dpi screens) from what they build now.

 

Now you have a folder structure like this that we put under a folder named AndroidResources:

./res
./res/mipmap-anydpi-v26
./res/mipmap-anydpi-v26/ic_launcher.xml
./res/mipmap-hdpi
./res/mipmap-hdpi/ic_launcher.png
./res/mipmap-hdpi/ic_launcher_foreground.png
./res/mipmap-mdpi
./res/mipmap-mdpi/ic_launcher.png
./res/mipmap-mdpi/ic_launcher_foreground.png
./res/mipmap-xhdpi
./res/mipmap-xhdpi/ic_launcher.png
./res/mipmap-xhdpi/ic_launcher_foreground.png
./res/mipmap-xxhdpi
./res/mipmap-xxhdpi/ic_launcher.png
./res/mipmap-xxhdpi/ic_launcher_foreground.png
./res/mipmap-xxxhdpi
./res/mipmap-xxxhdpi/ic_launcher.png
./res/mipmap-xxxhdpi/ic_launcher_foreground.png
./res/values
./res/values/values.xml

We have, in a quest again to make your life simple, pre-built a folder for you. We use the names Android Studio expects since if you decide to customize this, it's what you're going to get, so all the XML files will be right and you won't have to mess with them. In theory you just need to drop your icons in named correctly and be the right size. As such, we have chosen to use a solid color for the background as you can see in the ./res/mipmap-anydpi-v26/ic_launcher.xml file:

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>

Since we are asking for a solid color, we go to the res/values/values.xml file:
 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ic_launcher_background">#f4721e</color>
</resources>

and look for a color named ic_launcher_background. I took this code from one of our sample apps, so our foreground images are white Corona icons with transparency and this defined color is our "Orange".

 

The regular ic_launcher.png files maintained the size of the old icons you're used to using, but the new ic_launcher_foreground.png files are overall bigger and I believe are actually the same size, but it adds some transparency around them to give Android flexibility to do things like zoom or crop the images.

 

We are working on a guide to this, and hopefully will have it published soon.

 

Every new project you create from the Corona welcome window will have a pre-built AndroidResources folder. You just have to rename your icons and copy them in to place  and then make the lc_launcher_foreground versions which I believe are larger, but should be the same as the ic_launcher.png files, just with transparency to make up the size difference.

 

Resolving the difference between the two icon sizes is something we are still trying to figure out as well as allowing you to use your own images as backgrounds instead of a static color.

 

But for now and to keep it simple, keep the static color and just copy in and rename your existing icons, and then resize them to the larger size needed for the ic_launcher_foreground files.

 

Rob


  • mysticeti likes this

[TOPIC: post.html]
#4

dmglakewood

[GLOBAL: userInfoPane.html]
dmglakewood
  • Contributor

  • 403 posts
  • Corona SDK

For the pre-64-bit Android support which supports Android 7 and earlier icons, we tried to make things easy on you (well that's always our goal).

 

We let you create the 6 icons and give them easy to remember names that included the Android screen density in them:

 

Icon-xxxhdpi.png

 

for instance. Then magically behind the scenes during our build process we would move that icon to the appropriate "Android" folder inside the .apk. You didn't have to worry about having a res folder with a bunch of sub folders in it. Icons were simple then, we knew the exact size and by giving you a very simple naming scheme life was easy.

 

But Google couldn't leave well enough alone and came up with Adaptive icons staring with Android 8. These beasts take a background of some sort (PNG file, solid color, etc.) and a foreground image with transparency, and how they can pick the right one for the right screen density and do all kinds of "cool" (questionable) things with it like have rectangular or round icons. Having a separate background allows them to stretch it to fit whatever and plop the main foreground image into place.

 

To support this we had to mimic the exact folder structure that Android was using. These Icons are intended to be created in Android Studio and have it output everything sized right. But here is where it gets ugly fast.

 

Android calls these ic_launcher images, not icons. If you use Android Studio, that's what it's going to be outputting. So now you have an ic_launcher.png for 7.0 and earlier, an ic_launcher_foreground.png for Android 8 and later and then depending if you're going for a solid color background or an image background, you might end up with an ic_launcher_background.png file. All of this ends up getting written to some XML files. Then you have a folder for each of the screen densities. It looks like they have dropped the ldpi (low dpi screens) from what they build now.

 

Now you have a folder structure like this that we put under a folder named AndroidResources:

./res
./res/mipmap-anydpi-v26
./res/mipmap-anydpi-v26/ic_launcher.xml
./res/mipmap-hdpi
./res/mipmap-hdpi/ic_launcher.png
./res/mipmap-hdpi/ic_launcher_foreground.png
./res/mipmap-mdpi
./res/mipmap-mdpi/ic_launcher.png
./res/mipmap-mdpi/ic_launcher_foreground.png
./res/mipmap-xhdpi
./res/mipmap-xhdpi/ic_launcher.png
./res/mipmap-xhdpi/ic_launcher_foreground.png
./res/mipmap-xxhdpi
./res/mipmap-xxhdpi/ic_launcher.png
./res/mipmap-xxhdpi/ic_launcher_foreground.png
./res/mipmap-xxxhdpi
./res/mipmap-xxxhdpi/ic_launcher.png
./res/mipmap-xxxhdpi/ic_launcher_foreground.png
./res/values
./res/values/values.xml

We have, in a quest again to make your life simple, pre-built a folder for you. We use the names Android Studio expects since if you decide to customize this, it's what you're going to get, so all the XML files will be right and you won't have to mess with them. In theory you just need to drop your icons in named correctly and be the right size. As such, we have chosen to use a solid color for the background as you can see in the ./res/mipmap-anydpi-v26/ic_launcher.xml file:

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>

Since we are asking for a solid color, we go to the res/values/values.xml file:
 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ic_launcher_background">#f4721e</color>
</resources>

and look for a color named ic_launcher_background. I took this code from one of our sample apps, so our foreground images are white Corona icons with transparency and this defined color is our "Orange".

 

The regular ic_launcher.png files maintained the size of the old icons you're used to using, but the new ic_launcher_foreground.png files are overall bigger and I believe are actually the same size, but it adds some transparency around them to give Android flexibility to do things like zoom or crop the images.

 

We are working on a guide to this, and hopefully will have it published soon.

 

Every new project you create from the Corona welcome window will have a pre-built AndroidResources folder. You just have to rename your icons and copy them in to place  and then make the lc_launcher_foreground versions which I believe are larger, but should be the same as the ic_launcher.png files, just with transparency to make up the size difference.

 

Resolving the difference between the two icon sizes is something we are still trying to figure out as well as allowing you to use your own images as backgrounds instead of a static color.

 

But for now and to keep it simple, keep the static color and just copy in and rename your existing icons, and then resize them to the larger size needed for the ic_launcher_foreground files.

 

Rob

So am I right in my understanding that it's not possible to add an image for the background as well as an image for the foreground? Or can I replace "@color/ic_launcher_background" with "@mipmap/ic_launcher_background" in the ic_launcher.xml?



[TOPIC: post.html]
#5

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,534 posts
  • Enterprise

  Best Answer

Yes, you can have background images. It's a matter of changing what you noticed and dropping an appropriately sized .PNG file that's you're background. But you really need to understand what Google is doing and you may have to re-think your icons to make them work.

 

Consider this icon:

 

Attached File  ic_launcher.png   31.34KB   3 downloads

 

This is for a game I've been working on for a while. So my alien dude is on a dark gradient background. When splitting the two images I get:

Attached File  ic_launcher_foreground.png   143.71KB   0 downloads

Attached File  ic_launcher_background.png   71.66KB   0 downloads

 

Okay, cool, I have an image in the background giving it a little texture. This icon is horrible for Android Adaptive icons because of why there are adaptive icons in the first place.

 

If you follow this guide (and look at the animated images):

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

 

Google lets each Android device maker to provide a mask, it could be round, a rounded rect or a unique shape. It layers the background image, the foreground image and then the mask. This means that using an icon like I have, when a round mask is applied, my alien gets cut pretty horribly.

Here it is with a circular mask applied:
Attached File  ic_launcher_background_circle.png   145.75KB   1 downloads

 

You can see that the gun is gone. Most  of the antenna are gone and you can't really see the crest on his uniform. 

Your foreground needs to be 66% of the image and the rest transparency. My icon doesn't work well with space around it, it was designed to be packed into the corner of a square.

 

So while you can use an image in the background, a good portion of it's going to be masked out so if you have important graphics in the corners, it may still not be a good look for Adaptive icons. Google clearly wants a background they are free to crop and that your foreground image fits completely within the masked area.

Feel free to use an image in the background. You certainly can do it. You just may not like what you get. Solid colors may end up being your friend.

 

 

Rob

 

 

 


  • dmglakewood likes this

[TOPIC: post.html]
#6

dmglakewood

[GLOBAL: userInfoPane.html]
dmglakewood
  • Contributor

  • 403 posts
  • Corona SDK

Yes, you can have background images. It's a matter of changing what you noticed and dropping an appropriately sized .PNG file that's you're background. But you really need to understand what Google is doing and you may have to re-think your icons to make them work.

 

Consider this icon:

 

attachicon.gific_launcher.png

 

This is for a game I've been working on for a while. So my alien dude is on a dark gradient background. When splitting the two images I get:

attachicon.gific_launcher_foreground.png

attachicon.gific_launcher_background.png

 

Okay, cool, I have an image in the background giving it a little texture. This icon is horrible for Android Adaptive icons because of why there are adaptive icons in the first place.

 

If you follow this guide (and look at the animated images):

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

 

Google lets each Android device maker to provide a mask, it could be round, a rounded rect or a unique shape. It layers the background image, the foreground image and then the mask. This means that using an icon like I have, when a round mask is applied, my alien gets cut pretty horribly.

Here it is with a circular mask applied:
attachicon.gific_launcher_background_circle.png

 

You can see that the gun is gone. Most  of the antenna are gone and you can't really see the crest on his uniform. 

Your foreground needs to be 66% of the image and the rest transparency. My icon doesn't work well with space around it, it was designed to be packed into the corner of a square.

 

So while you can use an image in the background, a good portion of it's going to be masked out so if you have important graphics in the corners, it may still not be a good look for Adaptive icons. Google clearly wants a background they are free to crop and that your foreground image fits completely within the masked area.

Feel free to use an image in the background. You certainly can do it. You just may not like what you get. Solid colors may end up being your friend.

 

 

Rob

Rob, you're second to none man. You could have simply responded with "Yep, that'll work" but instead you took time out of your day to explain potential pitfalls. I appreciate all your answers on these forums. You've helped me out so much over the years. 




[topic_controls]
[/topic_controls]