Vector Drawable: co to je, formát XML a jak funguje

Co je Vector Drawable?

Vector Drawable je zdroj Androidu představující vektorový obrázek ve formátu XML, založený na specifikaci SVG (Scalable Vector Graphics). Google představil tento formát v Android 5.0 (API 21) jako alternativu k rastrovým obrázkům pro ikony, ilustrace a další grafické prvky rozhraní.

Na rozdíl od PNG, kde je obrázek uložen jako pole pixelů pevné velikosti, Vector Drawable popisuje tvary matematicky — prostřednictvím souřadnic bodů, Bézierových křivek, výplní a obrysů. To znamená, že jeden vektorový obrázek může nahradit až šest PNG souborů pro různé hustoty obrazovky (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), což radikálně zjednodušuje údržbu grafických zdrojů.

Formát podporuje nejen statické obrázky, ale také animaci prostřednictvím AnimatedVectorDrawable, stejně jako přizpůsobení tmavému motivu a vlastní barvy pomocí atributů motivu. Počínaje Android 7.0 (API 24) podporuje Vector Drawable také gradientní výplně a komplexní operace ořezávání (clipPath), což rozšiřuje možnosti designu.

Hlavní komponenty Vector Drawable

Každý Vector Drawable obsahuje kořenový prvek vector s parametry šířky, výšky a viewportu — virtuálního souřadného systému, ve kterém se kreslí tvary. Uvnitř se nacházejí skupiny (group) a cesty (path), kde path definuje geometrii prostřednictvím sekvence příkazů: M (moveTo), L (lineTo), C (cubicTo), Z (close) a dalších. Každý path může mít vlastní výplň (fillColor) a obrys (strokeColor), které mohou odkazovat na zdroje motivu.

Další prvky zahrnují clip-path pro ořezávání, gradient pro přechody a atributy přizpůsobení tmavému motivu prostřednictvím atributu android:theme. Všechny barvy v Vector Drawable mohou být definovány jako odkazy na atributy motivu (např. ?attr/colorPrimary), což mění vzhled ikon při změně motivu bez duplikování zdrojů.

Formát Vector Drawable: XML struktura

XML soubor Vector Drawable je umístěn v adresáři res/drawable/ a má kořenový prvek <vector>. Uvnitř mohou být vnořené <group> pro organizaci hierarchie a <path> pro popis obrysů. Každý path obsahuje atribut pathData — řetězec příkazů kreslení ve formátu SVG cesty.

<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 příkladu je popsán kruh o poloměru 10 jednotek ve viewportu 24×24. Parametr fillColor odkazuje na zdroj barvy, zatímco strokeWidth a strokeColor definují obrys. Rozměry width a height se uvádějí v dp — to zajišťuje správné škálování na obrazovkách s různou hustotou pixelů bez dalších transformací.

Seskupování a transformace

Prvek group umožňuje seskupit několik path a použít na ně společné transformace: otáčení (rotation), posun (translateX, translateY) a škálování (scaleX, scaleY). Skupiny mohou být vnořené, což umožňuje vytvářet složitou hierarchii ze stovek prvků bez ztráty výkonu.

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

Seskupování s atributem pivotX/pivotY se používá pro animaci: část obrázku lze otáčet nebo škálovat nezávisle na ostatních prvcích, což je užitečné zejména pro vytváření animovaných ikon stavu (např. načítání → úspěch).

Vector Drawable vs rastrová grafika

Volba mezi vektorovou a rastrovou grafikou závisí na scénáři použití. Vector Drawable je ideální pro ikony, ilustrace a prvky rozhraní s malým počtem detailů, zatímco fotografie a složité obrázky s tisíci barev zůstávají v rastrových formátech.

Podle Android Performance Patterns (Google I/O 2016), nahrazení PNG ikon Vector Drawable snižuje velikost APK o 40–60% pro aplikace s velkým množstvím grafických zdrojů. Při vykreslování složitých vektorů se stovkami path však zatížení CPU roste, proto se pro animace a časté překreslování doporučuje používat kešované rastry.

Kdy zvolit Vector Drawable

Vector Drawable je optimální pro ikony rozhraní (panel nástrojů, navigace, stavy), loga, jednoduché ilustrace a animované prvky. Formát je výhodný zejména při podpoře více obrazovek: místo generování PNG pro šest hustot stačí jeden XML soubor. To zjednodušuje údržbu designu a eliminuje chyby nesouladu velikostí. Pro fotografie a obrázky s fotorealistickými přechody se stále používají rastrové formáty s kompresí WebP.

Animace Vector Drawable

Android podporuje animaci Vector Drawable prostřednictvím dvou mechanismů: AnimatedVectorDrawable (dostupný od API 21) a AnimatedStateListDrawable. První umožňuje animovat atributy path — otáčení, posun, změnu barvy a tvaru. Druhý přepíná mezi různými stavy (stisk, výběr) s plynulým přechodem.

AnimatedVectorDrawable používá tři XML soubory: samotný Vector Drawable, ObjectAnimator s popisem animace a spojovací AnimatedVectorDrawable, který propojuje target (název skupiny nebo cesty) s animátorem. Animace může měnit fillColor, strokeColor, rotation, translateX/Y, scaleX/Y a dokonce pathData — tedy plynule transformovat jeden tvar v jiný (morphing).

Příklad morphingové animace

Uvažujme animaci, při které se ikona „plus“ mění v „křížek“. Hlavní omezení: počet příkazů pathData musí být stejný v počátečním a konečném stavu, jinak animace nebude fungovat.

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

Animace ObjectAnimator plus_to_close mění vlastnost pathData z počátečního tvaru „plus“ na tvar „křížek“ za 300 milisekund. Systém automaticky interpoluje souřadnice mezi dvěma sadami příkazů SVG cest. Taková animace je široce používána v Material Design pro plynulé přechody stavů tlačítek a ikon.

Příklady kódu Vector Drawable

Podívejme se na úplný příklad XML vektoru pro ikonu šipky zpět s podporou tmavého motivu. Barva je definována odkazem na atribut motivu, což automaticky mění barvu ikony při přepínání mezi světlým a tmavým motivem bez duplikování zdrojů.

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

Parametr android:tint s hodnotou ?attr/colorControlNormal automaticky aplikuje systémovou barvu ovládacího prvku — na světlém motivu je tmavě šedá, na tmavém bílá. Skupina s názvem arrow umožňuje animovat tuto ikonu prostřednictvím AnimatedVectorDrawable.

Načtení Vector Drawable z kódu

Pro programové načtení Vector Drawable v Androidu se používá třída AppCompatResources.getDrawable() nebo metoda ContextCompat.getDrawable(). V moderních projektech na Jetpack Compose se rastrové a vektorové Drawable načítají prostřednictvím painterResource, který automaticky detekuje formát zdroje.

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
)

Při použití AppCompatResources.getDrawable() knihovna AppCompat sama vybírá správnou verzi drawable podle úrovně API: na zařízeních starších než Android 5.0 (API 21) může být použita rastrová záložní verze (fallback), na novějších Vector Drawable. V Jetpack Compose painterResource tuto kompatibilitu řeší automaticky.