Vector Drawable: khái niệm, định dạng XML và cách hoạt động

Vector Drawable là gì?

Vector Drawable là tài nguyên Android biểu diễn hình ảnh vector ở định dạng XML, dựa trên đặc tả SVG (Scalable Vector Graphics). Google đã giới thiệu định dạng này trong Android 5.0 (API 21) như một sự thay thế cho hình ảnh raster cho các biểu tượng, hình minh họa và các thành phần giao diện đồ họa khác.

Không giống PNG, nơi hình ảnh được lưu trữ dưới dạng mảng pixel kích thước cố định, Vector Drawable mô tả hình dạng một cách toán học — thông qua tọa độ điểm, đường cong Bezier, phần tô và nét vẽ. Điều này có nghĩa là một hình ảnh vector duy nhất có thể thay thế tới sáu tập PNG cho các mật độ màn hình khác nhau (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), đơn giản hóa đáng kể việc bảo trì tài nguyên đồ họa.

Định dạng hỗ trợ không chỉ hình ảnh tĩnh mà còn hoạt ảnh qua AnimatedVectorDrawable, cũng như thích ứng với chủ đề tối và màu sắc tùy chỉnh thông qua các thuộc tính chủ đề. Từ Android 7.0 (API 24), Vector Drawable cũng hỗ trợ tô màu chuyển tiếp và các thao tác cắt phức tạp (clipPath), mở rộng khả năng thiết kế.

Các thành phần chính của Vector Drawable

Mỗi Vector Drawable chứa một phần tử gốc vector với các tham số chiều rộng, chiều cao và viewport — một hệ tọa độ ảo nơi các hình dạng được vẽ. Bên trong là các nhóm (group) và đường dẫn (path), nơi path xác định hình học thông qua một chuỗi các lệnh: M (moveTo), L (lineTo), C (cubicTo), Z (close) và các lệnh khác. Mỗi path có thể có fillColor và strokeColor riêng, có thể tham chiếu đến tài nguyên chủ đề.

Các thành phần bổ sung bao gồm clip-path để cắt, gradient cho chuyển tiếp màu và các thuộc tính thích ứng chủ đề tối thông qua thuộc tính android:theme. Tất cả màu sắc trong Vector Drawable có thể được chỉ định dưới dạng tham chiếu đến các thuộc tính chủ đề (ví dụ: ?attr/colorPrimary), thay đổi giao diện biểu tượng khi chuyển đổi chủ đề mà không trùng lặp tài nguyên.

Định dạng Vector Drawable: cấu trúc XML

Tập XML Vector Drawable được đặt trong thư mục res/drawable/ và có phần tử gốc . Bên trong có thể có các phần tử lồng nhau để tổ chức phân cấp và các phần tử để mô tả đường viền. Mỗi path chứa một thuộc tính pathData — một chuỗi các lệnh vẽ ở định dạng đường dẫn SVG.

<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="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

Ví dụ mô tả một hình tròn có bán kính 10 đơn vị trong viewport 24×24. Tham số fillColor tham chiếu đến tài nguyên màu, trong khi strokeWidth và strokeColor xác định nét vẽ. Chiều rộng và chiều cao được chỉ định bằng dp — điều này đảm bảo tỷ lệ chính xác trên các màn hình có mật độ pixel khác nhau mà không cần chuyển đổi bổ sung.

Nhóm và các phép biến đổi

Phần tử group cho phép nhóm nhiều đường dẫn và áp dụng các phép biến đổi chung: xoay (rotation), dịch chuyển (translateX, translateY) và tỷ lệ (scaleX, scaleY). Các nhóm có thể được lồng nhau, cho phép tạo các hệ thống phân cấp phức tạp với hàng trăm phần tử mà không mất hiệu suất.

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

Việc nhóm với thuộc tính pivotX/pivotY được sử dụng cho hoạt ảnh: bạn có thể xoay hoặc thay đổi tỷ lệ một phần của hình ảnh một cách độc lập với các phần tử khác, đặc biệt hữu ích để tạo các biểu tượng trạng thái hoạt hình (ví dụ: đang tải → thành công).

Vector Drawable so với đồ họa raster

Việc lựa chọn giữa đồ họa vector và raster phụ thuộc vào trường hợp sử dụng. Vector Drawable lý tưởng cho các biểu tượng, hình minh họa và các thành phần giao diện có ít chi tiết, trong khi các ảnh chụp và hình ảnh phức tạp với hàng ngàn màu sắc vẫn thuộc về định dạng raster.

