Vector Drawable: шта је то, XML формат и како ради

Шта је Vector Drawable?

Vector Drawable је Android ресурс који представља векторску слику у XML формату, заснован на SVG (Scalable Vector Graphics) спецификацији. Google је представила овај формат у Android 5.0 (API 21) као алтернативу растерским сликама за иконе, илустрације и друге графичке елементе интерфејса.

За разлику од PNG-а, где се слика чува као низ пиксела фиксне величине, Vector Drawable описује облике математички — кроз координате тачака, Безијерове криве, попуне и контуре. То значи да једна векторска слика може да замени до шест PNG датотека за различите густине екрана (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), што коренито поједностављује одржавање графичких ресурса.

Формат подржава не само статичке слике, већ и анимацију кроз AnimatedVectorDrawable, као и прилагођавање тамној теми и прилагођене боје кроз атрибуте теме. Од Android 7.0 (API 24), Vector Drawable подржава и градијентна пуњења и сложене операције сечења (clipPath), што проширује могућности дизајна.

Основне компоненте Vector Drawable

Сваки Vector Drawable садржи основни елемент vector са параметрима ширине, висине и viewport-а — виртуелног координатног система у коме се цртају облици. Унутра се налазе групе (group) и путање (path), где path дефинише геометрију кроз низ команди: M (moveTo), L (lineTo), C (cubicTo), Z (close) и других. Сваки path може имати своје попуне (fillColor) и контуре (strokeColor), које могу да се позивају на ресурсе теме.

Додатни елементи укључују clip-path за сечење, gradient за градијентне прелазе и атрибуте прилагођавања тамној теми кроз атрибут android:theme. Све боје у Vector Drawable могу бити задате као референце на атрибуте теме (нпр. ?attr/colorPrimary), што мења изглед икона при промени теме без дуплирања ресурса.

Формат Vector Drawable: XML структура

XML датотека Vector Drawable се поставља у директоријум res/drawable/ и има основни елемент <vector>. Унутра могу бити угнежвени <group> за организацију хијерархије и <path> за опис контура. Сваки path садржи атрибут pathData — низ команди цртања у формату 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>

У примеру је описан круг полупречника 10 јединица у viewport-у 24×24. Параметар fillColor се позива на ресурс боје, а strokeWidth и strokeColor задају контуру. Величине width и height се наводе у dp — то обезбеђује исправно скалирање на екранима са различитом густином пиксела без додатних трансформација.

Груписање и трансформације

Елемент group омогућава груписање више path-ова и примену заједничких трансформација: ротацију (rotation), померање (translateX, translateY) и скалирање (scaleX, scaleY). Групе могу бити угнежвене, што омогућава креирање сложене хијерархије од стотина елемената без губитка перформанси.

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

Груписање са атрибутом pivotX/pivotY се користи за анимацију: може се ротирати или скалирати део слике независно од осталих елемената, што је посебно корисно за креирање анимираних икона стања (нпр. учитавање → успех).

Vector Drawable vs растерска графика

Избор између векторске и растерске графике зависи од сценарија коришћења. Vector Drawable је идеалан за иконе, илустрације и елементе интерфејса са малим бројем детаља, док фотографије и сложене слике са хиљадама боја остају у растерским форматима.

Према Android Performance Patterns (Google I/O 2016), замена PNG икона Vector Drawable-ом смањује величину APK за 40–60% за апликације са великим бројем графичких ресурса. Међутим, при приказивању сложених вектора са стотинама path-ова оптерећење CPU-а расте, па се за анимације и честа прецртавања препоручује коришћење кешираних растера.

Када изабрати Vector Drawable

Vector Drawable је оптималан за иконе интерфејса (трака алата, навигација, статуси), логотипе, једноставне илустрације и анимиране елементе. Формат је посебно користан при подршци више екрана: уместо генерисања PNG-а за шест густина довољна је једна XML датотека. То поједностављује одржавање дизајна и елиминише грешке неусклађености величина. За фотографије и слике са фотореалистичним градијентима и даље се користе растерски формати са WebP компресијом.

Анимација Vector Drawable

Android подржава анимацију Vector Drawable кроз два механизма: AnimatedVectorDrawable (доступан од API 21) и AnimatedStateListDrawable. Први омогућава анимирање атрибута path-а — ротацију, померање, промену боје и облика. Други пребацује између различитих стања (притисак, селекција) са глатким прелазом.

AnimatedVectorDrawable користи три XML датотеке: сам Vector Drawable, ObjectAnimator са описом анимације и везујући AnimatedVectorDrawable који повезује target (име групе или путање) са аниматором. Анимација може мењати fillColor, strokeColor, rotation, translateX/Y, scaleX/Y, па чак и pathData — односно глатко трансформисати један облик у други (morphing).

Пример анимације морфинга

Размотримо анимацију у којој се икона „плус” претвара у „крстић”. Основно ограничење: број команди pathData мора бити исти у почетном и завршном стању, иначе анимација неће радити.

<!-- 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 мења својство pathData од почетног облика „плус” ка облику „крстић” за 300 милисекунди. Систем аутоматски интерполира координате између два скупа команди SVG путања. Оваква анимација се широко користи у Material Design-у за глатке прелазе стања дугмади и икона.

Примери кода Vector Drawable

Размотримо комплетан пример XML вектора за икону стрелице назад са подршком за тамну тему. Боја се задаје кроз референцу на атрибут теме, што аутоматски мења боју иконе при пребацивању између светле и тамне теме без дуплирања ресурса.

<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>

Параметар android:tint са вредношћу ?attr/colorControlNormal аутоматски примењује системску боју елемента управљања — на светлој теми је то тамносива, на тамној — бела. Група под именом arrow омогућава анимирање ове иконе кроз AnimatedVectorDrawable.

Учитавање Vector Drawable из кода

За програмско учитавање Vector Drawable-а у Android-у користи се класа AppCompatResources.getDrawable() или метод ContextCompat.getDrawable(). У савременим пројектима на Jetpack Compose-у растерски и векторски Drawable-и се учитавају кроз painterResource, који аутоматски одређује формат ресурса.

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
)

При коришћењу AppCompatResources.getDrawable() библиотека AppCompat сама бира одговарајућу верзију drawable-а у зависности од API нивоа: на уређајима старијим од Android 5.0 (API 21) може се користити растерска резервна верзија (fallback), на новијим — Vector Drawable. У Jetpack Compose-у painterResource рукује овом компатибилношћу аутоматски.