So my tablet recently updated to Android 7.1.1, and I noticed that my app's icon looked like hot garbage with the new adaptive icon scheme. I updated things via Android Studio's Image Asset Studio, and it's better, but I'm noticing the edges of the squared circle look kind of ragged/jagged/rough. Here's how it looks compared to Twitter and Firefox. Any suggestions as to how I can get the edges of mine to look as smooth as those?
EDIT: For what it's worth I still see the same rough edges if I use an image or plain color as the background, and they even show up with the stock ic_launcher icon.
You Change the Shape here in Image Assest
So it turns out that the image asset tool in Android Studio is creating the problem - it leaves transparent edges around the generated icons. And then when it's rendered on the device, Android rescales things as a result, which leads to the indistinct edges on the icons. What worked for me was to go back in and fill in the transparent areas by hand so that the background extends all the way out to the edges of the .png files.
Related
I've been experiencing an issue with creating an icon that fits in any size and shape. I use Studio to do it, but I must be doing something wrong, because there is a small padding in it.
I add my image asset as background layer with nothing in foreground layer.
I've tried to fix it by trimming it and using huge icon source 1920*1280.
When I changed to new theme it turned out that few other apps on my phone(other devs) have same poor icons.
Also tried this
Creating an icon using foreground layer totally solves this issue.
I'm trying to implement a launcher icon for an Android app. I'm using Android Studio's New Image Asset capability to create the icon from an image file and it works in most places except for the later Pixels.
On the Pixel 3XL, it looks like the following figure. The icon with a round white border around it.
On the Pixel 2, it looks the same
But on an original Pixel, it looks right:
I created the icon assets using the Android Studio New Image Asset capability. Selecting the image icon as shown in the following figure:
Then I set the background to the background color for the icon:
Based on what the UI shows, the icons all look right and Android Studio is supposed to generate the right files for all target platforms. Can someone please help me understand what I need to do to get rid of that white border on later phones?
You should add ic_launcher_foreground.xml and ic_launcher_background.xml to drawable file in your project. As far as I get it, you've try to make red background then add red backgorund layout you have only foreground image in this way. Btw that is not a bug that is a feature :)
I am trying hard to get rid of the extra margin around the ic launcher icons generated by Android Studio without luck. I know this is one of Google's material design trends. Though, the icons are so small on devices which is ugly.
I have Googled for around three hours and the only workaround I could find is to generate the clipart with a transparent background and photoshop the background with rounded corners which is pretty slow.
Is there a better solution than this?
Thank you.
Per the Designing adaptive icons blog post, the adaptive icon images created in the drawable directory for use on API 26+ devices follow the adaptive icon size and shape:
You'll note that while the entire image must be 108dp by 108dp, the actual visual area is only the center 72dp - the outer edge is only seen when dragging the icons around (where parallax effects may cause it be visible).
The Pixel Launcher, as well as many third party launchers, enforce the use of adaptive icons on API 26+ devices, so you should always design with that requirement in mind - the alternative, in the Pixel Launcher's case for instance, is to place your non-adaptive icon within a white circle.
Therefore you should always design your icon such that the background layer takes up the full size, but any foreground image you put on top of that background layer should be contained within that center area.
You can't just remove that margin without the foreground image being messed up, but as per the Implementing Adaptive Icons follow up blog post, you can remove any white excess around the foreground by putting your trimmed image within a transparent drawable of 108dp x 108dp by using an InsetDrawable.
<!-- Center a 54x54dp image in the 108x108dp size of adaptive icons -->
<inset
android:drawable="#mipmap/ic_fg_trimmed"
android:insetLeft="25%"
android:insetTop="25%"
android:insetRight="25%"
android:insetBottom="25%" />
Although this would have to be something you'd need to do to the ic_launcher_foreground image yourself after the fact.
A better solution, in most cases, is to use vector drawable images as the input to the Android Studio Image Asset wizard - this will ensure they are always the right size and don't take up any additional space in your APK.
I think i had the same problem as you. I solved this with a nasty hack, in the AndroidManifest.xml I just changed the roundIcon to point to the standard icon.
<application
…
android:icon="#mipmap/ic_launcher"
android:roundIcon="#mipmap/ic_launcher"
See more from the docs.
I created a transparent image using gimp, and used it as Android apk icon. But when I installed the apk on my Galaxy S3, there is a shadow when display the icon on my screen. Since I can't post image as a new user, I posted the image at:
http://www.guangnaqu.com/P1030055.JPG
Please noticed that other apks' icons are ok. Also the icon displayed ok on Android emulator.
Please let me know how to fix this.
Thanks.
It might be TouchWiz causing the problem.
I had a similar issue in a previous form of TouchWiz where it would make an entirely new color background of its choosing.
1.Edit it with GIMP http://www.gimp.org/ for an invisible background. just throwing out options JIC it is the image editor
2.Try to give the background something like a 0.05% Shader background setting that cannot be distinguished by the phone screen, but is seen by the UI.
Is anyone else having this problem? http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html When i try to use an image and i upload the image it just turns out to be a grey box. I have tried in all different browsers and still no luck.
You probably have one of two issues.
1) To verify if the image is getting processed, make sure you select 'Launcher Icons' from the main screen as a test. Other icons are not full color, they are Grey or black or white. For Example, the icons for the Action Bar are supposed to be Grey (depending on theme). See the action bar design guidelines. If you see your icon, but it is square instead of it's native 'shape' you have the second issue.
2) Use gif (or png) as your original and make sure you set the transparent color when you created it.
The tool works well for me in several browsers. I suggest you try a different browser, and make sure your bitmap isn't corrupt.