Android Vector Drawable nedir? Nasıl eklenir?

5 min readJan 1, 2019

Her uygulamada olduğu gibi Android uygulamalarında da eklenen görsellerin görüntü kalitesine, pikselleşmemesine önem vermek, kaliteli bir ürün çıkarmanın başlıca etmenlerinden birisidir. Peki herhangi bir ikon için PNG dosyası yerine neden vektörel grafikler kullanmalıyız?

Bitmap vs Vektörel grafikler

PNG, JPEG, BMP, GIF gibi dosya formatları bitmap (bit haritası) olarak adlandırılır. Çünkü resim için renkler ve konumları bir harita gibi işlenmiştir:

Eğer görsel siyah-beyaz ise 1 ve 0'lar ile ifade edilebilirler. Fakat renkli bitmap dosyalarında her bir piksel için 24 bit harcanır. Red (8bit), Green (8bit), Blue (8bit)

Vektörel grafikler ise bit haritası gibi değil, path (yol) halinde tutulurlar. Bu yollar sayesinde örneğin bir çizgi için tüm piksellerin ayrı ayrı tutulması yerine o çizginin başlangıç ve bitiş noktasının bilgisi tutulur. SVG’yi çalıştıracak tarayıcı ise dosyayı parse edip nihayetinde bitmap’e dönüştürerek görüntüyü ekrana basar. Bu sayede hem dosya boyutu azalır hem de sonsuz seviyede ölçeklenebilecek şekilde görseller oluşur. Örneğin koordinat düzlemine konulmuş SVG görseli ve kodu aşağıdaki gibidir:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="25" y="25" 
        width="200" height="200" 
        fill="lime" 
        stroke-width="4" stroke="pink" />
    <circle cx="125" cy="125" 
        r="75" 
        fill="orange" />
    <polyline points="50,150 50,200 200,200 200,100" 
        stroke="red" stroke-width="4" 
        fill="none" />
    <line x1="50" y1="50" x2="200" y2="200" 
        stroke="blue" stroke-width="4" />
</svg>

Pikselleşmeye neden olan raster görseli ve ölçeklenebilir vector görseli ayrı ayrı büyütüldüklerinde ortaya çıkan fark iseaşağıdaki gibidir:

İki görselin de başlangıç görüntü kalitesi aynı olmasına rağmen büyütüldüklerinde raster’da pikselleşme, vector’de ise görüntü kalitesinin aynı şekilde korunduğu görülüyor.

Peki neden Android’de SVG kullanmıyoruz?

Bir SVG dosyasında sadece vektörel çizim elemanları bulunmayabilir. Bir SVG dosya içerisinde SMIL animasyonlar, bitmap içerikler, çalıştırılabilir javascript kodları ve hatta GIF dahi barındırabilir.

GIF içeren SVG dosyası

Android işletim sistemini çalıştıran mobil cihazların da sınırlı donanım kaynaklarına sahip olduğunu göz önüne alırsak, böyle karmaşık script’leri ve GIF’leri çalıştıracak bir SVG’yi görüntülemek kabul edilemez bir hâl alacaktır. Bu nedenle Android için vector drawables gibi yeni bir vektörel dosya formatı oluşturulmuştur. Varolan SVG dosyanızı Asset Studio üzerinden otomatik olarak bir vector drawable’a dönüştürebilirsiniz.

Asset Studio penceresi nasıl açılır?

res dizini altında yer alan drawable dizinine sağ tıkladığınızda çıkan New > Vector Asset yolunu izlediğinizde Asset Studio penceresi açılacaktır.

Asset Studio penceresi için drawable dizinine tıklandığında New > Vector Asset yolu izlenebilir.

Not: 2. bir yöntem olarak res dizini seçili iken Ctrl + Shift + A(Mac için: Cmd + Shift + A) tuş kombinasyonu sayesinde çıkan Find Action penceresine vector asset yazıp enter’a bastığınızda da Asset Studio penceresini açabilirsiniz:

Find Action penceresinde vector asset yazıldığında Asset Studio penceresi açılabilir.

Asset studio ekranı çıktığında 2 farklı asset type ile vektörel grafik eklenebilir:

Clip art ile,
Yerel dosya (SVG, PSD) ile.

1- Clip Art ile vektörel grafik ekleme

Asset Studio karşınıza ilk çıktığında Asset Type olarak Clip Art seçilidir. Bu seçim sayesinde android studio içerisinde yer alan hazır ikonları eklemek mümkündür. Clip Art kısımdaki küçük Android ikonuna çift tıkladığınızda Select Icon penceresi açılacaktır.

Select Icon penceresinde dilediğiniz material ikonu seçebilirsiniz.

Bu pencerede sol tarafta ikonlar ilgili olduğu alana göre gruplandırılmışlardır. İsterseniz all grubu altında scroll ederek aradığınızı bulabilirsiniz. Daha deneyimli kullanıcılar ise sol taraftaki arama çubuğunu kullanabilirler. Örneğin uygulamamıza bir çiçek görseli eklemek için flo yazdığımızda local florist ikonu gelecektir. Seçip OK’a bastığımızda Asset Studio ekranına geri dönüş yapılır.

