Material-design-icons: ic_stop_white_*dp.png background is black, not transparent

Created on 7 Jun 2015  路  16Comments  路  Source: google/material-design-icons

https://storage.googleapis.com/material-icons/external-assets/v1/icons/zip/ic_stop_white_48dp.zip

In Android Studio's preview window & in-app, the white stop icon's background is not like the others--there's no transparency and it's just black. The zips for each dp would need to be regenerated.

Eg
image
Compared to something like this
image

bug

Most helpful comment

Weirdly I just came across this issue when converting my pngs to WebP. It was fine in PNG, now when I redownload the image (https://material.io/icons/#ic_add) it has a black background so a bit stuck. In 36dp sizing

Android Studio tells me they have a 1-bit colour profile which might be the issue.

Edit: I imported the images again, converted them to WebP with the tool built into Android studio and it worked. Both AS and the app show it with a transparent bg as I expected

Edit 2: Issue has not gone away, it seems to have gone back to having a black bg. Just going to create the icons manually

All 16 comments

To be clear, are you taking the icons from this repo and importing them into Android Studio?

It was from the png download link option on the live site, not from the repo. I haven't checked yet if this problem's present with the resources in the repo.

Thanks for finding this Steven. It looks like this is an Android Studio bug.
Feel free to use the asset, it will render correctly (with transparency) in your Android app, it just won't look correct in Android Studio.

We'll talk to the Android Studio team and get to the bottom of it.

That's what I thought too but it wasn't just in Android Studio's preview window, it was also black and lacked alpha in-app.

Are you sure? Which version of Android are you running?
I'm looking at a test app right now on Android L that appears correct to me, but maybe older versions of Android have a bug too?

It happens on the android L emulator and my nexus 5 (5.1). It just appears to be an asset issue as other resources are fine. Again this is with the png link from the main site https://storage.googleapis.com/material-icons/external-assets/v1/icons/zip/ic_stop_white_48dp.zip not from repo.

edit: I've just tried https://github.com/google/material-design-icons/blob/master/av/drawable-xxxhdpi/ic_stop_white_48dp.png and Android Studio's preview also shows it as black.

I haven't been able to reproduce the problem in an emulator, or on device, but still looking into it.

Also, filed this bug against Android Studio:
https://code.google.com/p/android/issues/detail?id=178071

I had the same problem with ic_menu_white_36dp for all sizes except hdpi. It seems like an android studio bug and if you just drag the files into the correct destination folders outside of Android Studio, the icon would be fine in the device, but still has the black background shown in Android Studio.

ic_add_white_24dp.png also got this issue

also ic_add_white_36dp.png and 48 but not 18 for some reason... Android Studio 2.1.2

@rotemge , @cnevinc : I'm using ic_add_white_48dp.png in Android Studio 2.1.2. While it shows a black background square in design preview, it is displayed correctly in the device.

same for ic_flight_takeoff_black_24px.svg and ic_flight_land_black_24px.svg
using them with QtQuick 2.3 and QtCreator 3.5.1
black background in preview and execution. using couple of icons of same size and format, which are all displayed as expected.

Same for ic_add_white_48dp downloaded through https://design.google.com/icons/. In the finder it shows transparency but in the android tools it has a black background.

In app it has normal transparancy

I found the with icons that have either full opacity or full transparency pixels. For a given icon, it can depend on the actual size as scaling is involved.

Dolphin, Gwenview and Okular display those icons with an opaque black background.
ImageMagick (using the command display), Gimp and Chrome display them properly.

The PNGs are probably not bad per se, but I think they have been written in a not optimally compatible manner. Saving them from Gimp or running pngcrush on them fixes the issue, but adds an extra few bytes (not a big deal IMHO).

Weirdly I just came across this issue when converting my pngs to WebP. It was fine in PNG, now when I redownload the image (https://material.io/icons/#ic_add) it has a black background so a bit stuck. In 36dp sizing

Android Studio tells me they have a 1-bit colour profile which might be the issue.

Edit: I imported the images again, converted them to WebP with the tool built into Android studio and it worked. Both AS and the app show it with a transparent bg as I expected

Edit 2: Issue has not gone away, it seems to have gone back to having a black bg. Just going to create the icons manually

You can fix issue this way
open generated .xml file and change path android:fillColor from "#000000" to "#00000000"

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Paul-Ver picture Paul-Ver  路  3Comments

lorenzos picture lorenzos  路  3Comments

akxer picture akxer  路  3Comments

tmtron picture tmtron  路  3Comments

coogle picture coogle  路  4Comments