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ılsa da kısayollarda, Ayarlar uygulamasında, paylaşım iletişim kutularında ve genel bakış ekranında da kullanılabilir. Uyarlanabilir simgeler tüm Android form faktörlerinde kullanılır.

Bitmap resimlerin aksine, uyarlanabilir simgeler farklı kullanım alanlarına uyum sağlayabilir:

  • Farklı şekiller: Uyarlanabilir simgeler, farklı cihaz modellerinde çeşitli şekillerde gösterilebilir. Örneğin, bir OEM cihazında yuvarlak şekil görüntülerken başka bir cihazda köşeli yuvarlak (kare ile daire arasında bir şekil) 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.

    Aynı örnek Android simgesinin tekrar eden animasyonunu gösteren GIF. Kullanılan maskeye bağlı olarak farklı şekiller gösteriliyor: önce daire, ardından iki farklı yuvarlak kare.
    1.şekil Uyarlanabilir simgeler, cihazdan cihaza değişiklik gösteren çeşitli maskeleri destekler.
  • Görsel efektler: Uyarlanabilir simgeler birçok farklı ilgi çekici görsel efekti destekler. Bu efektler, kullanıcılar simgeyi ana ekrana koyduğunda veya taşıdığında gösterilir.

    Kullanıcı yanıtını göstermek için animasyonlu iki daire şeklindeki Android örnek simgesini gösteren GIF. İlk simgede, Android logosunun daire içinde önce sola, sonra sağa, ardından yukarı ve aşağı doğru sallandığı gösteriliyor. İkinci simge genişler ve tekrar daralır.
    Şekil 2. Uyarlanabilir simge tarafından gösterilen görsel efekt örnekleri.
  • Kullanıcı teması: Android 13'ten (API düzeyi 33) itibaren kullanıcılar uyarlanabilir simgelerini temaya uygun hale getirebilirler. Bir kullanıcı, sistem ayarlarında Temalı simgeler açma/kapatma düğmesini etkinleştirerek temalı uygulama simgelerini etkinleştirirse ve başlatıcı bu özelliği destekliyorsa sistem, kullanıcının seçtiği duvar kağıdı ve temanın rengine göre renk tonunu belirler.

    Her biri farklı renk tonlarına sahip farklı bir kullanıcı teması gösteren üç Android cihaz örneğini gösteren bir resim: Birincisi koyu renk tonlarına sahip bir duvar kağıdı, ikincisi altın rengi tonlarına sahip bir duvar kağıdı, üçüncüsü ise mavimsi renk tonlarına sahip açık gri bir duvar kağıdı gösteriyor. Her örnekte, simgeler duvar kağıdının rengini almış ve mükemmel bir şekilde uyum sağlamıştır.
    3.şekil Kullanıcının duvar kağıdından ve temalarından devralınan uyarlanabilir simgeler.

    Aşağıdaki senaryolarda ana ekranda temalı uygulama simgesi yerine uyarlanabilir veya standart uygulama simgesi gösterilir:

    • Kullanıcı temalı uygulama simgelerini etkinleştirmediyse
    • Uygulamanız tek renkli bir 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 aşağıdaki şartlara uymalıdır:

  • Simgenin renkli sürümü için biri ön plan, diğeri arka plan olmak üzere iki katman sağlamanız gerekir. Katmanlar vektör veya bit eşlem olabilir ancak vektörler tercih edilir.

    Ön plan katmanı (soldaki resim) ve arka plan katmanı (sağdaki resim) örneğini gösteren bir resim. Ön planda, 66x66 güvenli bölge içinde ortalanmış örnek bir Android logosunun 16 kenarlı simgesi gösteriliyor. Güvenli bölge, 108x108 boyutundaki bir kapsayıcının içinde ortalanır. Arka planda, güvenli bölge ve kapsayıcı için aynı ölçülen boyutlar gösteriliyor ancak yalnızca mavi bir arka plan ve logo yok.
    4.şekil Ön plan ve arka plan katmanları kullanılarak tanımlanan uyarlanabilir simgeler. Gösterilen 66 dp x 66 dp'lik güvenli bölge, OEM tarafından tanımlanan şekilli maske ile hiçbir zaman kırpılmayan alandır.
    Önceki resimdeki simgenin, dairesel bir maskenin üzerine yerleştirilmiş hâlini gösteren resim.
    5. Şekil. Ön plan ve arka plan katmanlarının, dairesel maske uygulandığında nasıl göründüğüne dair bir ö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ı (soldaki resim) ve renk önizlemelerini (sağdaki resim) gösteren bir resim. Tek renkli katmanda, 66x66 güvenli bölge içinde ortalanmış 16 kenarlı örnek bir Android logosu simgesi gösteriliyor. Güvenli bölge, 108x108'lik bir kapsayıcının içinde ortalanı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.
    6.şekil Renk önizleme örneklerinin (sağda) yer aldığı tek renkli simge katmanı (solda).
  • Tüm katmanları 108x108 dp boyutuna getirin.

  • Net kenarlı simgeler kullanın. Katmanlarda, simgenin dış çizgisinin etrafında maske veya arka plan gölgesi olmamalıdır.

  • En az 48x48 dp boyutunda bir logo kullanın. Simgenin iç tarafındaki 66 x 66 dp'lik kısmı, maskeli görüntü alanında göründüğünden 66 x 66 dp'yi aşmamalıdır.

