I first thought the purpose of Vector assets is that, it enables us to scale up/ scale down without compromise image quality.
If so, may I know why do we need to specific size during vector image generation in Android Studio?
I tend to generate 2 different sizes of Vector.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M19,2h-4.18C14.4,0.84 13.3,0 12,0c-1.3,0 -2.4,0.84 -2.82,2L5,2c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2L21,4c0,-1.1 -0.9,-2 -2,-2zM12,2c0.55,0 1,0.45 1,1s-0.45,1 -1,1 -1,-0.45 -1,-1 0.45,-1 1,-1zM19,20L5,20L5,4h2v3h10L17,4h2v16z"/>
</vector>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="96dp"
android:height="96dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M19,2h-4.18C14.4,0.84 13.3,0 12,0c-1.3,0 -2.4,0.84 -2.82,2L5,2c-1.1,0 -2,0.9 -2,2v16c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2L21,4c0,-1.1 -0.9,-2 -2,-2zM12,2c0.55,0 1,0.45 1,1s-0.45,1 -1,1 -1,-0.45 -1,-1 0.45,-1 1,-1zM19,20L5,20L5,4h2v3h10L17,4h2v16z"/>
</vector>
The content looks same except for android:width
and android:height
parameters.
The major advantage of using a vector drawable is image scalability. It can be scaled without loss of display quality, which means the same file is resized for different screen densities without loss of image quality. This results in smaller APK files and less developer maintenance.
On android go to photos, select your photo and click the ... in the top right. Scroll to bottom of page to find image size.
The drawback is that they might take longer to draw, etc since there's more of parsing and drawing going on than just using a bitmap. This should although be neglectable if you keep your vectors simple.
Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.
I can't give you a full explaination, but here is what I think.
Some image containers really depend on the size of the drawable to draw the image correctly. They cannot use viewportHeight
and viewportWidth
, so width
and height
is what they look for.
In my case, when loading a Marker
on GoogleMap
, I cannot change the size of marker programatically. The map use the exact size of the drawable to be the size of the marker. When I use VectorDrawable
for the marker, I have to modify the width
and height
to the marker size I want.
The GoogleMap Marker
is the image container I am talking about that always need the exact source's size.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With