Android Vector Drawable Example using AppCompat v23.2

Please follow and like us:

Android Vector Drawable Example using AppCompat v23.2 support library

Android Vector Drawable Example using AppCompat v23.2 provides great backward compatibility to Drawable Images for API 7+ devices. We can set Android Vector Drawables to all components like ImageView, TextView, Button, ImageButton etc. Let’s Explore Android Vector Drawable Example step by step.

Download Android Vector Drawable Example Code

Android Vector Drawable is alternative to images of different resolutions. We need only one vector file for multiple screen size devices. For adding Vector Drawable we need SVG image file to convert into Vector Drawable XML file. There is a FlatIcon site who provides very large range of Flat icons for your app and also allow to download it’s SVG file for free. and for converting SVG file to Vector Drawable we use Vector Assets from Android Studio.

You can also check our last post: features list of Android Design Support Library AppCompat v23.2

For support Android Vector Drawable we need to put following things in your app’s build.gradle file

If you are using v2.0 or above of the Gradle plugin, then add following code

android{
    defaultConfig{
        vectorDrawables.useSupportLibrary=true
    }
}

If you are using v1.5.0 or bellow of the Gradle plugin, then add following code

android {
    defaultConfig {
        // Stops the Gradle plugin's automatic rasterization of vectors
        generatedDensities = []
    }

    // Flag to tell aapt to keep the attribute ids around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

How to convert SVG to Vector Drawable and add in your app

Step 1: Right Click on res folder > New > Vector Assets

Step 2: It will open prompt window of Vector Asset

Android Vector Drawable Example using AppCompat v23.2 support library

 

Step 3: You can choose SVG files from default android icons list

Android Vector Drawable Example using AppCompat v23.2 support library

Step 4: You can also load local SVG file from the computer. Here I set SVG file size as 80 dp x 80 dp

Android Vector Drawable Example using AppCompat v23.2 support library
You will find generated Vector Drawable in your Drawable Folder. For supporting Vector Drawable in your all UI components(like ImageView, TextView, Button, ImageButton etc.) we need to put Vector Drawable as an item of selector Drawable.

Let’s see simple example

I have downloaded Android Logo SVG file from FlatIcon and add it to Vector Studio and create Vector Drawable file (android_logo_noramal.xml)of 80 dp X 80 dp.

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="80dp"
    android:height="80dp"
    android:viewportHeight="505.145"
    android:viewportWidth="505.145">
    <path
        android:fillColor="#3f51b5"
        android:pathData="M68.5,164.7h-1.3c-16.6,0 -30.1,13.6 -30.1,30.1v131.1c0,16.6 13.5,30.1 30.1,30.1h1.3c16.6,0 30.1,-13.6 30.1,-30.1V194.8C98.7,178.3 85.1,164.7 68.5,164.7z" />
    <path
        android:fillColor="#3f51b5"
        android:pathData="M113.1,376.5c0,15.2 12.4,27.6 27.7,27.6h29.6v70.8c0,16.6 13.6,30.2 30.1,30.2h1.3c16.6,0 30.2,-13.5 30.2,-30.2v-70.8h41.3v70.8c0,16.6 13.6,30.2 30.2,30.2h1.3c16.6,0 30.1,-13.5 30.1,-30.2v-70.8h29.6c15.2,0 27.7,-12.4 27.7,-27.6V169.5H113.1V376.5z" />
    <path
        android:fillColor="#3f51b5"
        android:pathData="M322,44l23.5,-36.3c1.5,-2.3 0.8,-5.4 -1.5,-6.9c-2.3,-1.5 -5.4,-0.9 -6.9,1.5l-24.4,37.5c-18.3,-7.5 -38.7,-11.7 -60.2,-11.7c-21.6,0 -41.9,4.2 -60.2,11.7l-24.3,-37.5c-1.5,-2.4 -4.6,-3 -6.9,-1.5c-2.3,1.5 -3,4.6 -1.5,6.9l23.5,36.3c-42.4,20.8 -71,59.9 -71,104.8c0,2.8 0.2,5.5 0.4,8.2h280.1c0.2,-2.7 0.4,-5.4 0.4,-8.2C393,103.9 364.4,64.8 322,44zM187.7,108.9c-7.4,0 -13.5,-6 -13.5,-13.5c0,-7.5 6,-13.4 13.5,-13.4c7.5,0 13.5,6 13.5,13.4S195.1,108.9 187.7,108.9zM317.5,108.9c-7.4,0 -13.5,-6 -13.5,-13.5c0,-7.5 6,-13.4 13.5,-13.4c7.5,0 13.5,6 13.5,13.4C331,102.9 325,108.9 317.5,108.9z" />
    <path
        android:fillColor="#3f51b5"
        android:pathData="M437.9,164.7h-1.3c-16.6,0 -30.2,13.6 -30.2,30.1v131.1c0,16.6 13.6,30.1 30.2,30.1h1.3c16.6,0 30.1,-13.6 30.1,-30.1V194.8C468,178.3 454.5,164.7 437.9,164.7z" />
</vector>

To set it to all our Android UI components I have put that android_logo_noramal.xml as item of selector for Vector_image.xml file.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:drawable="@drawable/android_logo_normal" />

</selector>

Now you can use vector_image.xml as a background drawable for all your Android UI components

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:background="@drawable/vector_image" />

We can also set background vector drawable programmatically

private ImageView img;
img = (ImageView) findViewById(R.id.imgProgramatically);
img.setImageResource(R.drawable.vector_image);

One more thing that we can also make selector for button using vector drawable

Android Logo in normal state (android_logo_noramal.xml)

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="80dp"
    android:height="80dp"
    android:viewportHeight="505.145"
    android:viewportWidth="505.145">
    <path
        android:fillColor="#3f51b5"
        android:pathData="M68.5,164.7h-1.3c-16.6,0 -30.1,13.6 -30.1,30.1v131.1c0,16.6 13.5,30.1 30.1,30.1h1.3c16.6,0 30.1,-13.6 30.1,-30.1V194.8C98.7,178.3 85.1,164.7 68.5,164.7z" />
    <path
        android:fillColor="#3f51b5"
        android:pathData="M113.1,376.5c0,15.2 12.4,27.6 27.7,27.6h29.6v70.8c0,16.6 13.6,30.2 30.1,30.2h1.3c16.6,0 30.2,-13.5 30.2,-30.2v-70.8h41.3v70.8c0,16.6 13.6,30.2 30.2,30.2h1.3c16.6,0 30.1,-13.5 30.1,-30.2v-70.8h29.6c15.2,0 27.7,-12.4 27.7,-27.6V169.5H113.1V376.5z" />
    <path
        android:fillColor="#3f51b5"
        android:pathData="M322,44l23.5,-36.3c1.5,-2.3 0.8,-5.4 -1.5,-6.9c-2.3,-1.5 -5.4,-0.9 -6.9,1.5l-24.4,37.5c-18.3,-7.5 -38.7,-11.7 -60.2,-11.7c-21.6,0 -41.9,4.2 -60.2,11.7l-24.3,-37.5c-1.5,-2.4 -4.6,-3 -6.9,-1.5c-2.3,1.5 -3,4.6 -1.5,6.9l23.5,36.3c-42.4,20.8 -71,59.9 -71,104.8c0,2.8 0.2,5.5 0.4,8.2h280.1c0.2,-2.7 0.4,-5.4 0.4,-8.2C393,103.9 364.4,64.8 322,44zM187.7,108.9c-7.4,0 -13.5,-6 -13.5,-13.5c0,-7.5 6,-13.4 13.5,-13.4c7.5,0 13.5,6 13.5,13.4S195.1,108.9 187.7,108.9zM317.5,108.9c-7.4,0 -13.5,-6 -13.5,-13.5c0,-7.5 6,-13.4 13.5,-13.4c7.5,0 13.5,6 13.5,13.4C331,102.9 325,108.9 317.5,108.9z" />
    <path
        android:fillColor="#3f51b5"
        android:pathData="M437.9,164.7h-1.3c-16.6,0 -30.2,13.6 -30.2,30.1v131.1c0,16.6 13.6,30.1 30.2,30.1h1.3c16.6,0 30.1,-13.6 30.1,-30.1V194.8C468,178.3 454.5,164.7 437.9,164.7z" />
</vector>

Android Logo in selected state (android_logo_selected.xml)
Here, I have just replace fillColor attribute in Vector Drawable. it’s quite easy then create new separate color drawable.

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="80dp"
    android:height="80dp"
    android:viewportHeight="505.145"
    android:viewportWidth="505.145">
    <path
        android:fillColor="#560536"
        android:pathData="M68.5,164.7h-1.3c-16.6,0 -30.1,13.6 -30.1,30.1v131.1c0,16.6 13.5,30.1 30.1,30.1h1.3c16.6,0 30.1,-13.6 30.1,-30.1V194.8C98.7,178.3 85.1,164.7 68.5,164.7z" />
    <path
        android:fillColor="#560536"
        android:pathData="M113.1,376.5c0,15.2 12.4,27.6 27.7,27.6h29.6v70.8c0,16.6 13.6,30.2 30.1,30.2h1.3c16.6,0 30.2,-13.5 30.2,-30.2v-70.8h41.3v70.8c0,16.6 13.6,30.2 30.2,30.2h1.3c16.6,0 30.1,-13.5 30.1,-30.2v-70.8h29.6c15.2,0 27.7,-12.4 27.7,-27.6V169.5H113.1V376.5z" />
    <path
        android:fillColor="#560536"
        android:pathData="M322,44l23.5,-36.3c1.5,-2.3 0.8,-5.4 -1.5,-6.9c-2.3,-1.5 -5.4,-0.9 -6.9,1.5l-24.4,37.5c-18.3,-7.5 -38.7,-11.7 -60.2,-11.7c-21.6,0 -41.9,4.2 -60.2,11.7l-24.3,-37.5c-1.5,-2.4 -4.6,-3 -6.9,-1.5c-2.3,1.5 -3,4.6 -1.5,6.9l23.5,36.3c-42.4,20.8 -71,59.9 -71,104.8c0,2.8 0.2,5.5 0.4,8.2h280.1c0.2,-2.7 0.4,-5.4 0.4,-8.2C393,103.9 364.4,64.8 322,44zM187.7,108.9c-7.4,0 -13.5,-6 -13.5,-13.5c0,-7.5 6,-13.4 13.5,-13.4c7.5,0 13.5,6 13.5,13.4S195.1,108.9 187.7,108.9zM317.5,108.9c-7.4,0 -13.5,-6 -13.5,-13.5c0,-7.5 6,-13.4 13.5,-13.4c7.5,0 13.5,6 13.5,13.4C331,102.9 325,108.9 317.5,108.9z" />
    <path
        android:fillColor="#560536"
        android:pathData="M437.9,164.7h-1.3c-16.6,0 -30.2,13.6 -30.2,30.1v131.1c0,16.6 13.6,30.1 30.2,30.1h1.3c16.6,0 30.1,-13.6 30.1,-30.1V194.8C468,178.3 454.5,164.7 437.9,164.7z" />
</vector>

Android Logo selector with press effect (selector_vector_image.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/android_logo_normal" android:state_pressed="false" />
    <item android:drawable="@drawable/android_logo_selected" android:state_pressed="true" />
</selector>

Now, you can set this button as background
Note: if you want press effect in TextView, ImageView or any Layout file you need to add android:clickable=”true” property.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:background="@drawable/selector_vector_image"
    />

Complete Code

activity_main.xml layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.nkdroid.vectordrawable.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Set Vector Image Programmatically" />

    <ImageView
        android:id="@+id/imgProgramatically"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Set Vector Image From XML" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="@drawable/vector_image" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Set Vector Image in left to TextView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:drawableLeft="@drawable/vector_image"
        android:gravity="center"
        android:text="nkDroid"
        android:textSize="26sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Button with Vector Images Selector" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:background="@drawable/selector_vector_image"
        />
</LinearLayout>

MainActivity.java file

package com.nkdroid.vectordrawable;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView img;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView) findViewById(R.id.imgProgramatically);
        img.setImageResource(R.drawable.vector_image);
    }
}

Result after using Vector Drawable as alternative to different resolution images

Vector Drawable file size: 1.52 kb

Images of different Resolutions

  • mdpi file size: 2.39 kb
  • hdpi file size: 3.89 kb
  • xhdpi file size: 5.44 kb
  • xxhpi file size: 8.99 kb
  • xxxhdpi file size: 11.90 kb

total images size: 31.81 kb which is not at all to compare with 1.52 kb. Vector Drawable is useful for heavy graphics android application.

Limitation of Vector Drawable:

  • It will not support gradient colors
  • Take more size when then images in case complex shape of SVG file.

So better to use Vector Drawable for your app icons and simple images. For all images Vector Drawable not suggested.

Download Android Vector Drawable Example Code

Output of Android Vector Drawable Example

Android Vector Drawable Example using AppCompat v23.2 support library
Hope you like our simple solution of “How to set Android Vector Drawable using Appcompat v23.2 support library” in your android application with backward compatibility to API 7+ devices.

 

 

nirav kalola