Vector Drawable: ano ito, XML format at paano ito gumagana

Ano ang Vector Drawable?

Vector Drawable ay isang Android resource na kumakatawan sa isang vector image sa XML format, batay sa SVG (Scalable Vector Graphics) specification. Ipinakilala ng Google ang format na ito sa Android 5.0 (API 21) bilang alternatibo sa mga raster image para sa mga icon, ilustrasyon, at iba pang graphical na elemento ng interface.

Hindi tulad ng PNG, kung saan ang imahe ay iniimbak bilang isang array ng mga pixel na may takdang laki, inilalarawan ng Vector Drawable ang mga hugis nang mathematically — sa pamamagitan ng mga coordinate ng puntos, Bezier curves, fill, at contour. Ito ay nangangahulugan na ang isang vector image ay maaaring pumalit sa hanggang anim na PNG file para sa iba’t ibang density ng screen (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), na radikal na nagpapasimple sa pagpapanatili ng mga graphical na resource.

Sinusuportahan ng format hindi lamang ang mga static na imahe, kundi pati na rin ang animasyon sa pamamagitan ng AnimatedVectorDrawable, pati na rin ang pag-adapt sa madilim na tema at custom na kulay sa pamamagitan ng mga theme attribute. Mula sa Android 7.0 (API 24), sinusuportahan din ng Vector Drawable ang gradient fill at kumplikadong clip operation (clipPath), na nagpapalawak ng mga posibilidad ng disenyo.

Mga Pangunahing Component ng Vector Drawable

Ang bawat Vector Drawable ay naglalaman ng root element vector na may mga parameter ng lapad, taas, at viewport — isang virtual coordinate system kung saan iginuguhit ang mga hugis. Sa loob ay may mga grupo (group) at mga path, kung saan ang path ay nagtatakda ng geometry sa pamamagitan ng isang sequence ng mga command: M (moveTo), L (lineTo), C (cubicTo), Z (close), at iba pa. Ang bawat path ay maaaring magkaroon ng sarili nitong fill (fillColor) at contour (strokeColor), na maaaring tumukoy sa mga theme resource.

Kasama sa mga karagdagang elemento ang clip-path para sa paggupit, gradient para sa gradient transition, at mga attribute ng pag-adapt sa madilim na tema sa pamamagitan ng attribute na android:theme. Lahat ng kulay sa Vector Drawable ay maaaring tukuyin bilang mga reference sa theme attribute (halimbawa, ?attr/colorPrimary), na nagbabago sa hitsura ng mga icon kapag nagpapalit ng tema nang hindi dineduplicate ang mga resource.

Format ng Vector Drawable: XML structure

Ang XML file ng Vector Drawable ay inilalagay sa direktoryo ng res/drawable/ at may root element na <vector>. Sa loob ay maaaring may nested <group> para sa organisasyon ng hierarchy at <path> para sa paglalarawan ng mga contour. Ang bawat path ay naglalaman ng pathData attribute — isang string ng mga drawing command sa SVG path format.

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

Sa halimbawa, inilalarawan ang isang bilog na may radius na 10 units sa viewport na 24×24. Ang parameter na fillColor ay tumutukoy sa isang color resource, habang ang strokeWidth at strokeColor ay nagtatakda ng contour. Ang mga sukat na width at height ay isinasaad sa dp — ito ay nagsisiguro ng tamang pagsusukat sa mga screen na may iba’t ibang pixel density nang walang karagdagang pagbabago.

Pag-grupo at mga Transformasyon

Ang elementong group ay nagbibigay-daan sa pag-grupo ng maraming path at paglalapat ng mga karaniwang transformasyon: rotation, paglipat (translateX, translateY), at pagsusukat (scaleX, scaleY). Ang mga grupo ay maaaring nested, na nagpapahintulot sa paglikha ng kumplikadong hierarchy ng daan-daang elemento nang walang pagkawala ng performance.

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

Ang pag-grupo na may attribute na pivotX/pivotY ay ginagamit para sa animasyon: ang bahagi ng imahe ay maaaring i-rotate o i-scale nang hiwalay mula sa iba pang mga elemento, na lalong kapaki-pakinabang para sa paglikha ng mga animated na state icon (halimbawa, naglo-load → tagumpay).

Vector Drawable vs raster graphics

Ang pagpili sa pagitan ng vector at raster graphics ay depende sa senaryo ng paggamit. Ang Vector Drawable ay mainam para sa mga icon, ilustrasyon, at elemento ng interface na may kakaunting detalye, habang ang mga larawan at kumplikadong imahe na may libu-libong kulay ay nananatili sa raster format.

