Vector Drawable: nedir, XML formatı ve nasıl çalışır

Vector Drawable Nedir?

Vector Drawable, SVG (Scalable Vector Graphics) spesifikasyonuna dayalı olarak XML formatında bir vektör görüntüsünü temsil eden bir Android kaynağıdır. Google bu formatı Android 5.0 (API 21)’de simgeler, illüstrasyonlar ve diğer grafiksel UI öğeleri için raster görüntülere alternatif olarak tanıttı.

Görüntünün sabit boyutlu bir piksel dizisi olarak depolandığı PNG’nin aksine, Vector Drawable şekilleri matematiksel olarak tanımlar — nokta koordinatları, Bezier eğrileri, dolgular ve konturlar aracılığıyla. Bu, tek bir vektör görüntüsünün farklı ekran yoğunlukları (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) için altı adede kadar PNG dosyasını değiştirebileceği ve grafik kaynak bakımını çarpıcı şekilde basitleştirebileceği anlamına gelir.

Format yalnızca statik görüntüleri değil, aynı zamanda AnimatedVectorDrawable aracılığıyla animasyonun yanı sıra tema öznitelikleri aracılığıyla koyu tema uyumu ve özel renkleri de destekler. Android 7.0 (API 24)’ten itibaren Vector Drawable ayrıca gradyan dolguları ve karmaşık kırpma işlemlerini (clipPath) de destekleyerek tasarım olanaklarını genişletir.

Vector Drawable’ın Temel Bileşenleri

Her Vector Drawable, genişlik, yükseklik ve viewport (şekillerin çizildiği sanal bir koordinat sistemi) parametrelerine sahip bir kök vector öğesi içerir. İçinde gruplar (group) ve yollar (path) bulunur; path, bir dizi komut aracılığıyla geometriyi tanımlar: M (moveTo), L (lineTo), C (cubicTo), Z (close) ve diğerleri. Her path kendi fillColor ve strokeColor değerine sahip olabilir ve bunlar tema kaynaklarına başvurabilir.

Ek öğeler arasında kırpma için clip-path, gradyan geçişleri için gradient ve android:theme özniteliği aracılığıyla koyu tema uyum öznitelikleri bulunur. Vector Drawable’daki tüm renkler, tema özniteliklerine (rneğin, ?attr/colorPrimary) referans olarak belirtilebilir ve bu, kaynakları kopyalamadan temalar arasında geçiş yaparken simge görünümünü değiştirir.

Vector Drawable Formatı: XML Yapısı

Vector Drawable XML dosyası res/drawable/ dizinine yerleştirilir ve kök öğesine sahiptir. İçinde hiyerarşi organizasyonu için iç içe öğeleri ve konturları tanımlamak için öğeleri bulunabilir. Her path, bir pathData özniteliği (SVG yolu formatında bir çizim komutları dizisi) içerir.

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

Örnekte, 24×24 viewport’ta yarıçapı 10 birim olan bir daire tanımlanmıştır. fillColor parametresi bir renk kaynağına başvururken, strokeWidth ve strokeColor konturu tanımlar. Genişlik ve yükseklik dp cinsinden belirtilir — bu, ek dönüşümlere gerek kalmadan farklı piksel yoğunluklarındaki ekranlarda doğru ölçeklendirmeyi sağlar.

Gruplama ve Dönüşümler

group öğesi, birden çok yolu gruplamaya ve bunlara ortak dönüşümler uygulamaya olanak tanır: döndürme (rotation), öteleme (translateX, translateY) ve ölçekleme (scaleX, scaleY). Gruplar iç içe olabilir ve performans kaybı olmadan yüzlerce öğeden oluşan karmaşık hiyerarşiler oluşturmayı sağlar.

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

pivotX/pivotY özniteliğiyle gruplama animasyon için kullanılır: görüntünün bir kısmını diğer öğelerden bağımsız olarak döndürebilir veya ölçekleyebilirsiniz; bu, özellikle animasyonlu durum simgeleri (rneğin, yükleniyor → başarı) oluşturmak için kullanışlıdır.

Vector Drawable ve Raster Grafik Karşılaştırması

Vektör ve raster grafikler arasındaki seçim kullanım durumuna bağlıdır. Vector Drawable, az ayrıntıya sahip simgeler, illüstrasyonlar ve UI öğeleri için idealdir; binlerce renge sahip fotoğraflar ve karmaşık görüntüler ise raster formatlarda kalır.

