Uyarlanabilir simgeler

Uyarlanabilir simgeler veya 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ılır, ancak kısayollarda, Ayarlar uygulamasında, paylaşım iletişim kutularında ve genel bakış ekranında da kullanılabilir.

Uyarlanabilir simgeler farklı kullanım alanlarına uyarlanabilir:

  • Farklı şekiller: Uyarlanabilir simgeler, farklı cihaz modellerinde çeşitli şekiller gösterebilir. Örneğin, bir OEM cihazında dairesel bir şekil, başka bir cihazda ise köşeli çember (kare ile daire arasındaki bir şekil) görüntüleyebilir. Her cihaz OEM'si, sistem tarafından tüm uyarlanabilir simgeleri aynı şekilde oluşturmak için kullanılan bir maske sağlamalıdır.

    Aynı örnek Android simgesinin, kullanılan maskeye göre farklı şekiller (bir daire ve ardından iki farklı dairesel çizgi) gösteren
tekrarlayan animasyonunu gösteren bir GIF.
    Şekil 1. Uyarlanabilir simgeler, cihazdan cihaza değişen çok çeşitli maskeleri destekler.
  • Görsel efektler: Uyarlanabilir simge, kullanıcılar simgeyi ana ekrana koyduğunda veya taşıdığında görüntülenen çeşitli ilgi çekici görsel efektleri destekler.

    Kullanıcı yanıtını göstermek için tasarlanmış, daire şeklindeki iki Android örnek simgesinin
örneklerini gösteren bir GIF. İlk simgede, sola, sağa, sonra da dairenin içinde yukarı ve aşağı
sallanan Android logosu gösteriliyor. İkinci simge genişleyip tekrar küçülür.
    Şekil 2. Uyarlanabilir simgeyle gösterilen görsel efekt örnekleri.
  • Kullanıcı teması: Android 13'ten itibaren (API düzeyi 33) kullanıcılar uyarlanabilir simgelerini temaya uygun hale getirebilirler. Bir kullanıcı temalı uygulama simgelerini etkinleştirirse sistem ayarlarındaki Temalı simgeler açma/kapatma düğmesini etkinleştirerek ve başlatıcı bu özelliği destekliyorsa sistem, ton rengini belirlemek için kullanıcının seçtiği duvar kağıdının ve temanın renginden yararlanır.

    Her biri farklı tonlarda farklı bir kullanıcı temasını
gösteren üç Android cihaz örneğini gösteren resim: İlkinde koyu tonlamaya sahip bir duvar kağıdı, ikincisinde ise altın tonlu bir duvar kağıdı, üçüncüsünde ise mavi tonlu duvar kağıdına sahip açık gri bir duvar kağıdı görülüyor. Her örnekte simgeler duvar kağıdının tonunu kullanmaktadır ve mükemmel bir uyum içinde çalışmaktadır.
    Şekil 3. Uyarlanabilir simgeler kullanıcının duvar kağıdından ve temalarından devralınır.

Aşağıdaki senaryolarda ana ekranda temalı uygulama simgesi değil, uyarlanabilir veya standart uygulama simgesi görüntülenir:

  • Kullanıcı, temalı uygulama simgelerini etkinleştirmemişse.
  • Uygulamanız tek renkli uygulama simgesi sağlamıyorsa.
  • Başlatıcı, temalı uygulama simgelerini desteklemiyorsa.

Uyarlanabilir simgeler tasarlama

