Saturday, December 16, 2017

How do I use Android's adaptive icons in Unity?


As of API 26, Android uses something called adaptive icons.



When targeting API 25 and lower, my app's icon looks fine:


enter image description here


But when targeting API 26+, it shows up in a white circle like so:


enter image description here



  • How can I target API 26+ while utilizing Android's adaptive icons?

  • What if I want to target API 26+, but not use Android's adaptive icons?



Answer



How can I target API 26+ while utilizing Android's adaptive icons?



In your Player Settings under Android on Unity 2018 or higher, there is a spot in the Icon's section to set your icons. You can set Legacy, Round, and Adaptive icons. The Legacy and Round icons are for API 25 and lower. Just add the icon you want, alpha and all, and you're done. The adaptive icons, for API 26+, are a bit more complicated.


enter image description here


Adaptive icons consist of two parts. The background and the foreground.


Background


The Background is where you put the background for your icon. This image must not have any alpha. It should be continuous, as you do not have control over which parts of the background are shown.


Android determines the cropping and translation of the background image. In the example below, the background is a blue image with a white grid on it. Notice how the background looks fine despite the square being cropped into a circle, and the background being moved around.


enter image description here


Foreground


The foreground will be your actual icon. Alpha is required for this image. The outter 1/6 of your image may be hidden behind the cropping. That means the image must be scaled down to 66.67% or the original size, while the canvas remains the full size. In the example below, the image is 432x432 pixels; however, the left, right, top, and bottom of the image are each 72 pixels of transparency.


enter image description here



The end result of 66.67% scaling of the image will fill the sprite perfectly within the circle, while the background shows up behind transparent pixels.


On various devices, the icon could be shifted outside of the cropped area given that there was no buffer. For example, in the blue icon above, the foreground is approximately 35% of the original size. If it were 66.67% of the original size, then the Android face would slide out of view.


Example


So if this was our background and foreground, such that the contents of our foreground is 2/3 the size of our background:


enter image description hereenter image description here


Then this is the uncropped version of our icon:


enter image description here


But what we could actually see on device (assuming Android is not doing anything "adaptive" at the moment) is this:


enter image description here





What if I want to target API 26+, but not use Android's adaptive icons?


You cannot.




I still don't understand.


Perhaps Android or Unity can explain it better.


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...