Change fill color to vector asset in Android Studio

Question

Android Studio now supports vector assets at 21+ and will generate png for lower versions at compile time. I have a vector resource (from material icons) that I want to change the fill color. This works on 21+, but the generated pngs do not change color. Is there any way to do this?

<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="@color/primary" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/> 

Answer 1

Do not edit vector assets directly. If you use vector graphics in ImageButton, just select a color in android:tint .

 <ImageButton android:layout_width="48dp" android:layout_height="48dp" android:id="@+id/button" android:src="@drawable/ic_more_vert_24dp" android:tint="@color/primary" /> 

Answer 2

Can you do it.

BUT you cannot use @color links for colors (..lame), otherwise it will only work for L +

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:fillColor="#FFAABB" android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zm-6,0C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/> 

Answer 3

As other answers say, don't edit the vector that can be drawn directly, you can tint Java code instead, for example:

  mWrappedDrawable = mDrawable.mutate(); mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable); DrawableCompat.setTint(mWrappedDrawable, mColor); DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN); 

And for simplicity, I created a helper class:

 import android.content.Context; import android.graphics.PorterDuff; import android.graphics.drawable.Drawable; import android.os.Build; import android.support.annotation.ColorRes; import android.support.annotation.DrawableRes; import android.support.annotation.NonNull; import android.support.v4.content.ContextCompat; import android.support.v4.graphics.drawable.DrawableCompat; import android.view.MenuItem; import android.view.View; import android.widget.ImageView; /** * {@link Drawable} helper class. * * @author Filipe Bezerra * @version 18/01/2016 * @since 18/01/2016 */ public class DrawableHelper { @NonNull Context mContext; @ColorRes private int mColor; private Drawable mDrawable; private Drawable mWrappedDrawable; public DrawableHelper(@NonNull Context context) { mContext = context; } public static DrawableHelper withContext(@NonNull Context context) { return new DrawableHelper(context); } public DrawableHelper withDrawable(@DrawableRes int drawableRes) { mDrawable = ContextCompat.getDrawable(mContext, drawableRes); return this; } public DrawableHelper withDrawable(@NonNull Drawable drawable) { mDrawable = drawable; return this; } public DrawableHelper withColor(@ColorRes int colorRes) { mColor = ContextCompat.getColor(mContext, colorRes); return this; } public DrawableHelper tint() { if (mDrawable == null) { throw new NullPointerException("É preciso informar o recurso drawable pelo método withDrawable()"); } if (mColor == 0) { throw new IllegalStateException("É necessário informar a cor a ser definida pelo método withColor()"); } mWrappedDrawable = mDrawable.mutate(); mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable); DrawableCompat.setTint(mWrappedDrawable, mColor); DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN); return this; } @SuppressWarnings("deprecation") public void applyToBackground(@NonNull View view) { if (mWrappedDrawable == null) { throw new NullPointerException("É preciso chamar o método tint()"); } if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { view.setBackground(mWrappedDrawable); } else { view.setBackgroundDrawable(mWrappedDrawable); } } public void applyTo(@NonNull ImageView imageView) { if (mWrappedDrawable == null) { throw new NullPointerException("É preciso chamar o método tint()"); } imageView.setImageDrawable(mWrappedDrawable); } public void applyTo(@NonNull MenuItem menuItem) { if (mWrappedDrawable == null) { throw new NullPointerException("É preciso chamar o método tint()"); } menuItem.setIcon(mWrappedDrawable); } public Drawable get() { if (mWrappedDrawable == null) { throw new NullPointerException("É preciso chamar o método tint()"); } return mWrappedDrawable; } } 

To use only the following:

  DrawableHelper .withContext(this) .withColor(R.color.white) .withDrawable(R.drawable.ic_search_24dp) .tint() .applyTo(mSearchItem); 

Or:

  final Drawable drawable = DrawableHelper .withContext(this) .withColor(R.color.white) .withDrawable(R.drawable.ic_search_24dp) .tint() .get(); actionBar.setHomeAsUpIndicator(drawable); 

Answer 4

To change the color of a vector image, you can directly use the android: tint = "@ color / colorAccent"

 <ImageView android:id="@+id/ivVectorImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_account_circle_black_24dp" android:tint="@color/colorAccent" /> 

To change color programmatically

 ImageView ivVectorImage = (ImageView) findViewById(R.id.ivVectorImage); ivVectorImage.setColorFilter(getResources().getColor(R.color.colorPrimary)); 

Answer 5

Currently working android resolution: FillColor = "# FFFFFF"

Nothing worked for me except hard coding in vector

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:fillColor="#FFFFFF" android:viewportHeight="24.0"> <path android:fillColor="#FFFFFF" android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zm-6,0C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/> 

However, fillcolor and tint may work soon. See this discussion for more information:

https://code.google.com/p/android/issues/detail?id=186431

Also, mighr colors are inserted into the cache, so uninstalling the application for all users can help.

Answer 6

Android Studio now supports pre-lollipop vectors. No PNG conversion. You can still change the fill color and it will work.

In your ImageView use

  app:srcCompat="@drawable/ic_more_vert_24dp" 

In your gradle file

  // Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } } compile 'com.android.support:design:23.4.0' 

Answer 7

Update: AppCompat Support

Other answers expecting that if android:tint will only work with 21+ devices, AppCompat (v23.2.0 and later) now provides backward compatibility with the tint attribute.

So, the course of action will be to use AppCompatImageView and app:srcCompat (in the AppCompat namespace) instead of android:src (Android namespace).

Here is an example:

 <android.support.v7.widget.AppCompatImageView android:id="@+id/credits_material_icon" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginBottom="8dp" android:layout_marginLeft="16dp" android:layout_marginStart="16dp" android:scaleType="fitCenter" android:tint="#ffd2ee" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:srcCompat="@drawable/ic_dollar_coin_stack" /> 

And don't forget to include support for vector links in gradle:

 vectorDrawables.useSupportLibrary = true 

Answer 8

if you are looking for support for the old version of pre lolipop

use the same xml code with some changes

instead of the usual ImageView --> AppCompatImageView

instead of android:src --> app:srcCompat

here is an example

 <android.support.v7.widget.AppCompatImageView android:layout_width="48dp" android:layout_height="48dp" android:id="@+id/button" app:srcCompat="@drawable/ic_more_vert_24dp" android:tint="@color/primary" /> 

Remember to update your gradle as @ Sayooj Valsan .

 // Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } } compile 'com.android.support:design:23.4.0' 

Note For any vector used, never specify a vector link to a color such as this android:fillColor="@color/primary" , specify its hexadecimal value.

Answer 9

Add this library to Gradle to enable the color vector portable on older Android devices.

 compile 'com.android.support:palette-v7:26.0.0-alpha1' 

and re-synchronize gradle. I think this will solve the problem.

Answer 10

If the vectors do not display individually set colors using fillColor, then they can be set to the default widget parameter.

Try adding app:itemIconTint="@color/lime" to activity_main.xml to set the default color type for widget icons.

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_main" app:itemIconTint="@color/lime" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout> 

VectorDrawable @ developers.android