Çiçek ikonu eklemek için local florist ikonu kullanılabilir.

Tabi kullanıcılar siyah renk bir çiçek görmeyi istemeyeceklerdir. Bunun için Color kısmında 000000 olarak yazan siyah butona çift tıklayarak Select Color penceresinden istenilen renk seçilebilir veya onaltılık RGB kodu girilebilir. Daha önce seçilmiş renkler ise alt kısımdaki renk paletinde yer alırlar. Parlaklık için sağdaki kırmızı üçgen butonun yer aldığı Brightness çubuğu kullanılabilir:

Select Color penceresinden ikon renginin seçilmesi.

Choose seçildikten sonra artık ikonumuz yeşil renge sahip olduğu için Name alanında yer alan ic_local_florist_black_24dp yerine ic_local_florist_green yazabiliriz.

Clip Art’lar kare boyutunda tasarlandıkları için size alanını override etmeye gerek yoktur. Eğer ikonunuz sağdan ve soldan simetrik ise Enable auto mirroring for RTL layout ‘u işaretleyebilirsiniz. Bu alan sayesinde Arapça ve Japonca gibi sağdan sola doğru yazılan dillerde ikonun aynalanacak şekilde görüntülenmesini sağlayabilirsiniz.

Next yaptıktan sonra Confirm Icon Path ekranı görüntülenecektir. Bu ekranda ikonun hangi dizin içerisine konulacağı belirtilmektedir. Eğer halihazırda aynı isimde diğer bir ikon dosyası varsa üstüne yazılacağı da belirtilir:

Finish’e bastığınızda vektörel görsel res\drawable altında oluşturulmuş hale gelir. Artık görseli uygulamamızda kullanabiliriz. activity_main.xml dosyası içerisine aşağıdaki şekilde ImageView elemanının src özelliğine vektörel dosyanın adını vererek ekleyebilirsiniz:

Design panelinde çiçek görselinin pikselleşmiş hali sizi yanıltmasın. Vektörel grafik olduğu için cihazda kusursuz şekilde görüntülenecektir:

Design panelinde pikselleşmiş halde görüntülenebilir. Bunun yerine cihazda görüntüleyerek daha doğru sonuçlar alabilirsiniz.

2- Local File (SVG, PSD) olarak vector asset ekleme

Clip art’ta her aradığınız ikon bulunmayabilir. Bu nedenle kendi vektörel görselimizi aktarmak isteyebiliriz. Örneğin ₺ simgesi clip art’ta bulunmaz. Bunun için öncelikle TL simgesinin SVG halini Google üzerinde aratmanız gerekiyor. Wikimedia üzerinde de aşağıdaki şekilde bulunmaktadır: https://upload.wikimedia.org/wikipedia/commons/a/af/Turkish_lira_symbol_black.svg

SVG’yi indirdikten sonra adını ic_turkish_lira.svg şeklinde değiştirebilirsiniz. Asset Studio’da path kısmına dosyanın konumunu vermek gerekiyor. Daha sonra Size alanında Override seçeneğini işaretlemek gerekiyor. Çünkü TL simgesi tam bir kare boyutunda olmadığı için Asset Studio tarafından genişletilmeye çalışılacaktır. Son olarak Enable auto mirroring for RTL layout seçeneğinin işaretli olmaması gerekiyor. Çünkü TL simgesi yan çevrildiğinde bir anlam ifade etmiyor.

Son ayarları aşağıdaki gibi yapıp ekleyebilirsiniz:

activity_main.xml’e TL simgesini ekledikten sonra dosyanın son hali aşağıdaki gibi olacaktır:

Görsellerin en oranı benzer olması için weight alanı ekledim.

Projeyi çalıştırdığınızda aşağıdaki gibi bir görünümle karşılaşacaksınız:

Sonuç olarak

Bitmap görseller cihazda gereksiz yere alan kaplıyor. Bunun yerine vector drawable kullanıp farklı cihazlarda oluşabilecek çözünürlük sıkıntısı ve pikselleşme engellenebilir. Eğer görseliniz bitmap ise ve SVG’sini bulamadıysanız Inkscape’te bulunan Trace Bitmap özelliği yardımıyla aşağıdaki gibi SVG’ye dönüştürebilirsiniz:

Kompleks vector drawable’lardan çalışma zamanında oldukça düşük performans alabilirsiniz. Bu nedenle vektörel dosyalar olabildiğince küçük boyutlu hale getirilmeli (Max: 1MB).

Projeyi Git üzerinden aşağıdaki şekilde çekebilirsiniz:

git clone --branch 2-vector-drawable-kullanimi https://github.com/ozcanzaferayan/Ilk-Projem.git

Eğer bu yazı ile ilgili soru ve düşünceleriniz varsa aşağıda yorum kısmından yazabilirsiniz. Teşekkür etmeniz için alkış butonuna basmanız yeterli. Sonraki yazımda Android projesinde detaylı şekilde buton kullanımlarına değineceğim. Görüşmek üzere 👋