14

My app's icon is already basically a circle. Android's insistence on putting it inside another circle makes for a very ugly result, so I'm trying to figure out how to tell it to behave.

For example, if my icon is (and this isn't my actual icon, but that doesn't matter):

Icon

Then Android renders it like this:

enter image description here

NOTE: the content outside the circle is very important. Without this, Android seems to understand that my icon is already circular and shouldn't be wrapped in another circle.

I've seen this question and answer, but I am confused by both the behavior and the fact that the proposed fix has not worked for me.

When I run the Image Asset Studio tool to generate icons, I go through the process of selecting legacy and getting it looking exactly how I want, then I click Finish and....nothing happens. No images are generated, nothing. I know this because I see no changes detected by git, nor do my app's icon images seem any different.

My gradle includes:

compileSdkVersion 27 minSdkVersion 16 targetSdkVersion 27

Can anyone tell me how to get Android to understand that my icon is still fundamentally a circle? Sure, it has a bit of content outside the circle, but it's still within the bounds of the square that encompasses the circle...

me--
  • 1,978
  • 1
  • 22
  • 42

2 Answers2

31

Solution: As of my understanding from the docs

Android 8.0 Oreo (API level 26) introduced adaptive launcher icons, which has two layers, a foreground and a background. The material design guidelines state that the background layer must be opaque in Android O and beyond. And here is another link to a Guideline from Material Design.

https://material.io/guidelines/style/icons.html#icons-icons-for-android

So the white circle which you want to remove will not be removed and will always be there. If you still want to remove the white circle then probably you have to change the icon to full view or else your icon will be tampered.

PS: If you observe the "Round Icons" on your phone's launcher then all are occupying full space and do not have any extra image as in your green icon. So, have an icon which can fill-up the entire icon image.

As a workaround, you can reduce the white color to something to semi-transparent by decreasing the background size of the icon. To do that, please follow the steps below:

Step1: Right-click on the app and then New then Image Asset:

Screenshot

Step2: In the foreground layer, select your icon:

a. Select your image from the path.

b. In Scaling below, Give Trim to Yes. and Resize to 80%

Screenshot

Step3: Navigate to Background Layer:

a. Select your image from the path.

b. In Scaling below, Give Trim to Yes. and Resize to less than or equal to 5%

Screenshot

Finally: Click Next and Finish

After following the steps you will be able to see your icon with a semi-transparent black background. Please try and see if it comes close to what you need.

Please comment if any doubts or issues regarding the same, and I'll do my best to solve it.

Community
  • 1
  • 1
Ümañg ßürmån
  • 9,695
  • 4
  • 24
  • 41
1

In Addition with @Ümañg ßürmån Answer :

To remove white spaces around the launcher icon I do the following :

Step1: Right-click on the app and then New then Image Asset. Select : Launcher Icon (Adaptive and Legacy)
then Select your image from the path.

In Foreground : Step 2 : In Scaling below, Give Trim to Yes. and Resize to 128% .

In Background: Step3: I have choosed Asset Type : Color , and select white color.

Thats All. Then my launcher Image fit to the whole Icon.

Noor Hossain
  • 1,620
  • 1
  • 18
  • 25