CODEWITHSUNDEEP
androidiconsandroid-5.0-lollipopmaterial-design
Akshay
Akshay

Reputation: 351

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

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?

Upvotes: 33

Views: 54312

Answers (9)

Ibiam Obinna
Ibiam Obinna

Reputation: 21

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" 
/>

Upvotes: 0

Eri-Ngozi Okereafor
Eri-Ngozi Okereafor

Reputation: 39

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
/>

Upvotes: 2

Vansuita Jr.
Vansuita Jr.

Reputation: 2119

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();

Upvotes: 0

Rod_Algonquin
Rod_Algonquin

Reputation: 26198

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.

Upvotes: 35

Yogesh Borkhade
Yogesh Borkhade

Reputation: 614

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.

Upvotes: 59

Neil B
Neil B

Reputation: 126

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

Upvotes: 1

JamisonMan111
JamisonMan111

Reputation: 200

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()

Upvotes: -1

Murali
Murali

Reputation: 409

<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"

Upvotes: 5

user3830188
user3830188

Reputation: 111

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));

Upvotes: 11

Related Questions