Naukri.com job search app is using lot of icons which increase the application size so we started using Vector Drawables. It will reduce the app size and complexity of maintaining different versions of assests(hdpi, mdpi…). In this blog we’ll take a look at how we used them and some of the advantages they give us, and how we can get some really impressive results from relatively small amounts of code.
Simply explained, vector graphics are a way of describing graphical elements using geometric shapes. They are particularly well suited to graphical elements created in packages such as Adobe Illustrator where simple geometric shapes may be combined into much more complex elements. Bitmap graphics, on the other hand, define the color value for each pixel and are particularly well suited to photographic images. The big advantage of using vector graphics (where appropriate) is that they are rendered at run time, so will automatically be rendered at the pixel density of the device on which they are being rendered – thereby giving smooth graphics irrespective of device capabilities. They are also usually much smaller than the bitmap version of the same graphic.
They do, however, come with a computational overhead at run time which may be an issue for more complex graphical elements.
The graphical elements which are well suited to vector representation can replace mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi bitmap versions of a specific drawable with a single VectorDrawable which will be a fraction of the size of even the mdpi bitmap version.
In Android Studio(we use 1.4), Google added a new tool to better support vector assets, the Vector Asset Studio. With this feature, importing SVG files is made easier and you can now use any of the material design icon vector assets provided by the software. The Vector Asset Studio generates a XML file for your VectorDrawable using either the data from a SVG file or the material icons provided by the Google material design specification. Although Vector Asset Studio supports the essential standard of the SVG format, it does not currently support all SVG features, something you should keep in mind when importing your files. If an error is encountered during the importation process, simplify your SVG file and try again.
Vector Asset Studio
Here is a simple VectorDrawable – ( res/drawable/smaple.xml )
<vector xmlns:android=”http://schemas.android.com/apk/res/android”
android:height=”64dp”
android:width=”64dp”
android:viewportHeight=”600″
android:viewportWidth=”600″ >
<group
android:name=”rotationGroup”
android:pivotX=”300.0″
android:pivotY=”300.0″
android:rotation=”45.0″ >
<path
android:name=”v”
android:fillColor=”#000000″
android:pathData=”M300,70 l 0,-70 70,70 0,0 -70,70z” />
</group>
</vector>
Vector Drawable Usage in Naukri App
In Post-Lollipop Versions, this drawable can be simply used as –
<RelativeLayout 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:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:paddingBottom=”@dimen/activity_vertical_margin”
tools:context=”.VectorDrawablesActivity”>
<ImageView
android:id=”@+id/android”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/sample”
android:contentDescription=”@null” />
</RelativeLayout>
For Pre-Lollipop Versions,
VectorDrawable is now available through support-vector-drawable library.
Android Studio 1.4 introduced limited support for vector drawables by generating pngs at build time. To disable this functionality (and gain the true advantage and space savings of this Support Library), you need to add vectorDrawables.useSupportLibrary = true to your build.gradle file:
// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
In every activity, we need to add the following block –
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
You’ll note this new attribute only exists in the version 2.0 of the Gradle Plugin. If you are using Gradle 1.5 you’ll instead use
// Gradle Plugin 1.5
android {
defaultConfig {
generatedDensities = []
}
// This is handled for you by the 2.0+ Gradle Plugin
aaptOptions {
additionalParameters “–no-version-vectors”
}
}
You’ll be able to use VectorDrawableCompat back to API 7 and higher devices. Due to how drawables are loaded by Android, not every place that accepts a drawable id (such as in an XML file) will support loading vector drawables. Thankfully, AppCompat has added a number of features to make it easy to use your new vector drawables.Firstly, when using AppCompat with ImageView (or subclasses such as ImageButton and FloatingActionButton), you’ll be able to use the new app:srcCompat attribute to reference vector drawables (as well as any other drawable available to android:src):
<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
app:srcCompat=”@drawable/ic_add” />
And if you’re changing drawables at runtime, you’ll be able to use the same setImageResource() method as before – no changes there. Using AppCompat and app:srcCompat is the most foolproof method of integrating vector drawables into your app.
Benefits
Vector Drawables will significantly reduce our APK size and this will also make apps much easier to maintain because we won’t need to add new assets when we need to support additional screen densities.
For instance,
Before enabling vectorDrawables.useSupportLibrary = true, Naukri.com’s Android App was 6.5 MB but enabling it reduced the App’s size to 5.5 MB.
The All-New Naukri iOS App (6.0)
I besides think therefore, perfectly written post!
Highly energetic blog, I liked that a lot. Will there be a part 2?
great post, very informative. I ponder why another experts of the
sector don’t realize this. You should proceed your writing.
I am confident, you possess an incredible readers’ base already!
Simply desire to say your article is as surprising. The clarity in your post is just
spectacular and i could assume you are an expert on this subject.
Well with your permission allow me to grab your feed to keep updated with forthcoming post.
Thanks a million and please keep up the enjoyable work.