Theo Android Performance Patterns (Google I/O 2016), việc thay thế các biểu tượng PNG bằng Vector Drawable giảm kích thước APK từ 40–60% cho các ứng dụng có nhiều tài nguyên đồ họa. Tuy nhiên, khi hiển thị các vector phức tạp với hàng trăm path, tải CPU tăng lên, do đó đối với hoạt ảnh và các lần vẽ lại thường xuyên, nên sử dụng raster được lưu vùng đệm trước.

Khi nào nên chọn Vector Drawable

Vector Drawable tối ưu cho các biểu tượng giao diện (thanh công cụ, điều hướng, trạng thái), logo, hình minh họa đơn giản và các thành phần hoạt hình. Định dạng đặc biệt có lợi khi hỗ trợ nhiều màn hình: thay vì tạo PNG cho sáu mật độ, chỉ cần một tập XML duy nhất. Điều này đơn giản hóa việc bảo trì thiết kế và loại bỏ lỗi không khớp kích thước. Đối với ảnh chụp và hình ảnh có chuyển tiếp màu chân thực, các định dạng raster với nén WebP vẫn được sử dụng.

Hoạt ảnh Vector Drawable

Android hỗ trợ hoạt ảnh Vector Drawable thông qua hai cơ chế: AnimatedVectorDrawable (có sẵn từ API 21) và AnimatedStateListDrawable. Cơ chế đầu tiên cho phép tạo hoạt ảnh cho các thuộc tính path — xoay, dịch chuyển, thay đổi màu sắc và biến đổi hình dạng. Cơ chế thứ hai chuyển đổi giữa các trạng thái khác nhau (nhấn, làm nổi bật) với các chuyển tiếp mượt mà.

AnimatedVectorDrawable sử dụng ba tập XML: Vector Drawable, ObjectAnimator mô tả hoạt ảnh và AnimatedVectorDrawable liên kết kết nối mục tiêu (tên nhóm hoặc path) với trình tạo hoạt ảnh. Hoạt ảnh có thể thay đổi fillColor, strokeColor, rotation, translateX/Y, scaleX/Y và thậm chí cả pathData — biến đổi một hình dạng thành hình dạng khác một cách mượt mà (morphing).

Ví dụ hoạt ảnh morphing

Hãy xem xét một hoạt ảnh nơi biểu tượng dấu cộng biến thành biểu tượng dấu nhân. Giới hạn chính: số lượng lệnh pathData phải khớp ở trạng thái ban đầu và cuối, nếu không hoạt ảnh sẽ không hoạt động.

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

ObjectAnimator plus_to_close thay đổi thuộc tính pathData từ hình dạng dấu cộng ban đầu sang hình dạng dấu nhân trong 300 mili giây. Hệ thống tự động nội suy tọa độ giữa hai tập lệnh đường dẫn SVG. Loại hoạt ảnh này được sử dụng rộng rãi trong Material Design cho các chuyển tiếp trạng thái nút và biểu tượng mượt mà.

Ví dụ mã Vector Drawable

Hãy xem một ví dụ XML vector hoàn chỉnh cho biểu tượng mũi tên quay lại với hỗ trợ chủ đề tối. Màu sắc được thiết lập thông qua tham chiếu đến một thuộc tính chủ đề, tự động thay đổi màu biểu tượng khi chuyển đổi giữa chủ đề sáng và tối mà không trùng lặp tài nguyên.

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

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

Tham số android:tint với giá trị ?attr/colorControlNormal tự động áp dụng màu điều khiển hệ thống — xám đậm trên chủ đề sáng, trắng trên chủ đề tối. Nhóm có tên arrow cho phép tạo hoạt ảnh cho biểu tượng này qua AnimatedVectorDrawable.

Tải Vector Drawable từ mã

Để tải Vector Drawable theo chương trình trong Android, hãy sử dụng lớp AppCompatResources.getDrawable() hoặc phương thức ContextCompat.getDrawable(). Trong các dự án Jetpack Compose hiện đại, Drawable raster và vector được tải qua painterResource, tự động xác định định dạng tài nguyên.

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

Khi sử dụng AppCompatResources.getDrawable(), thư viện AppCompat tự động chọn phiên bản drawable chính xác dựa trên cấp độ API: trên thiết bị trước Android 5.0 (API 21), có thể sử dụng fallback raster; trên thiết bị mới hơn, Vector Drawable được sử dụng. Trong Jetpack Compose, painterResource xử lý tương thích này tự động.