Vector Drawable: co to jest, format XML i jak działa

Co to jest Vector Drawable?

Vector Drawable to zasób Androida przedstawiający obraz wektorowy w formacie XML, oparty na specyfikacji SVG (Scalable Vector Graphics). Google wprowadziła ten format w Android 5.0 (API 21) jako alternatywę dla obrazów rastrowych dla ikon, ilustracji i innych elementów graficznych interfejsu.

W przeciwieństwie do PNG, gdzie obraz przechowywany jest jako tablica pikseli o stałym rozmiarze, Vector Drawable opisuje kształty matematycznie — poprzez współrzędne punktów, krzywe Beziera, wypełnienia i obrysy. Oznacza to, że jeden obraz wektorowy może zastąpić do sześciu plików PNG dla różnych gęstości ekranu (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi), co radykalnie upraszcza utrzymanie zasobów graficznych.

Format obsługuje nie tylko statyczne obrazy, ale także animację przez AnimatedVectorDrawable, a także adaptację do ciemnego motywu i niestandardowe kolory poprzez atrybuty motywu. Od Androida 7.0 (API 24) Vector Drawable obsługuje również wypełnienia gradientowe i złożone operacje przycinania (clipPath), co rozszerza możliwości projektowania.

Główne komponenty Vector Drawable

Każdy Vector Drawable zawiera główny element vector z parametrami szerokości, wysokości i viewport — wirtualnego układu współrzędnych, w którym rysowane są kształty. Wewnątrz znajdują się grupy (group) i ścieżki (path), gdzie path definiuje geometrię poprzez sekwencję komend: M (moveTo), L (lineTo), C (cubicTo), Z (close) i innych. Każdy path może mieć własne wypełnienie (fillColor) i obrys (strokeColor), które mogą odwoływać się do zasobów motywu.

Dodatkowe elementy obejmują clip-path do przycinania, gradient do przejść gradientowych oraz atrybuty adaptacji do ciemnego motywu poprzez atrybut android:theme. Wszystkie kolory w Vector Drawable mogą być określone jako odniesienia do atrybutów motywu (np. ?attr/colorPrimary), co zmienia wygląd ikon przy zmianie motywu bez duplikowania zasobów.

Format Vector Drawable: struktura XML

Plik XML Vector Drawable umieszcza się w katalogu res/drawable/ i ma główny element <vector>. Wewnątrz mogą znajdować się zagnieżdżone <group> do organizacji hierarchii i <path> do opisu konturów. Każdy path zawiera atrybut pathData — ciąg komend rysowania w formacie ścieżki 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>

W przykładzie opisano okrąg o promieniu 10 jednostek w viewport 24×24. Parametr fillColor odwołuje się do zasobu koloru, a strokeWidth i strokeColor określają obrys. Rozmiary width i height podaje się w dp — zapewnia to prawidłowe skalowanie na ekranach z różną gęstością pikseli bez dodatkowych przekształceń.

Grupowanie i transformacje

Element group pozwala grupować wiele ścieżek path i stosować do nich wspólne transformacje: obrót (rotation), przesunięcie (translateX, translateY) i skalowanie (scaleX, scaleY). Grupy mogą być zagnieżdżone, co umożliwia tworzenie złożonej hierarchii z setek elementów bez utraty wydajności.

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

Grupowanie z atrybutem pivotX/pivotY jest używane do animacji: można obracać lub skalować część obrazu niezależnie od pozostałych elementów, co jest szczególnie przydatne do tworzenia animowanych ikon stanu (np. ładowanie → sukces).

Vector Drawable a grafika rastrowa

Wybór między grafiką wektorową a rastrową zależy od scenariusza użycia. Vector Drawable jest idealny dla ikon, ilustracji i elementów interfejsu z niewielką liczbą szczegółów, podczas gdy zdjęcia i złożone obrazy z tysiącami kolorów pozostają w formatach rastrowych.

