VectorDrawable: Scalable Graphics for Android
A VectorDrawable is like an SVG for your app, defining images with math, not pixels. Use it for icons that need to look sharp on any screen without bloating your APK. The footgun: complex vectors can be slower to render than a comparable bitmap.
Why it exists
Before VectorDrawable, supporting Android's wide range of screen densities meant creating multiple versions of each image asset (e.g., icon_mdpi.png, icon_xhdpi.png). This bloated app size and created a maintenance nightmare. VectorDrawable was introduced to solve this by providing a single, density-independent asset that scales perfectly.
The mental model
Think of a VectorDrawable as a set of drawing instructions, not a fixed picture. Instead of storing "this pixel is red, this one is blue," it stores instructions like "draw a circle here with a blue fill, then draw a line from point A to point B." Because it's a recipe, the system can render it at any size without losing quality, just like resizing a font.
How it works
A VectorDrawable is an XML file in your app's res/drawable folder. It uses a subset of the SVG path syntax to define graphics. The file specifies a virtual canvas size using viewportWidth and viewportHeight. Then, <path> elements contain the drawing commands in a pathData attribute (e.g., M for moveto, L for lineto, C for curveto). At runtime, the Android system parses this XML, executes the drawing commands, and renders the image onto the screen at the required size.
When to use it
Use VectorDrawables for simple, flat graphics like icons, logos, and basic illustrations. They are perfect for UI elements like toolbar buttons, navigation icons, and decorative shapes. Their primary benefits are a massive reduction in APK size (one XML file replaces many PNGs) and guaranteed sharpness on every screen, from a low-res watch to a 4K TV.
When not to use it
Avoid VectorDrawables for complex, photorealistic images. Photographs or detailed illustrations with many gradients, shadows, and overlapping paths are poor candidates. The computational cost to parse and draw a very complex vector can be higher than simply displaying a pre-rendered bitmap (like a PNG or WebP). If a vector has hundreds of paths, it's a signal to use a bitmap instead.
One canonical example
A simple 'add' icon. An XML file would define a 24x24 viewport. A single <path> element would contain the path data to draw a horizontal line and a vertical line, forming a plus sign. This one file ensures the plus icon is perfectly crisp on any device, replacing the need for add_mdpi.png, add_hdpi.png, add_xhdpi.png, and so on.
Interview question
For which scenario would a developer likely choose a bitmap (e.g., PNG) over a VectorDrawable in an Android application?
- a.Presenting a photorealistic image with intricate details, gradients, and shadows.Correct
- b.Displaying a simple, single-color icon that needs to scale across various screen sizes.
- c.Reducing the overall APK size by replacing multiple density-specific image assets.
- d.Ensuring the image maintains crispness and avoids pixelation on high-resolution displays.
Why? this is the answer
VectorDrawables are ideal for simple, scalable graphics, but their rendering cost increases significantly with complexity. For photorealistic or highly detailed images with many gradients and paths, a pre-rendered bitmap is often more performant than a complex VectorDrawable.
Just read this? Test yourself on what you have been reading.
Read the original → developer.android.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on android — each one lists the topics its interview covers.
See open roles