Vector drawable is the best practices for Android development

4 min readApr 16, 2018

Beginning Lollipop (Android 5.0, i.e. SDK 21), Material Design has been introduced. Vector is one of the ways to manage the Android image. Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Salable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.

What is Vector drawable?

Vector drawables allow you to replace multiple png assets with a single vector graphic, defined in XML. While previously limited to Lollipop and higher devices, both VectorDrawable and AnimatedVectorDrawable are now available through two new Support Libraries support-vector-drawable and animated-vector-drawable, respectively.

Check Google document: https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html

Vector graphics use mathematical equations to draw out your designs. This allows vector graphics to be scaled to any size without sacrificing image quality as well as maintain a small file size. Common vector file formats are .svg, .cgm, .odg, .eps, and .xml.

How to use Vector drawable?

Vector drawable support from android Lollipop (SDK 21). Build with kotlin use Android Studio version 3+, build your app with SDK 23+ and gradle version 3+. In your project build.gradle you need to include and sync your project:

android {
    compileSdkVersion 27
    buildToolsVersion "27.0.3"    defaultConfig { 
        vectorDrawables.useSupportLibrary = true
    }
}

How to import vector in Android Studio?

Android convert SVG and PSD file as own .xml format. You can get default vector drawable or you can import as well .
Right click on your project file then, New -> Vector Asset -> Asset Studio -> Local file (SVG, PSD)

How to change vector drawable modify size and color?

It’s bad easy, just edit your vector drawable file.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp" 
    android:width="24dp"
    android:viewportHeight="426.668"
    android:viewportWidth="426.668">
    <path android:fillColor="#f44336" 
        android:pathData="M401.8,74.5c-63.5,-82.4 -188.4,-33.8 -188.4,49.9c0,-83.7 -125,-132.4 -188.5,-49.9c-65.6,85.2 -0.9,234.5 188.5,320.3C402.7,309 467.4,159.7 401.8,74.5z"/>
</vector>

Use supported library resources for support for all versions.

Don’t forget to implementation in your project. (compile is deprecated use implementation)

dependencies {
    implementation 'com.android.support:support-v4:27.1.1'
    implementation 'com.android.support:appcompat-v7:27.1.1'
}

Best practices is relapse Button, ImageButton, ImageView etc with supported library resource

android.support.v7.widget.AppCompatButton
android.support.v7.widget.AppCompatImageButton
android.support.v7.widget.AppCompatImageView

Set vector drawable at AppCompatImageView.

Use app:srcCompat for set vector drawable and don’t forget to use: xmlns:app=”http://schemas.android.com/apk/res-auto"

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="imrankst1221.MainActivity">    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/img_demo"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:srcCompat="@drawable/ic_heart"/>
</android.support.constraint.ConstraintLayout>

You can also set dynamic vector drawable from your MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var mContext : Context

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mContext = this        // set vector drawable by ID 
        val drawable = AppCompatResources.getDrawable(mContext, R.drawable.ic_heart)
        img_demo.setImageDrawable(drawable)        // set vector from string drawable name 
        img_demo.setImageResource(getDrawableIdFromFileName( mContext, "ic_heart"))
    }

    // get any drawable ID by name
    private fun getDrawableIdFromFileName(context: Context, nameOfDrawable: String): Int {
        return context.resources.getIdentifier(nameOfDrawable, "drawable", context.packageName)
    }
}

Then what about Android API lower 21?

We can create wrapped drawable ic_heart_wrapped.xml for this vector inside drawable:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_heart"/>
</layer-list>

Also Vector from resources enabled into your MainActivity.kt class:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true)
}

How to get the vector icons?

Android studio already provide 900+ materiel designed vector icon. And also has some awesome website who provide free vector icon. Follow the link bellow:

Material icons: https://material.io/icons/

Streamline icons: https://material.io/icons/

Icons8: https://icons8.com/material-icons/

Flat icon: https://www.flaticon.com/packs/material-design (My favorite)