VectorDrawable: Scalable Graphics for Android

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.