Is it possible to change material design icon color from xml in Android?

Question

I'm actually trying to use colored icons in my app. I've downloaded the official material design icon pack from here. Now all the icons in this pack are either white, grey or black. But I want the icons to be of a different color. Something like the icons on the left side in this image. The phone phone and mail icons are blue. How can I accomplish this?

Did you try something like android:background="@color/red" ? — 10101010, Apr 22 '15 at 07:52
As the icon file is in .png format, you should change the color using the tool from which you've created icon. and add it using ImageAsset into project . — satyapol, Apr 22 '15 at 08:09
@rajatIIT android:background makes a red box around the icon, and the icon still remains grey in color. — Akshay, Apr 22 '15 at 08:29
in github we have the svg files for the icons, can we derive colour icons from there ? — Senthil Kumar, May 19 '15 at 03:30

score 59 · Answer 1 · edited Oct 18 '16 at 21:58

59

For changing icon color try

<ImageButton
    android:layout_width="your value"
    android:layout_height="your value"
    /* and so on ... */

    android:tint="YourColor"
    />

Note: the tint color is painted ontop of the image, not a replacement color. So tint #80ff0000 on a black image gives you 50 % red on black, not 50 % red on the background. I.e. this is not equivalent to iOS template images.

edited Oct 18 '16 at 21:58

Simon Warta

10,850
5
40
78

answered Nov 13 '15 at 11:15

Yogesh Borkhade

616
5
10

Welcome to Stack Overflow! Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. It's also recommended that you don't post an answer if it's just a guess. A good answer will have a plausible reason for why it could solve the OP's issue. – SuperBiasedMan Nov 13 '15 at 11:31

Rod_Algonquin · Answer 2 · 2017-01-17T00:52:28.383

35

You can use the TintImageView within the appcompat support library and then tinting/coloring the imageview is by simply calling the android:backgroundTint to tint the imageview into one color.

Xml

<TintImageView
android:layout_width=""
android:layout_height="" 
android:src=""
android:backgroundTint="@color/green"/>

or

<ImageView 
android:tint="the_color_you_want"/>

Programatically

ImageView yourImageView = findViewById(...) yourImageView.setColorFilter(Context.getColor(your_color_here))

So the above xml will tint the imageView to color green, means that it will colorize each pixel of the imageview that are visible to green.

edited Jan 17 '17 at 00:52

answered Apr 22 '15 at 07:56

Rod_Algonquin

26,074
6
52
63

if I want to change the drawable left|right icon Tint for EditText TextView there no way to do that I feel! *android:backgroundTint="@android:color/holo_blue_bright"* not works !! – LOG_TAG May 29 '15 at 07:27

score 11 · Answer 3 · answered Sep 17 '15 at 20:01

I was looking for the same thing but to change it dynamically in the code. I hope this helps someone looking for the same thing.

Create an ImageView for the icon and use setColorFilter on that view.

ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);
imageViewIcon.setColorFilter(getContext().getResources().getColor(R.color.blue));

score 5 · Answer 4 · answered Mar 16 '16 at 11:46

<vector android:height="48dp" android:viewportHeight="24.0"
    android:viewportWidth="24.0" android:width="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ca0f0f" android:pathData="M3,5v14c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2V5c0,-1.1 -0.9,-2 -2,-2H5c-1.11,0 -2,0.9 -2,2zm12,4c0,1.66 -1.34,3 -3,3s-3,-1.34 -3,-3 1.34,-3 3,-3 3,1.34 3,3zm-9,8c0,-2 4,-3.1 6,-3.1s6,1.1 6,3.1v1H6v-1z"/>
</vector>

you change color by changing android:fillColor="#ca0f0f"

score 2 · Answer 5 · edited Mar 06 '18 at 09:28

2

How to change material icon color in XML

<ImageButton 
     android:layout_width="YourValue"
     android:layout_height="YourValue"
     ...
     android:tint="YourColor" // this line do the magic
/>

edited Mar 06 '18 at 09:28

aleksandrbel

1,422
3
20
38

answered Oct 04 '16 at 16:41

Eri-Ngozi Okereafor

39
9

score 1 · Answer 6 · answered Jul 28 '16 at 08:15

Many alternatives here already in this thread. Perhaps I can add one more for whoever finds it convenient :

You can also use the Drawable class, the code being as follows

    Resources res = getResources();
    Drawable drawable = res.getDrawable(R.drawable.ic_play_circle_filled);
    drawable = DrawableCompat.wrap(drawable);
    DrawableCompat.setTint(drawable, getResources().getColor(R.color.colorPrimary));

Although the above did the trick for me, but for my use case suggicient was to use android:tint

score 0 · Answer 7 · answered Mar 14 '17 at 12:01

0

Yes, it's possible and it's simple using this library: https://github.com/jrvansuita/IconHandler

You can easily call this:

Icon.on(yourImageView).color(R.color.your_color).icon(R.mipmap.your_icon).put();

answered Mar 14 '17 at 12:01

Vansuita Jr.

1,949
17
18

Ibiam Obinna · Answer 8 · 2019-01-17T11:34:40.517

0

Use the following code to modify the colour of your icon from xml

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ...
    android:foregroundTintMode="src_over"
    android:tint="Your colour"
    ...
    app:srcCompat="@android:drawable/ic_menu_slideshow" 
/>

edited Jan 17 '19 at 11:34

answered Jan 16 '19 at 18:41

Ibiam Obinna

21
4

score -1 · Answer 9 · answered Apr 19 '16 at 04:32

-1

Adding to what Murali said, make multiple drawables with different fill colors.

Then when needed, add to your code:

imageView.setImageResource(R.drawable.drawable_with_different_color)

NOT: imageView.setBackgroundResource()

answered Apr 19 '16 at 04:32

JamisonMan111

190
9

If suppose the icon has to be shown in 200 different colors, then will you put 200 icons with different colors in your drawable? – kapil thadani May 13 '16 at 08:37

Is it possible to change material design icon color from xml in Android?

9 Answers9

Linked