Według Android Performance Patterns (Google I/O 2016), zastąpienie ikon PNG na Vector Drawable zmniejsza rozmiar APK o 40–60% dla aplikacji z dużą liczbą zasobów graficznych. Jednak przy renderowaniu złożonych wektorów z setkami ścieżek path obciążenie CPU wzrasta, dlatego do animacji i częstego przerysowywania zaleca się używanie wstępnie buforowanych rasterów.

Kiedy wybrać Vector Drawable

Vector Drawable jest optymalny dla ikon interfejsu (pasek narzędzi, nawigacja, statusy), logo, prostych ilustracji i animowanych elementów. Format jest szczególnie korzystny przy obsłudze wielu ekranów: zamiast generować PNG dla sześciu gęstości wystarczy jeden plik XML. Upraszcza to utrzymanie projektu i eliminuje błędy niezgodności rozmiarów. Do zdjęć i obrazów z fotorealistycznymi gradientami wciąż używa się formatów rastrowych z kompresją WebP.

Animacja Vector Drawable

Android obsługuje animację Vector Drawable poprzez dwa mechanizmy: AnimatedVectorDrawable (dostępny od API 21) i AnimatedStateListDrawable. Pierwszy pozwala animować atrybuty path — obrót, przesunięcie, zmianę koloru i kształtu. Drugi przełącza między różnymi stanami (naciśnięcie, zaznaczenie) z płynnym przejściem.

AnimatedVectorDrawable używa trzech plików XML: samego Vector Drawable, ObjectAnimator z opisem animacji oraz łączącego AnimatedVectorDrawable, który łączy target (nazwę grupy lub ścieżki) z animatorem. Animacja może zmieniać fillColor, strokeColor, rotation, translateX/Y, scaleX/Y, a nawet pathData — czyli płynnie przekształcać jeden kształt w inny (morphing).

Przykład animacji morfingu

Rozważmy animację, w której ikona «plus» zamienia się w «krzyżyk». Główne ograniczenie: liczba komend pathData musi być zgodna w stanie początkowym i końcowym, w przeciwnym razie animacja nie zadziała.

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

Animacja ObjectAnimator plus_to_close zmienia właściwość pathData od początkowej formy «plus» do formy «krzyżyk» w ciągu 300 milisekund. System automatycznie interpoluje współrzędne między dwoma zestawami komend ścieżek SVG. Taka animacja jest szeroko stosowana w Material Design do płynnych przejść stanów przycisków i ikon.

Przykłady kodu Vector Drawable

Rozważmy pełny przykład wektora XML dla ikony strzałki wstecz z obsługą ciemnego motywu. Kolor jest określany przez odniesienie do atrybutu motywu, co automatycznie zmienia kolor ikony przy przełączaniu między jasnym a ciemnym motywem bez duplikowania zasobów.

<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 z wartością ?attr/colorControlNormal automatycznie stosuje systemowy kolor elementu sterowania — w jasnym motywie jest to ciemnoszary, w ciemnym — biały. Grupa o nazwie arrow pozwala animować tę ikonę przez AnimatedVectorDrawable.

Ładowanie Vector Drawable z kodu

Do programowego ładowania Vector Drawable w Androidzie używa się klasy AppCompatResources.getDrawable() lub metody ContextCompat.getDrawable(). W nowoczesnych projektach na Jetpack Compose obrazy rastrowe i wektorowe Drawable ładuje się przez painterResource, który automatycznie określa format zasobu.

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
)

Przy użyciu AppCompatResources.getDrawable() biblioteka AppCompat sama dobiera odpowiednią wersję drawable w zależności od poziomu API: na urządzeniach starszych niż Android 5.0 (API 21) może być użyta zastępcza wersja rastrowa (fallback), na nowszych — Vector Drawable. W Jetpack Compose painterResource obsługuje tę kompatybilność automatycznie.