Android Studio
Vector Asset
Fill Color
Android Development
Graphic Design

Change fill color on vector asset in Android Studio

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

To change the fill color of a vector asset in Android Studio, you usually edit the drawable XML and update android:fillColor on the relevant path. If the same icon must appear in different colors at runtime, tinting is usually better than hardcoding several separate copies of the file.

How Vector Drawables Store Color

Android vector assets live in res/drawable as XML. The visible shape is typically defined by one or more path elements, and each path can specify a fill, stroke, and path geometry.

A minimal example:

xml
1<vector xmlns:android="http://schemas.android.com/apk/res/android"
2    android:width="24dp"
3    android:height="24dp"
4    android:viewportWidth="24"
5    android:viewportHeight="24">
6
7    <path
8        android:fillColor="#FF0000"
9        android:pathData="M12,2 L22,22 H2 Z" />
10</vector>

Changing the android:fillColor value changes how that shape is painted.

Option 1: Edit the XML Directly

If the icon always uses one fixed color, direct XML editing is the simplest solution.

xml
<path
    android:fillColor="@color/brand_primary"
    android:pathData="M12,2 L22,22 H2 Z" />

Using a color resource is better than scattering literal hex values everywhere. It keeps branding and theme updates manageable.

Option 2: Use Theme Attributes

If the icon should adapt to light mode, dark mode, or app themes, reference a theme attribute instead of a fixed color.

xml
<path
    android:fillColor="?attr/colorPrimary"
    android:pathData="M12,2 L22,22 H2 Z" />

That lets the same drawable react to the active theme without duplicating the vector asset.

Option 3: Tint at Runtime

If different screens need the same vector in different colors, tinting is often the better design.

In layout XML:

xml
1<ImageView
2    android:layout_width="24dp"
3    android:layout_height="24dp"
4    android:src="@drawable/ic_triangle"
5    android:tint="@color/brand_primary" />

Or in Kotlin:

kotlin
1import android.content.res.ColorStateList
2import android.graphics.Color
3import android.widget.ImageView
4
5val imageView = findViewById<ImageView>(R.id.icon)
6imageView.setImageResource(R.drawable.ic_triangle)
7imageView.imageTintList = ColorStateList.valueOf(Color.BLUE)

Tinting works best for single-color icons. For multi-color artwork, direct path editing is usually the safer choice.

Multi-Path Drawables Need Extra Care

Many imported SVG icons become vector drawables with several path entries. If you want to change only part of the icon, inspect each path separately.

xml
1<path
2    android:fillColor="@color/icon_base"
3    android:pathData="..." />
4
5<path
6    android:fillColor="@color/icon_accent"
7    android:pathData="..." />

That gives you separate control over the base and accent portions.

Android Studio Import Is Only the First Step

Android Studio can import SVG files into vector drawable format, but imported files often need cleanup. It is common to open the generated XML and replace hardcoded colors with resources or theme attributes.

That post-import cleanup is usually where real maintainability is won.

If the asset came from a designer, this is also the right moment to simplify redundant paths, remove accidental hardcoded opacity values, and confirm that the viewport matches the intended icon size. Color changes are easier when the vector XML itself is clean.

Common Pitfalls

A common mistake is editing android:fillColor and then not noticing that a runtime tint on the ImageView is overriding it.

Another mistake is assuming tinting preserves multi-color artwork. In many cases, tinting applies a uniform color treatment and removes the intended contrast.

A third issue is editing the wrong path in a complex imported asset. Large icons can contain many shapes, so inspect the XML carefully before deciding which fill to change.

Summary

  • Change android:fillColor for a fixed vector color
  • Use color resources or theme attributes instead of hardcoded hex values when possible
  • Use tinting when the same icon must appear in different runtime colors
  • Be careful with multi-path drawables, because each path may need separate treatment
  • Check whether view tinting is overriding the XML color before blaming the asset itself

Course illustration
Course illustration

All Rights Reserved.