Uyarlanabilir simgenizin farklı şekilleri, görsel efektleri ve kullanıcı temalarını desteklemesi için tasarımın aşağıdaki şartlara uyması gerekir:

  • Simgenin renkli versiyonu için biri ön plan, diğeri arka plan olmak üzere iki katman sağlamanız gerekir.

    Ön plan katmanı (sol resim) ve arka plan katmanı (sağ resim) örneğini gösteren resim. Ön planda, 66x66 boyutundaki bir güvenli bölgenin ortasında yer alan örnek Android logosunun 16 kenarlı simgesi gösterilmektedir. Güvenli bölge, 108x108 boyutundaki bir kapsayıcının içinde ortalanmıştır. Arka planda, güvenli bölge ve kapsayıcı için ölçülen boyutlar aynı kalır ancak yalnızca mavi bir arka plan gösterilir ve logo gösterilmez.
    Şekil 4. Ön ve arka plan katmanları kullanılarak tanımlanan uyarlanabilir simgeler. 66x66 boyutundaki güvenli bölge, OEM tarafından tanımlanan şekilli bir maske tarafından hiçbir zaman kırpılmayan alandır.
    Dairesel bir maske üzerine yerleştirilmiş önceki resimdeki simgeyi gösteren resim.
    Şekil 5. Yuvarlak maskenin uygulandığı ön ve arka plan katmanlarının birlikte nasıl göründüğünü gösteren örnek.
  • Uygulama simgelerinin kullanıcı temalarını desteklemek istiyorsanız simgenin tek renkli hali için tek bir katman sağlayın.

    Tek renkli simge katmanı (sol resim) ve renk önizlemeleri (sağdaki resim) örneğini gösteren resim. Tek renkli katmanda, 66x66 boyutundaki güvenli alanda ortalanmış örnek bir Android logosunun 16 kenarlı simgesi gösterilmektedir. Güvenli bölge, 108x108 boyutundaki bir kapsayıcının içinde ortalanmıştır. Renk önizlemeleri, farklı renklerdeki kullanıcı temalarına (turuncu, pembe, sarı ve yeşil) uygulandığında bu katman görüntüsünü gösterir.
    Şekil 6. Renk önizlemeleri (sağ) örneklerinin olduğu tek renkli bir simge katmanı (solda).
  • Tüm katmanları 108x108 dp olarak boyutlandırın.

  • Net kenarlara sahip simgeler kullanın. Katmanlarda, simgenin dış çizgisinin çevresinde maskeler veya arka plan gölgeleri olmamalıdır.

  • En az 48x48 dp boyutunda bir logo kullanın. Simgenin iç 66x66 dp'si maskelenmiş görüntü alanında göründüğünden 66x66 dp'yi aşmamalıdır.

Katmanların dört tarafının her birindeki dış 18 dp, maskeleme ve paralaks veya yanıp sönme gibi görsel efektler oluşturmak için ayrılmıştır.

Android Studio'yu kullanarak uyarlanabilir simge oluşturmayı öğrenmek için Android uygulama simgesi Figma şablonumuza veya Başlatıcı simgeleri oluşturmayla ilgili Android Studio dokümanlarına bakın. Ayrıca Tasarım Uyarlanabilir Simgeler blog yayınına da göz atın.

Uyarlanabilir simgenizi uygulamanıza ekleyin

Uygulamanıza uyarlanabilir simge eklemek için uygulama manifestinizdeki android:icon özelliğini güncelleyerek çekilebilir bir kaynak belirtin. android:roundIcon özelliğini kullanarak bir simge çekilebilir kaynağı da tanımlayabilirsiniz. Ancak bunu yalnızca yuvarlak maskeler için farklı bir simge öğesine ihtiyaç duyduğunuzda (ör. markalamanız yuvarlak şekle dayanıyorsa) yapabilirsiniz.

Aşağıdaki kod snippet'inde bu özelliklerin her ikisi de gösterilmektedir ancak çoğu uygulama yalnızca android:icon değerini belirtir:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Ardından, res/mipmap-anydpi-v26/ic_launcher.xml ürününde Android 8.0 (API düzeyi 26) ile geriye dönük uyumluluk için uygulamanızda alternatif çekilebilir kaynaklar oluşturun. Simgeleriniz için ön plan, arka plan ve tek renkli katman çekilebilir kaynaklarını tanımlamak üzere <adaptive-icon> öğesini kullanın. <foreground>, <background> ve <monochrome> iç öğeleri android:drawable özelliğini destekler.

Aşağıdaki örnekte <adaptive-icon> içinde <foreground>, <background> ve <monochrome> öğelerinin nasıl tanımlanacağı gösterilmektedir:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Çekilebilir öğeleri <foreground>, <background> ve <monochrome> öğelerinin içine yerleştirerek de öğe olarak tanımlayabilirsiniz. Aşağıdaki snippet'te bu işlemi ön plan çekilebilirliği ile yapmanın bir örneği gösterilmektedir.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Kısayollarınıza, normal uyarlanabilir simgelerle aynı maske ve görsel efekti uygulamak istiyorsanız aşağıdaki tekniklerden birini kullanın:

  • Statik kısayollar için <adaptive-icon> öğesini kullanın.
  • Dinamik kısayolları oluştururken ise createWithAdaptiveBitmap() yöntemini çağırın.

Uyarlanabilir simgeleri uygulama hakkında daha fazla bilgi için Uyarlanabilir Simgeleri Uygulama bölümüne bakın. Kısayollar hakkında daha fazla bilgi için Uygulama kısayollarına genel bakış başlıklı makaleyi inceleyin.

Ek kaynaklar

Uyarlanabilir simgeleri tasarlama ve uygulama hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın.