Android vector image

Bài đăng này đã không được cập nhật trong 8 năm

Từ Android 5.0, Google đã support native vector iamge cho Android. Không như các định dạng bitmap/raster, ảnh vector có thể co dãn mà không ảnh hưởng đến chất lượng ảnh. Nó cho phép sử dụng chỉ một ảnh cho nhiều kích thước và độ phân giải màn hình.

Ảnh Vector

Ảnh được định nghĩa bởi vector hình học
Trong Android, đươc lưu bởi một VectorDrawable XML file gồm Paths và Group
Cho phép resize ảnh mà không thay đổi chất lượng ảnh

Ảnh Bitmap/Raster

Ảnh được định nghĩa bởi lưới các pixel
Lưu dưới dạng file(PNG, JPG,...)
Cần nhiều phiên bản của ảnh để hỗ trợ nhiều loại thiết bị

Creating a Vector Image

VectorDrawble

Android sử dụng lớp VectorDrawble để tạo một ảnh vector. Tận dụng VectorDrawble｀s Path và Group để định nghĩa một vector image trong xml:

Path định nghĩa đường sẽ được vẽ: các thuộc tính: pathData, fillColor, fillAlpha,...
Group định nghĩa một nhóm các Paths, chúng ta có thể sử dụng Group để tạo các chuyển động như rotation, pivotX/Y, scaleX/Y...

Đây là một ví dụ, XL file dùng để tạo một Android logo là ảnh vector:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="@dimen/image_size"
    android:height="@dimen/image_size"
    android:viewportHeight="600.0"
    android:viewportWidth="600.0">
    <path
        android:fillColor="#A4CA39"
        android:pathData="M301.314,83.298l20.159,-29.272c1.197,-1.74 0.899,-4.024 -0.666,-5.104c-1.563,-1.074 -3.805,-0.543 -4.993,1.199L294.863,80.53c-13.807,-5.439 -29.139,-8.47 -45.299,-8.47c-16.16,0 -31.496,3.028 -45.302,8.47l-20.948,-30.41c-1.201,-1.74 -3.439,-2.273 -5.003,-1.199c-1.564,1.077 -1.861,3.362 -0.664,5.104l20.166,29.272c-32.063,14.916 -54.548,43.26 -57.413,76.34h218.316C355.861,126.557 333.375,98.214 301.314,83.298"/>
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M203.956,129.438c-6.673,0 -12.08,-5.407 -12.08,-12.079c0,-6.671 5.404,-12.08 12.08,-12.08c6.668,0 12.073,5.407 12.073,12.08C216.03,124.03 210.624,129.438 203.956,129.438"/>
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M295.161,129.438c-6.668,0 -12.074,-5.407 -12.074,-12.079c0,-6.673 5.406,-12.08 12.074,-12.08c6.675,0 12.079,5.409 12.079,12.08C307.24,124.03 301.834,129.438 295.161,129.438"/>
    <path
        android:fillColor="#A4CA39"
        android:pathData="M126.383,297.598c0,13.45 -10.904,24.354 -24.355,24.354l0,0c-13.45,0 -24.354,-10.904 -24.354,-24.354V199.09c0,-13.45 10.904,-24.354 24.354,-24.354l0,0c13.451,0 24.355,10.904 24.355,24.354V297.598z"/>
    <path
        android:fillColor="#A4CA39"
        android:pathData="M140.396,175.489v177.915c0,10.566 8.566,19.133 19.135,19.133h22.633v54.744c0,13.451 10.903,24.354 24.354,24.354c13.451,0 24.355,-10.903 24.355,-24.354v-54.744h37.371v54.744c0,13.451 10.902,24.354 24.354,24.354s24.354,-10.903 24.354,-24.354v-54.744h22.633c10.569,0 19.137,-8.562 19.137,-19.133V175.489H140.396z"/>

    <group
        android:name="left_arm"
        android:pivotX="393"
        android:pivotY="190">

        <path
            android:fillColor="#A4CA39"
            android:pathData="M372.734,297.598c0,13.45 10.903,24.354 24.354,24.354l0,0c13.45,0 24.354,-10.904 24.354,-24.354V199.09c0,-13.45 -10.904,-24.354 -24.354,-24.354l0,0c-13.451,0 -24.354,10.904 -24.354,24.354V297.598z"/>

    </group>
</vector>

Trông khá kinh khủng với đống code pathData, rấtmay logo này lấy từ ảnh SVG sau đó chuyển sang VectorDrawble mà không cần phải viết mã.

Converting Scalable Vector Graphics

Ảnh vector được lưu dưới dạng SVG(Scalable Vector Graphics).Đây là XML chuẩn phát triển bởi W3C. Hầu hết các trình sửa ảnh đều hỗ trợ định dạng SVG. Tuy nhiên Android không hỗ trợ SVG native mà chỉ cung cấp qua lớp VectorDrawble. Cấu trúc của 2 định dạng này gần giống nhau nen rất dễ đẻ chuyển từ SVG sang VectorDrawble. Có một số tool nhỏ hỗ trợ việc này.

Nếu sử dụng Android Studio: File -> New -> Vector Aset chọn Local SVG File option.
Một cách khác sử dụng online http://inloop.github.io/svg2android/

SVG và VectorDrawble tương tự nhau, tuy nhiên có một số exception: ảnh SVG có support gradient, nhưng VectorDrawable thì không, do đó khi convert sẽ tồn tại lỗi convert không đúng 100% ảnh.