what tint value for vector asset should be set?

33 views Asked by At

When adding an icon using right click on res folder -> new -> Vector Asset in android studio, color value(this is equivalent to android:tint in xml file once it is added to drawable) set to #000000 by default like below. enter image description here
and populate xml code like this.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#000000"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z" />
</vector>

I wonder if I should keep that tint value set by default since this icon could possibly be used in multiple places. Would there be a way to set it as a theme attribute such as android:tint="?attr/colorControlNormal" in that xml file? I will appreciate it if you could give me an guide how to handle tint color with vector asset.

1

There are 1 answers

0
Name On

First off all you should define a color in your res/values/colors.xml

  <color name="colorControlNormal">#FFFFFF</color>

Need set the color in themes.
You should add this to all your themes which you want the vector's color to change. <item name="colorControlNormal">the color you want for theme</item>

<style name="Theme.YourAppName" parent="Base.Theme.YourAppName" >
    <item name="colorControlNormal">@color/black</item>
</style>

use android:tint="?attr/colorControlNormal" so that its color changes according to your theme

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="?attr/colorControlNormal"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!-- ... -->
</vector>

From now on, the vector color will change according to the value of color you give in your theme.