Android Vector Drawables: Defining Paths (<path>) in Kotlin XML

In Android development, vector drawables provide a resolution-independent way to define images. Using vector drawables, you can create crisp, clean icons and graphics that scale without losing quality, making them ideal for supporting multiple screen densities. The <path> element is a fundamental component in defining these vector drawables, allowing you to describe complex shapes and structures with precision.

What are Vector Drawables?

Vector drawables are XML files that describe images using vector graphics. Unlike raster images (such as PNG or JPG), vector images define shapes using mathematical paths rather than pixels. This makes them scalable without any loss in quality. Vector drawables are defined using the <vector> element in XML files, which can include various attributes and child elements like <path> to define the shapes that make up the image.

Why Use Vector Drawables?

• Scalability: Images scale to different screen densities without loss of quality.
• Smaller Size: Vector drawables are often smaller in file size than equivalent raster images.
• Dynamic Manipulation: Vector drawables can be dynamically modified via code or animation.
• Theming: They can easily be tinted and themed, allowing for easy customization.

Understanding the <path> Element

The <path> element is used to define the actual shapes in a vector drawable. It uses the android:pathData attribute to describe the path, using a set of commands and coordinates. Here’s a basic structure:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z"/>

</vector>

In this example:

• <vector>: The root element that defines the vector drawable.
• android:width and android:height: The intrinsic size of the drawable.
• android:viewportWidth and android:viewportHeight: The virtual canvas size for defining the path, which is then scaled to fit the intrinsic size.
• <path>: Defines the shape.
• android:fillColor: Specifies the fill color for the shape.
• android:pathData: Contains the sequence of commands and coordinates that define the path.

The android:pathData Attribute

The android:pathData attribute is where you define the actual shape. It uses a series of commands, each represented by a letter, followed by arguments (coordinates). Here are some common commands:

• M (move to): Moves the “pen” to the specified coordinates. (e.g., M10,10)
• L (line to): Draws a line from the current position to the specified coordinates. (e.g., L20,20)
• H (horizontal line to): Draws a horizontal line to the specified X coordinate. (e.g., H30)
• V (vertical line to): Draws a vertical line to the specified Y coordinate. (e.g., V40)
• C (curve to): Draws a cubic Bézier curve. Requires three sets of coordinates: the control point for the start of the curve, the control point for the end of the curve, and the end point of the curve. (e.g., C10,0 20,0 20,10)
• Q (quadratic Bézier curve to): Draws a quadratic Bézier curve. Requires one control point and the end point of the curve. (e.g., Q30,30 40,40)
• A (arc to): Draws an elliptical arc. Requires several parameters including the X and Y radius, rotation, arc flag, and sweep flag, along with the end point.
• Z (close path): Closes the current path by drawing a line back to the starting point.

Each command can be specified in uppercase or lowercase. Uppercase commands use absolute coordinates, while lowercase commands use relative coordinates (relative to the current position).

Example: Drawing a Simple Square

To draw a simple square using <path>:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="#00FF00"
        android:pathData="M5,5 L5,19 L19,19 L19,5 Z"/>

</vector>

Explanation:

• M5,5: Moves the starting point to (5,5).
• L5,19: Draws a line from (5,5) to (5,19).
• L19,19: Draws a line from (5,19) to (19,19).
• L19,5: Draws a line from (19,19) to (19,5).
• Z: Closes the path by drawing a line back to the starting point (5,5).

Example: Drawing a Circle

Drawing a circle using the <path> element requires a bit more complexity since there’s no direct circle command. We can approximate it using Bézier curves:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="#0000FF"
        android:pathData="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z"/>

</vector>

This command draws a circle using Bézier curves that approximate the shape:

• M12,2: Moves to the top point of the circle.
• C commands create Bézier curves that form the circular shape.

Stroke Properties

In addition to the fillColor, you can also specify stroke properties to draw outlines around the paths:

• android:strokeColor: Color of the stroke.
• android:strokeWidth: Width of the stroke.
• android:strokeLineCap: Style for the end of the stroke (butt, round, square).
• android:strokeLineJoin: Style for the corners of the stroke (miter, round, bevel).
• android:strokeMiterLimit: Limit for the miter join style.
• android:strokeAlpha: Alpha transparency of the stroke.

Here’s an example using stroke properties:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:strokeColor="#FF0000"
        android:strokeWidth="2"
        android:pathData="M5,5 L5,19 L19,19 L19,5 Z"/>

</vector>

Conclusion

Defining paths in vector drawables using the <path> element is a powerful way to create scalable and resolution-independent images in Android. By understanding the path commands and properties, you can define complex shapes and designs with precision, ensuring your app’s graphics look crisp and clean on any device. Mastering vector drawables can greatly improve the visual quality and performance of your Android applications.