question

priomobi avatar image
priomobi asked

Launcher Icon in Carousel blury - How to specify the correct icon?

Hi, I am testing my Android (4.0+) App on Kindle Fire right now. The icon shown in the carousel is the default launcher icon. This is is fine, but the icon is very blury. I assume this is because the Carousel does not use the standard launcher icon sizes but custom ones: Kindle Fire HDX 8.9" (3rd Gen) 624 x 624 Kindle Fire HDX 7" (3rd Gen) 562 x 562 Kindle Fire HD 7" (3rd Gen) 375 x 375 Kindle Fire HD 8.9" (2nd Gen) 675 x 675 Kindle Fire HD 7" (2nd Gen) 425 x 425 Kindle Fire (2nd Gen) 365 x 365 Kindle Fire (1st Gen) 322 x 322 What is the correct way to specify these icons? The default launcher icon is specified in the AppManifest.xml and different version (diffrent sizes, same name) are stored in the different drawable folders (hdpi, xhdpi, etc.). How to specify the carousel icons? Additionally there are more icons that do not use the standard Android dimensions ("Customers Also Bought", Grid, List Large, List Small, etc.). How are these specified? Thanks Stefan
fire tablet
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Sujoy@Amazon avatar image
Sujoy@Amazon answered
Low quality image or an image rendering with a thin white border can have many causes, but the root cause is scaling. The Amazon Appstore takes the images upload by you in the Developer Portal, scales them appropriately and uses them throughout the AppStore, the Kindle Fire devices, App Clients and for other marketing efforts. Scaling is a non-trivial process that involves a trade-off between efficiency, smoothness and sharpness. With bitmap graphics, as the size of an image is reduced or enlarged, the pixels that form the image become increasingly visible, making the image appear "soft" if pixels are averaged, or jagged if not. How can you make sure that you get the best results? Let's take the example of an image edited with Photoshop as this is a quite standard/understood, GIMP would be similar. For the Amazon Appstore the most important asset is the 512x512 .png, this is scaled and used throughout the Appstore and on devices. -Start by creating a very large scale image of the highest quality possible. -You will want to resample or image, not just resize it. -We will be most interested in the highest quality image when scaled for a smaller image from our 512x512 or, larger screenshots. -For this we will want to choose Bicubic Sharper: Use this option when resampling your image smaller for best image quality. -Photoshop interpolates best between pixels when you scale down images by a factor of 2, 4, 8, 16 and so on (equal to 50%, 25%, 12.5%, 6.25%). So you need two steps to scale down your image properly (in the example of 1000 x 615 pixels - 1. scale down to 500 and 2. from that size scale down to 435 to get a downscaled quality image of 435 x 268). Unwanted borders and lines around an image are another common issue. What program the image is created in (ex: Photoshop or Illustrator for example), how transparencies/backgrounds, etc. are set, what it is viewed with (ex: IE, Chrome, Firefox) or on the device (ex: Kindle carousel always black, non-Amazon can be anything) can have an impact. Again, the essential issue is scaling, specifically using bilinear interpolation. When an editor like Photoshop is used to export a PNG, completely transparent areas will default to white. This is not an issue when upscaling, however when the image is downscaled these transparent areas will mix with neighboring visible pixels and white edges may start to appear. This same process is also responsible for reduced quality graphics as they are scaled for icons and screenshots on various platforms. One way to address this is ensure that any completely transparent pixels have a color value which matches the neighboring visible pixels. That way, when interpolation occurs, the color bleed from the invisible pixels is of the appropriate color. Producing the very highest quality .png image without scaling to submit as a screenshot or icon will also ensure the best results. What has helped others: -In Photoshop make sure to save PNG-24 for the cleanest alpha-channel -Don't use transparency at all, use a separate alpha channel, and extend colors in the texture outward into transparent areas by one pixel (or more). -If your texture is primarily one color, specify and use this for the matte color. -For a stubborn white line issue: -Do you editing in your editor format (ex: .xcf for Gimp or .psd Photoshop) -Set your proper scaled size (ex: 512x512) -Open your Icon file -Place a layer beneath the edge containing layer, make it Black -You should see the white line clearly -Select the white line and delete it (select tool, etc) -Delete your recently added black background -Save as png
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

priomobi avatar image
priomobi answered
Thank you very much for your answer. However it is more or less completely off topic. There is nothing worth than a default/template answer that hase nothing to do with the question :-) Of course I know how different sizes of an image should be created. I know about scaling, interpolation, etc. But this has nothing to do with my question: To make sure, that the app icon has always a good quality, no matter in which size it is used, android offers the option to add different files for different resolutions. In reference to the Android guidelines the launcher icon should have a size of 48dp. Translated to the different resolutions this results in files with different sizes: ldpi = 24x24px mdpi = 48x48px hdpi = 72x72px xhdpi = 96x96px xxhdpi = 144x44px xxxhdpi = 192x192px So, these are the sizes the launcher icon is available in. This works well on all android devices except on Kindle. This is because the carousel does not use these default sizes but other custom sizes: Kindle Fire HDX 8.9" (3rd Gen) 624 x 624 Kindle Fire HDX 7" (3rd Gen) 562 x 562 Kindle Fire HD 7" (3rd Gen) 375 x 375 Kindle Fire HD 8.9" (2nd Gen) 675 x 675 Kindle Fire HD 7" (2nd Gen) 425 x 425 Kindle Fire (2nd Gen) 365 x 365 Kindle Fire (1st Gen) 322 x 322 Lets assume, that we are using an Kindle Fire HD 7" 3rd gen. In that case the system would look for an launcher image with 375 x 375px. Of course there is not such file and thus the system takes the existing 192x192 version and scales it up. [b]It is absolutely obvious, that this leads to a blurry icon.[/b] [b]The solution is pretty obvious as well:[/b] Add more size version of the icon to the app, e.g. a 375 x 375px to show good results on Kindle Fire HD 7" 3rd gen... [b]The question is: How ca I do this?[/b] Am I supposed to add some more folders like xxxxxxxxxxxxxxxxxhdpi with a fitting version of the icon? How to add the size version Kindle looks for in the app?
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Sujoy@Amazon avatar image
Sujoy@Amazon answered
The icons on Kindle Fire Tablets are dynamically pulled from Amazon Apps. Side-loaded apps cannot use this feature. Once you've submitted your app and it's live on Amazon, your app's appropriate icon will automatically be displayed. Please refer below link for asset guidelines for app submission https://developer.amazon.com/public/solutions/devices/fire-tv/docs/asset-guidelines-for-app-submission#Icons
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.