Katmanların dört kenarının her birinin en dışındaki 18 dp'lik kısım, 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 belgelerine bakın. Ayrıca, Uyarlanabilir Simgeler Tasarlama başlıklı blog yayınına da göz atın.

Uyarlanabilir simgenizi uygulamanıza ekleme

Uyarlanabilir simgeler, uyarlanabilir olmayan simgeler gibi uygulama manifestindeki android:icon özelliği kullanılarak belirtilir.

İsteğe bağlı bir özellik olan android:roundIcon, yuvarlak simgeli uygulamaları temsil eden başlatıcılar tarafından kullanılır. Uygulamanızın simgesinde tasarımın temel bir parçası olarak yuvarlak bir arka plan varsa bu özellik faydalı olabilir. Bu tür başlatıcıların, android:roundIcon öğesine yuvarlak maske uygulayarak uygulama simgeleri oluşturması gerekir. Bu garanti, örneğin logoyu biraz büyüterek ve kırpıldığında yuvarlak arka planın tam taşma olmasını sağlayarak uygulama simgenizin görünümünü optimize etmenize olanak tanıyabilir.

Aşağıdaki kod snippet'inde her iki özellik de gösterilmektedir ancak çoğu uygulama yalnızca android:icon özelliğini belirtir:

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

Ardından, uyarlanabilir simgenizi res/mipmap-anydpi-v26/ic_launcher.xml konumuna kaydedin. Simgeleriniz için ön plan, arka plan ve tek renkli katman kaynaklarını tanımlamak üzere <adaptive-icon> öğesini kullanın. <foreground>, <background> ve <monochrome> iç öğeleri hem vektör hem de bit eşlem resimleri destekler.

Aşağıdaki örnekte <foreground>, <background> ve <monochrome> öğelerinin <adaptive-icon> içinde 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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Ön plan ve tek renkli katmanlar aynı çizilebilir öğeyi kullanıyor. Ancak gerekirse her katman için ayrı çizilebilir öğeler oluşturabilirsiniz.

Çekilebilir kaynakları <foreground>, <background> ve <monochrome> öğelerine satır içi olarak ekleyerek de öğe olarak tanımlayabilirsiniz. Aşağıdaki snippet'te, bunu ön plan çizilebilir öğesiyle yapma ö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 yöntemlerden birini kullanın:

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

Uyarlanabilir simgeleri uygulama hakkında daha fazla bilgi için Uyarlanabilir Simgeleri Uygulama başlıklı makaleyi inceleyin. 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 göz atın.