Android Performance Patterns’e (Google I/O 2016) göre, PNG simgelerini Vector Drawable ile değiştirmek, çok sayıda grafik kaynağı olan uygulamalar için APK boyutunu %40–60 oranında azaltır. Ancak, yüzlerce yola sahip karmaşık vektörleri işlerken CPU yükü artar, bu nedenle animasyonlar ve sık yeniden çizimler için önceden önbelleğe alınmış rasterlerin kullanılması önerilir.

Vector Drawable Ne Zaman Seçilmeli

Vector Drawable, arayüz simgeleri (araç çubuğu, navigasyon, durumlar), logolar, basit illüstrasyonlar ve animasyonlu öğeler için idealdir. Format, birden çok ekranı desteklerken özellikle avantajlıdır: altı yoğunluk için PNG üretmek yerine tek bir XML dosyası yeterlidir. Bu, tasarım bakımını basitleştirir ve boyut uyumsuzluğu hatalarını ortadan kaldırır. Fotoğraflar ve fotogerçekçi gradyan görüntüleri için WebP sıkıştırmalı raster formatlar hala kullanılmaktadır.

Vector Drawable Animasyonu

Android, Vector Drawable animasyonunu iki mekanizma aracılığıyla destekler: AnimatedVectorDrawable (API 21’den itibaren kullanılabilir) ve AnimatedStateListDrawable. İlki, yol özniteliklerini (döndürme, öteleme, renk değiştirme ve şekil dönüşümü) canlandırmaya olanak tanır. İkincisi, farklı durumlar (basma, vurgulama) arasında yumuşak geçişlerle geçiş yapar.

AnimatedVectorDrawable üç XML dosyası kullanır: Vector Drawable’ın kendisi, animasyonu tanımlayan bir ObjectAnimator ve hedefi (grup veya yol adı) animatöre bağlayan bir bağlayıcı AnimatedVectorDrawable. Animasyon, fillColor, strokeColor, rotation, translateX/Y, scaleX/Y ve hatta pathData’yı (bir şekli diğerine yumuşak bir şekilde dönüştürme — morphing) değiştirebilir.

Morfing Animasyon Örneği

Artı simgesinin kapat simgesine dönüştüğü bir animasyon düşünelim. Ana sınırlama: başlangıç ve bitiş durumundaki pathData komutlarının sayısı eşleşmelidir, aksi takdirde animasyon çalışmaz.

<!-- 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, 300 milisaniye içinde pathData özelliğini orijinal artı şeklinden kapat şekline değiştirir. Sistem, iki SVG yolu komut kümesi arasındaki koordinatları otomatik olarak enterpole eder. Bu tür animasyon, Material Design’da düğme ve simge durumu geçişlerinde yaygın olarak kullanılır.

Vector Drawable Kod Örnekleri

Koyu tema desteği olan bir geri ok simgesi için tam XML vektör örneğine bakalım. Renk, bir tema özniteliğine referansla ayarlanır ve kaynakları kopyalamadan açık ve koyu temalar arasında geçiş yaparken simge rengini otomatik olarak değiştirir.

<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 parametresi ?attr/colorControlNormal değeriyle sistem kontrol rengini otomatik olarak uygular — açık temada koyu gri, koyu temada beyaz. Arrow adlı grup, bu simgeyi AnimatedVectorDrawable aracılığıyla canlandırmaya olanak tanır.

Koddan Vector Drawable Yükleme

Android’de programlı olarak bir Vector Drawable yüklemek için AppCompatResources.getDrawable() sınıfını veya ContextCompat.getDrawable() yöntemini kullanın. Modern Jetpack Compose projelerinde, raster ve vektör Drawable’lar, kaynak formatını otomatik olarak belirleyen painterResource aracılığıyla yüklenir.

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() kullanırken, AppCompat kitaplığı API seviyesine göre otomatik olarak doğru drawable sürümünü seçer: Android 5.0 (API 21) öncesi cihazlarda bir raster yedek kullanılabilir; daha yeni cihazlarda Vector Drawable kullanılır. Jetpack Compose’da painterResource bu uyumluluğu otomatik olarak yönetir.