36

Which color should be the "dark" material icon?

On the official documentation (https://www.google.com/design/spec/style/icons.html#icons-system-icons at the bottom) it is 54 % black (grey), but all downloads of the material icons are either white or 100 % black.

enter image description here

Also on the new official site https://www.google.com/design/icons/ you can download either white or black, but not "grey"!

So I have to set 54 % to all downloaded icons for myself? Or did I miss something?

Suragch
  • 364,799
  • 232
  • 1,155
  • 1,198
chrisonline
  • 6,341
  • 10
  • 37
  • 60
  • 1
    Usually I do it myself, so I can handle the 87% transparency for pressed icons, and 26% for disabled icons. If I don't need to change the transparency, I use this site: http://materialdesignicons.com/ where there is a 'grey' option. – Ruocco May 30 '15 at 11:41
  • 1
    Thanks I use it too sometimes. But a lot of icons are on the official site and I wonder why they don't have 54 % black (grey) icons when it is written in the official design guidelines. How do you do the transparency? I am not a designer so sorry for the stupid question :-) – chrisonline May 30 '15 at 16:16

3 Answers3

35

I am too late to reply but nevertheless I will answer the question since it may save lot of time for some developers. I myself being a developer struggled a lot while creating icons in different colors and since I am not a designer it was really hard. After lot of searching I found this plugin in Android Studio called Android Material Icon Generator. It creates all material icons in all colors with various sizes and also with opacity factor. This is great help for us developers who aren't good at designing. Also no need to download icons separately, This plugin is enough.

rockfight
  • 1,546
  • 2
  • 16
  • 27
  • 2
    I've made great use of the generator (https://github.com/winterDroid/android-drawable-importer-intellij-plugin). However, iIf you use the 2.0 material design icons, you'll get black and white as your only options for the material icons. The 1.0.2b version of the material icons (https://github.com/google/material-design-icons/releases) also includes a grey600 option. – ProjectJourneyman Oct 08 '15 at 01:36
  • Sorry for stupid question, but after I have installed this plugin I can't find any trace of it in Android Studio UI :) Can you give me a hint on where to look for it? – Alex Berdnikov Feb 26 '17 at 21:43
16

In the Android Asset Studio there is a Generic Icon Generator with all the Material icons and you can select the color you want.

Brais Gabin
  • 5,447
  • 5
  • 50
  • 88
4

There are three ways I handle opacity:

a) Simple one, I download them (on materialdesignicons.com if I need the grey option) and use them, as I don't need to change anything in any way. If I don't find the one I need, I download the black (white) one and transform it into the 54% opacity version of it (it's a 30 seconds job on gimp/photoshop).

b) If I only need the "normal" and "pressed" state, I download the black (white) one, create the two versions, at 54% for natural and 87% for pressed, then I create a drawable file to combine them (you can handle focused too):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true"
            android:drawable="@mipmap/settings_pressed" /> <!-- pressed -->
        <item android:state_focused="true"
            android:drawable="@mipmap/settings" /> <!-- focused -->
        <item android:drawable="@mipmap/settings" /> <!-- default -->
</selector>

c) If I need to change the opacity of the icon often in my code, I do it progammatically:

ImageButton mButton = (ImageButton) findViewById(R.id.button);
final Drawable buttonIcon = context.getResources().getDrawable(R.mipmap.your_icon);
buttonIcon.setAlpha(138); //this is the value of opacity 1~255
mButton.setBackground(buttonIcon);

Note that you can combine the methods b) and c), so you don't have to control the pressing change of opacity programmatically, but still be able to change its overall value as you need.

Ruocco
  • 535
  • 2
  • 12
  • 25