1. Giriş
Son güncelleme: 08/04/22
Android 13'ten itibaren kullanıcılar uyarlanabilir başlatıcı simgelerini temaya uygun hale getirebilirler. Bu özellik sayesinde, desteklenen Android başlatıcılardaki uygulama simgeleri, kullanıcının seçtiği duvar kağıdının ve diğer temaların rengini alacak şekilde renklendirilir.
Yeni uyarlanabilir renk simgeleri de dahil olmak üzere Android uygulamanız için gereken tüm sistem öğelerini kolayca oluşturun.
Neler öğreneceksiniz?
- Farklı uygulama simgesi türleri ve bu simgeleri tasarlamayla ilgili ipuçları
- Android başlatıcı Figma şablonunu kullanma
- Android Studio'daki öğe oluşturucuyu kullanma
- Başlatıcı simgenizi Android Studio emülatörüyle önizleme
Ön koşullar
- Figma hakkında temel bilgiler
- İsteğe bağlı: Uygulama simgesi resmi (ön plan, arka plan ve tek renkli)
İhtiyacınız olanlar
- Figma hesabı
- Figma designlab dosyası
- İsteğe bağlı: Android Studio'nun yüklü olduğu bir PC
2. Başlayın
Kurulum
Başlamak için Android uygulama simgesi Figma dosyasına erişmeniz gerekir.
Öncelikle Figma'da oturum açın veya hesap oluşturun.
Figma Community'den kopyalama
Android başlatıcı şablonu dosyasına gidin veya Figma Community'de değişken yazı tiplerine geçişi arayın. Dosyayı dosyalarınıza kopyalamak için sağ üst köşedeki Kopyasını Al'ı tıklayın.
Şablonu kullanma
Android simge şablonu iki sayfadan oluşur:
- Kapak sayfasında, ilgili kavramlar ve şablonun nasıl kullanılacağı kısaca açıklanır.
- Şablon sayfasında,gerekli öğeleri oluşturmak için ihtiyacınız olan her şey üç çerçeveye (Renk, Şekil, Play Store) ayrılmış olarak yer alır.
Not: Sol katman panelinde katmanların ve grupların çoğu kilitlidir. Bunlar kilitli kalmalıdır. (Kilidi açılan resim gruplarına resim yerleştirebilirsiniz.)
Ancak öğe oluşturmaya başlamadan önce, oluşturacağımız öğelere göz atalım...
3. Android sistem simgeleri
Başlatıcı simgeleri
Başlatıcı simgeleri veya uygulama simgeleri, uygulamanızın başlatma deneyiminin önemli bir parçasıdır. Başlatıcı simgeleri, ana ekranda uygulamanıza giriş noktası olarak görünür.
Uyarlanabilir şekil
Uyarlanabilir simgeler (AdaptiveIconDrawable), cihaz özelliklerine ve kullanıcı temasına bağlı olarak farklı şekillerde görüntülenebilir. Uyarlanabilir simgeler öncelikli olarak ana ekrandaki başlatıcı tarafından kullanılsa da kısayollarda, Ayarlar uygulamasında, paylaşım iletişim kutularında ve genel bakış ekranında da kullanılabilir.
Uyarlanabilir simgeler, farklı cihaz modellerinde çeşitli şekiller görüntüleyebilir. Örneğin, bir OEM cihazında yuvarlak şekil görüntülerken başka bir cihazda köşeli yuvarlak görüntüleyebilir. Her cihaz OEM'si bir maske sağlamalıdır. Sistem daha sonra bu maskeyi, tüm uyarlanabilir simgeleri aynı şekilde oluşturmak için kullanır.
Şekle uyum sağlama özelliği, sistemin kullanıcı etkileşimiyle çeşitli animasyon efektleri uygulamasını da sağlar.
Uyarlanabilir renk
Uyarlanabilir simgeler artık kişiselleştirilmiş temalı uygulama simgelerine olanak tanımak için dinamik renk kullanabilir.
Bir kullanıcı, temalı uygulama simgelerini etkinleştirmişse (diğer bir deyişle, sistem ayarlarında Temalı simgeler açma/kapatma düğmesini açmışsa) ve başlatıcı da bu özelliği destekliyorsa sistem, kullanıcının seçtiği duvar kağıdı ve temanın rengine göre renk tonunu belirler.
Şekle uyum sağlayan simgeler gibi, uyarlanabilir renk simgeleri de ön plan ve arka plandan oluşur. Yalnızca tek renkli bir ön plan simgesi öğesi sağlanması gerekir. Sistem, arka planı ve rengi çıkarılan renk şemasıyla birlikte ele alır.
Bildirim simgesi olarak aynı tek renkli simgeyi de kullanabilirsiniz.
Eski
Eski Android sürümlerinin yüklü olduğu veya uyarlanabilir özellikleri desteklemeyen (8.0 öncesi) cihazları desteklemek için eski simgeler eklenmelidir.
Ön plan ve arka plan kaynakları yoktur ve serbest biçimli bir şekle sahip olabilirler. Sağlanan şablonu kullanıyorsanız son uyarlanabilir şekil resmi, eski simgeniz için gerekli boyutlarda dışa aktarılır.
Bildirim simgeleri
Bildirim, Android'in kullanıcıya hatırlatıcıları, diğer kullanıcıların iletişimlerini veya zamanında uygulamanızdan gelen diğer bilgileri sağlamak için uygulamanızın kullanıcı arayüzü dışında gösterdiği mesajdır. Sistem, bildirimleri farklı konumlarda ve şekillerde gösterir. Örneğin, durum çubuğunda bir simge, bildirim çekmecesinde daha ayrıntılı bir giriş, uygulama simgesi üzerinde bir rozet biçiminde ve eşlenmiş bir giyilebilir cihazda otomatik olarak gösterilir.
Mağaza posteri
Uygulamanızı Google Play'de ve diğer Google tanıtım kanallarında öne çıkarıp tanıtmak için özellik grafiği, ekran görüntüleri, kısa açıklama ve videolar kullanabilirsiniz.
Uygulama simgesi, uygulamanızın başlatıcı simgesinin yerini almaz, sadece daha yüksek kaliteli, daha yüksek çözünürlüklü bir sürümü olmalıdır.
Başlatıcı simgesine benzer şekilde, çizim tüm öğe alanını kaplayabilir veya logolar gibi çizim öğelerini ana hat ızgarası üzerinde tasarlayıp konumlandırabilirsiniz.
Mağaza girişinizi yayınlamak için 512x512 piksel boyutlarında kare bir uygulama simgesi sağlamanız gerekir. Android uygulama simgesi şablonunu kullanıyorsanız bu, uyarlanabilir şekil resmi kullanılarak dışa aktarma sırasında sağlanır.
4. Tasarımla ilgili en iyi uygulamalar
Başlatıcı simgeleri, kullanıcının uygulamanızı başlatmasını sağlar. Uygulamanıza giriş olarak kullanılacak bu öğeler tanınabilir ve okunabilir olmalıdır. Başlatıcı simgenizde bu nitelikleri sağlamaya yönelik bazı en iyi uygulamaları aşağıda bulabilirsiniz.
Resmi basit tutun. Birden fazla katman, çok sayıda efekt ve metin kullanmaktan kaçının. Bu ayrıntılar küçük boyutlarda kaybolur veya görülmesi zorlaşır. 
Karmaşık şekillerden kaçının. Logolar da bu kapsamdadır. Mümkünse basitleştirilmiş bir logo kullanın veya kullanıcılarınızın uygulamanızla ilişkilendirdiği sembolleri tercih edin. Okunabilir ve belirgin bir şekil, kullanıcıların uygulamanızı farklı bağlamlarda (uyarlanabilir renk ve bildirim) kolayca tanımasını sağlayarak birlik oluşturmaya yardımcı olur. 
Izgara kullanma Ön plandaki çizimin, tüm alanı kaplayan çizimler de dahil olmak üzere kırpıldığında çalışmasını sağlamak için ızgaradan veya ana hatlardan yararlanın. 
Kontrastı göz önünde bulundurun. Uyarlanabilir şekil ve eski simgelerde, simge ön planı ile arka planı arasında okunabilir bir kontrast olduğundan emin olun. Sistem gölgesiyle karıştırılabilecek yoğun gölgeler kullanmaktan kaçının. 
Çizimleri güvenli bölgelerde tutun. Ön plandaki öğeleri 72x72 piksel boyutunda tutun (tam taşma kullanmıyorsanız). Arka planları 108x108 piksel boyutunda tutun. Not: Simge şablonu reklam öğesi çerçevesi, simge reklam öğesi oluşturmanıza olanak tanımak için 72x72 pikselden daha büyüktür. Öğeler, spesifikasyonlara uyacak şekilde yeniden boyutlandırılır.
Vektör biçimi. Kafes biçimi (ör. PNG, JPG ve GIF dosyaları) yerine vektör biçiminde (ör. SVG, AI, PDF ve EPS dosyaları) olan resimler kullanmaya çalışın. Bu sayede, resminizin daha yeni özelliklerle uyumlu olması ve daha kolay düzenlenmesi sağlanır. 
5. Uyarlanabilir renk ve bildirim simgeleri
Artık kendi Android sistem simgelerinizi oluşturabilirsiniz.
- Android uygulama simgeleri Figma dosyasını bulun.
- Dosyada Uyarlanabilir renk çerçevesini bulun. Sol katmanlar panelinde Uyarlanabilir renk > Bileşenler > art > Icon artwork area > Themed Icon art < add your icon'u (Temalı simge resmi < simgenizi ekleyin) bulun. Tek renkli bir simgeniz varsa örnek Android simgesinin yerine kullanmak için buraya kopyalayın ve 6. adıma geçin.
- Tek renkli bir simgeniz yoksa uygulamanızla ilgili bir logo veya simgeyle başlayın. Simgenizi güncellemek için tasarım ipuçlarını inceleyin. Öncelikle basitleştirme ve karmaşık şekillerden kaçınma Örneğin, uygulama içinde kullanılan çizimlerde daha az karmaşık yaprak şekilleriyle basitleştirme yapılmıştır. Gölgeler ve çizgi ayrıntıları beyaz boşlukla simüle edilir.
- Artık ana hat ızgarasını kullanarak boyutlandırmayı güncelleyin. Burada yeniden boyutlandırma ayarını Ölçekle olarak belirledik ve resmin ön plan güvenli bölgesi içinde olduğundan emin olduk. Şablon, 4x çözünürlükte resimlerle ayarlanır ve dışa aktarma için otomatik olarak yeniden boyutlandırılır. Böylece simgelerinizi daha büyük ölçekte tasarlayabilirsiniz.
- Dosya, dinamik rengin önizlemesine yardımcı olmak için Material Tema Oluşturucu ile çalışacak şekilde ayarlanır. Ön plan simge rengi stilini On-surface-variant ile bağlayın.
- Artık Eklenti Paneli'nden Material Theme Builder'ı açarak kaynak rengi karıştırabilir veya çıkarılan kaynak rengi kullanarak renkleri güncellemek için bir resim ekleyebilirsiniz.
- Bu, farklı çözünürlüklerde veya ana ekranda nasıl görünecek? Şablon, resim çerçevelerine yerleştirilen resimlerin çeşitli önizleme bağlamlarında görünecek şekilde ayarlanır.
- Sistem, tek renkli simgeyi bildirim olarak kullanır ve önizlemelerde bu şekilde gösterir.
6. Uyarlanabilir şekil ve eski simgeler
Şimdi, simgenin geniş çapta desteklenmesini sağlamak için uyarlanabilir şekli ve eski simgeleri oluşturacağız.
- Dosyada Şekil çerçevesi'ni bulun. Simge arka planı < simgenizi ekleyin* seçeneğini bulmak için soldaki katmanlar paneline bakın. Hazır bir simgeniz varsa örnek Android simgesinin yerine kopyalayın ve 5. adıma geçin.* Simgeniz yoksa uygulamanızla ilgili bir logo veya simgeyle başlayın ya da tek renkli simgeyi yeniden kullanın.
- Simgelerle ilgili en iyi uygulamaları göz önünde bulundurarak ön plan simgesini güncelleyin. Burada orijinal resim renklerini geri getirdim ancak ayrıntıları minimum düzeyde tuttum.
- Artık ana hat ızgarasını kullanarak boyutlandırmayı güncelleyin. Burada yeniden boyutlandırma seçeneğini Ölçekle olarak ayarladık ve posterin ön plan güvenli bölgesinde olduğundan emin olduk.
- Uyarlanabilir şekilli uygulama simgeleri de farklı bir arka plana sahip olabilir. Bu sayede simgenin katmanları güvenli bir şekilde kırpılabilir ve etkileşimde ince hareket efektleri sağlanabilir. Android Studio'da düz renkli bir arka plan da kullanabilir ve tanımlayabilirsiniz.
- Önizlemeler, ön plan ve arka planların birlikte nasıl göründüğünü, ana ekranda, farklı kırpılmış şekillerde ve eski bir simge olarak nasıl göründüğünü gösterecek şekilde güncellenir.
Kırpmak için kullanılan şekil, simgeler seçilip şekil varyantı seçeneği değiştirilerek ana ekran önizlemesinde güncellenebilir. 
7. Dışa aktarılıyor
Harika, artık şablonu uygulama simgelerinizle güncellediniz. Uygulama için bunları dışa aktaralım.
- Tuvalde hiçbir öğenin seçilmediğinden emin olun.
- Figma menüsü > Dosya > Dışa Aktar'a (Shift + Cmd + E) gidin.
- Dışa aktarma menüsünde dışa aktarma işlemini onaylayın. Bu işlem, şablondaki öğeleri indirir.
Dışa aktarma işlemine neler dahildir?
Dışa aktarılan öğeler, uygulama simgenizi uygulamak için gereken tüm dosyalara sahiptir.
- Figma, uyarlanabilir renk için tek renkli ön plan simgesini SVG dosyası olarak, uyarlanabilir şekil simgeleri için ise hem ön planı hem de arka planı dışa aktarır.
- Figma, çözünürlüğe göre düzenlenmiş farklı mipmap dizinlerinde eski simgeler de sağlar.
İşte bu kadar. Simgeniz geliştirme ekibine gönderilmeye hazır.
Alternatif olarak, simgelerinizi Android Studio'da önizlemek ve bu SVG'leri nihai öğe biçimine dönüştürmek istiyorsanız bir sonraki adıma geçin.
8. Image Asset Studio'yu kullanma
Android Studio'yu kullanmaya başlama
- Android Studio'yu indirip yükleyin.
- Android Studio'yu başlatın.
Android Studio, yeni bir proje başlatma veya mevcut projeleri seçme seçeneklerini sunar.
- Şimdilik yeni bir proje seçin. Aşağıdaki ekranlarda, yeni projenizi oluşturma adımları açıklanmaktadır.
- Yalnızca başlatma simgelerine bakacağımız için başlangıç şablonlarından herhangi birini seçin.
- Ardından yeni projenizi adlandırıp Bitir'i seçin. Yeni projenin oluşturulması birkaç dakika sürer.
Image Asset Studio'yu kullanma
Şimdi, faydalı bir araç olan Asset Studio'yu kullanarak simgelerinizi projeye ekleyebiliriz.
- Bu araca erişmek için Dosya menüsü > Yeni > Resim Öğesi'ni seçin.
- Resim Öğesi Stüdyosu açıldığında Yol'daki klasör simgesini seçerek ön plan katmanını ekleyin. Dışa aktarılan SVG dosyasını drawable-anydpi/ic_launcher.svg olarak seçin.
- Arka Plan Katmanı sekmesini seçin ve benzer şekilde dışa aktarılan arka plan katmanını seçin. Alternatif olarak, düz renkli bir Başlatıcı arka planı kullanmak için Öğe Türü: Renk'i seçin.
- Ön plan katmanına geri dönün ve resmin güvenli bölgede olduğundan emin olun. Simgeyi görsel olarak en iyi görünecek şekilde yeniden boyutlandırın.
- İşlem tamamlandığında İleri'yi tıklayın. Bu adımda, simgelerin projenizde nereye yerleştirileceği sorulur (varsayılan ayarı kullanın veya Ana'ya geçin). Ardından Bitir'i tıklayın. Başlatıcı öğelerinizi res > drawable altında bulabilirsiniz. Çift tıkladığınızda son vektör çekilebilir öğelerinin önizlemesi açılır.
- Tek renkli katman öğesini res/drawable veya res/drawable-v24'e manuel olarak kopyalayıp yapıştırın ya da res klasörünü sağ tıklayıp Yeni > Vektör Öğesi'ni seçerek tek renkli katmanı manuel olarak içe aktarın.
- res/mipmap-anydpi-v26/ic_launcher.xml ve res/mipmap-anydpi-v26/ic_launcher_round.xml dosyalarında, mevcut android:monochrome="path/to/monochrome/asset özelliğini doğru tek renkli öğeye yönlendirecek şekilde ekleyin veya değiştirin.
9. Önizleme ve kaynaklar
Emülatörde önizleme
Bu işlemi, bunları uygulama projesine eklemek için yaptık. Böylece gerçek bir cihazda veya emülatörde önizleme yapabiliriz. Simgelerimizin gerçekte nasıl görüneceğine bakalım.
Varsayılan olarak bir emülatör kurulumunuz olmalıdır. Yoksa Android sanal cihaz oluşturun. Yeşil oynatma düğmesini tıklayın. Bu işlem, projeyi oluşturur ve emülatörü açar.
Son öğeler
Başlatıcı simgenizin, emülatör kullanan bir cihazda nasıl görüneceğini kontrol edebildiniz ve bunları bir uygulama projesine eklediniz. Bu işlem, onları nihai üretim biçimine dönüştürür. Peki bu kişiler nerede?
Öğeler, Android uygulamasıyla birlikte kaynak olarak bulunur ve Kaynak paneli (genellikle sol tarafta) açılarak bulunabilir. Uygulamayı ayrıntılı olarak inceleyin ve Res klasörünüzü bulun. Bir menü açmak için sağ tıklayın ve Finder'da aç'ı (Mac'te) seçin. Bu işlemle bir Finder penceresi açılır. İsteğe bağlı olarak, uygulamanızın geri kalan öğelerini benzer bir süreçle dönüştürüp test ederek geliştirme ve kalite güvencesi için harcayacağınız zamandan tasarruf edebilirsiniz. Uygulamanızın diğer öğelerini dönüştürdüyseniz bu klasör geliştirme ekibiyle paylaşılabilir.
10. Tebrikler
Android uygulaması oluşturmak için gereken Android sistem simgeleri hakkında bilgi edindiniz, kendi simgelerinizi tasarladınız, simge şablonu kaynağını incelediniz ve hatta üretim için öğeleri önizlemek ve dönüştürmek üzere Android Studio'ya girerek daha da ileri gittiniz. Tebrikler!
Sorularınız varsa Twitter'da@MaterialDesign hesabını kullanarak dilediğiniz zaman bize sorabilirsiniz.
youtube.com/MaterialDesign adresinde daha fazla tasarım içeriği ve eğitim bulabilirsiniz.