Using Vector Drawables has become a good practice among Android Developers, they scale without loosing any resolution and use less space than .jpg and .png resources... Β so, what's going on? πŸ€”

Should I read this post?

  • If you use Vector Drawables AND! your apps will run on Kitkat or older android versions: YES!
  • else: Nope, you should be good πŸ‘πŸΌ

Now that it's just us devs having troubles letting go older version's support, here is what happens: When gradle builds an application that has Vector Drawable resources and minSdkVersion <21, it will generate .png files from the Vector Drawables in order to provide compatibility to Android devices running versions older than Lollipop (Vector Drawable support was introduced on API level 21), that's why the resulting APK is not as fit as you would expect.

Is there a fix for this?

YES! there is an AndroidX compatibility library that addresses this issue. Once you enable and use this library properly, you should have Vector Drawable support all the way back to API level 7 πŸ‘ŒπŸΌ

ok, how do I do that?

Here you have the explanation in the official documentation, BUT! I'll explain the whole thing in detail if you wanna keep reading :)

These are the 3 steps we'll follow:

1. Enable support library for vector drawables in build.gradle file (app level)

//For Gradle Plugin 2.0+
 android {
   defaultConfig {
     vectorDrawables.useSupportLibrary = true
    }
 }
//For Gradle Plugin 1.5 or below
android {
  defaultConfig {
    // Stops the Gradle plugin’s automatic rasterization of vectors
    generatedDensities = []
  }
  // Flag notifies aapt to keep the attribute IDs around
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

2. Add the "app" namespace into the root view of the layout where you'll use the Vector Drawable

xmlns:app="http://schemas.android.com/apk/res-auto"

The result should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_android" />
</LinearLayout>

3. Make sure to use app:srcCompat instead of app:src on the ImageView that will display the Vector Drawable

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_android" />
</LinearLayout>

And we're done! πŸŽ‰ by following those steps in your app layouts, you should be preventing gradle from creating those additional .png files for your Vector Drawables πŸ˜ƒ

Thanks for reading the whole post! πŸ₯‡πŸ‘ŒπŸ€“