Ayon sa Android Performance Patterns (Google I/O 2016), ang pagpapalit ng PNG icon ng Vector Drawable ay nagbabawas ng laki ng APK ng 40–60% para sa mga application na may maraming graphical na resource. Gayunpaman, sa pag-render ng mga komplikadong vector na may daan-daang path, tumataas ang CPU load, kaya para sa mga animasyon at madalas na pag-redraw, inirerekomenda ang paggamit ng naka-cache na raster.

Kailan pumili ng Vector Drawable

Vector Drawable ay optimal para sa mga icon ng interface (toolbar, navigation, status), logo, simpleng ilustrasyon, at animated na elemento. Ang format ay lalong kapaki-pakinabang sa pagsuporta ng maraming screen: sa halip na bumuo ng PNG para sa anim na density, isang XML file ay sapat na. Ito ay nagpapasimple sa pagpapanatili ng disenyo at nag-aalis ng mga error sa hindi pagkakatugma ng laki. Para sa mga larawan at imahe na may photorealistic gradient, ginagamit pa rin ang mga raster format na may WebP compression.

Animasyon ng Vector Drawable

Sinusuportahan ng Android ang animasyon ng Vector Drawable sa pamamagitan ng dalawang mekanismo: AnimatedVectorDrawable (magagamit mula API 21) at AnimatedStateListDrawable. Ang una ay nagbibigay-daan sa pag-animate ng mga path attribute — rotation, paglipat, pagbabago ng kulay at hugis. Ang pangalawa ay lumilipat sa pagitan ng iba’t ibang estado (pindot, pumili) na may maayos na transition.

Ang AnimatedVectorDrawable ay gumagamit ng tatlong XML file: ang Vector Drawable mismo, ObjectAnimator na may paglalarawan ng animasyon, at ang nag-uugnay na AnimatedVectorDrawable na nagkokonekta ng target (pangalan ng grupo o path) sa animator. Ang animasyon ay maaaring magbago ng fillColor, strokeColor, rotation, translateX/Y, scaleX/Y, at kahit pathData — ibig sabihin, maayos na ibahin ang isang hugis sa isa pa (morphing).

Halimbawa ng morphing animation

Isaalang-alang natin ang isang animasyon kung saan ang icon na “plus” ay nagiging “cross”. Ang pangunahing limitasyon: ang bilang ng mga pathData command ay dapat magkatugma sa simula at katapusang estado, kung hindi, hindi gagana ang animasyon.

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

Ang ObjectAnimator plus_to_close ay nagbabago ng pathData property mula sa orihinal na hugis na “plus” patungo sa hugis na “cross” sa loob ng 300 millisecond. Awtomatikong ini-interpolate ng system ang mga coordinate sa pagitan ng dalawang set ng SVG path command. Ang ganitong animasyon ay malawakang ginagamit sa Material Design para sa maayos na transition ng estado ng mga button at icon.

Mga halimbawa ng code ng Vector Drawable

Tingnan natin ang kumpletong halimbawa ng XML vector para sa icon na pabalik na arrow na may suporta sa madilim na tema. Ang kulay ay tinutukoy sa pamamagitan ng reference sa isang theme attribute, na awtomatikong nagbabago ng kulay ng icon kapag lumilipat sa pagitan ng maliwanag at madilim na tema nang hindi dineduplicate ang mga resource.

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

Ang parameter na android:tint na may halagang ?attr/colorControlNormal ay awtomatikong naglalapat ng system color ng control element — sa maliwanag na tema ito ay dark grey, sa madilim na tema ito ay puti. Ang grupong pinangalanang arrow ay nagbibigay-daan sa pag-animate ng icon na ito sa pamamagitan ng AnimatedVectorDrawable.

Pag-load ng Vector Drawable mula sa code

Para sa programmatic na pag-load ng Vector Drawable sa Android, ginagamit ang klase na AppCompatResources.getDrawable() o ang ContextCompat.getDrawable() method. Sa mga modernong proyekto sa Jetpack Compose, ang raster at vector Drawable ay nilo-load sa pamamagitan ng painterResource, na awtomatikong tumutukoy sa format ng resource.

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
)

Kapag gumagamit ng AppCompatResources.getDrawable(), ang library ng AppCompat ay pumipili ng tamang bersyon ng drawable depende sa API level: sa mga device na mas luma sa Android 5.0 (API 21) ay maaaring gumamit ng raster fallback, sa mga mas bago — Vector Drawable. Sa Jetpack Compose, ang painterResource ay awtomatikong humahawak ng compatibility na ito.