Uyarlanabilir simgeler

Uyarlanabilir bir simge veya AdaptiveIconDrawable bireysel cihaz özelliklerine ve kullanıcıya bağlı olarak farklı şekilde görüntülenebilir oluşturun. Uyarlanabilir simgeler öncelikli olarak ana ekrandaki başlatıcı tarafından kullanılır. Ancak kısayollar, Ayarlar uygulaması, paylaşım iletişim kutuları ve genel bakış ekranını inceleyelim. Uyarlanabilir simgeler tüm Android form faktörlerinde kullanılır.

Bit eşlemenin aksine resimler kullanıyorsanız, uyarlanabilir simgeler duruma göre uyarlayabilirsiniz:

  • Farklı şekiller: Uyarlanabilir simge, çeşitli şekiller gösterebilir cihaz modellerinde kullanılabilir. Örneğin, dairesel bir şekil gösterebilir ve kare şeklinde kare şeklinde daire) ekleyebilirsiniz. Her cihaz OEM'si bir maske sağlamalıdır. Bu maske, sistemi, tüm uyarlanabilir simgeleri aynı şekilde oluşturmak için kullanır.

    Aynı örnek Android simgesinin yinelenen animasyonunu gösteren bir GIF kullanılan maskeye bağlı olarak farklı şekiller gösteriyor: bir daire ve ardından iki farklı kare daire
    Şekil 1. Uyarlanabilir simgeler pek çok farklı cihazlar arasında farklılık gösterebilir.

  • Görsel efektler: Uyarlanabilir simge, ilgi çekici çeşitli görselleri destekler. Kullanıcılar simgeyi yerleştirdiğinde veya hareket ettirdiğinde gösterilen efektler tıklayın.

    Daire şeklindeki iki Android örnek simgesi örneğini gösteren bir GIF kullanıcı yanıtını gösterecek şekilde hareketlidir. İlk simgede Android logosu gösteriliyor sağa, sola, sonra yukarı ve aşağı salınmaya başladım. İkinci simge genişler ve sonra tekrar daralır.
    Şekil 2. Şu öğeler tarafından görüntülenen görsel efekt örnekleri: uyarlanabilir simge.
    ziyaret edin.
    'nı inceleyin.

  • Kullanıcı teması: Android 13'ten (API düzeyi 33) itibaren kullanıcılar tema yapabilir simgelerine dokunun. Kullanıcı, temalı uygulama simgelerini etkinleştirirse Sistem ayarlarında Temalı simgeler açma/kapatma düğmesi ve başlatıcı bunu destekler Bu özellik varsa, sistem kullanıcının seçtiği duvar kağıdının rengini kullanır ve temayı kullanın.

    Her birinde bir tane olmak üzere üç Android cihaz örneğini gösteren resim farklı tonlara sahip farklı kullanıcı teması: İlkinde, koyu renk tonu; ikincisinde ise altın rengi bir duvar kağıdı gösteriliyor. üçüncüsü bir açık gri ve mavi tonlu duvar kağıdına sahip duvar kağıdı. Her örnekte duvar kağıdının renk tonunu alır ve mükemmel şekilde uyum sağlar.
    Şekil 3. Uyarlanabilir simgeler kullanıcının duvar kağıdı ve temalarıyla değiştirin.

    Aşağıdaki senaryolarda ana ekranda, temalı uygulama simgesi yerine uyarlanabilir veya standart uygulama simgesini görüntüler:

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

Uyarlanabilir simgeleri tasarlama

Uyarlanabilir simgenizin farklı şekilleri, görsel efektleri ve kullanıcı temasını seçerseniz tasarımın aşağıdaki gereksinimleri karşılaması gerekir:

  • Simgenin renk sürümü için biri ön plan ve biri arka plan için. Katmanlar vektör veya bit eşlemler bulunsa da vektörler tercih edilir.

    Ön plan katmanı (soldaki resim) örneğini gösteren resim ve arka plan katmanı (sağ resim). Ön planda 16 kenarlı bir simge 66x66 boyutunda güvenli bir bölgede ortalanmış örnek Android logosu. Güvenli bölge: bir kapsayıcının içine yerleştirin. Arka planda da aynı güvenli bölge ve kapsayıcı için belirlenen boyutlarda ölçülmüş ancak yalnızca mavi arka planı olan, logoyu içermeyen cihazlardır.
    Şekil 4. Ön plan kullanılarak tanımlanan uyarlanabilir simgeler katmanları var. Gösterilen 66x66 güvenli bölge, alandır bir OEM tarafından tanımlanan şekilli maske ile asla kırpılmayan içerikler.
    ziyaret edin.
    'nı inceleyin.
    Önceki resimdeki simgeyi bir arka planın üzerine yerleştirilmiş olarak gösteren bir resim sağlayabilirsiniz.
    5. Şekil. Ön plan ve teklif verirken arka plan katmanları, yuvarlak bir maske uygulandığında birlikte görünür.

  • Uygulama simgelerinde kullanıcı temasını desteklemek istiyorsanız uygulama simgeleri için simgenin tek renkli versiyonu.

    Tek renkli simge katmanı örneğini gösteren resim (soldaki resim) ve renk önizlemelerini (sağdaki resim) tıklayın. Tek renkli katman, 16 kenarlı ortalanmış 66x66 güvenli bölgede örnek Android logosu simgesi. Güvenli alt bölge, 108x108 boyutundaki bir kapsayıcının içinde ortalanır. Renk önizlemeleri farklı renklerdeki kullanıcı temalarına (turuncu, pembe, sarı ve yeşil).
    Şekil 6. Tek renkli simge katmanı (solda) renk önizlemesi örnekleri (sağda).

  • Tüm katmanları 108x108 dp olarak boyutlandırın.

  • Kenarları net olan simgeler kullanın. Katmanlarda maskeler veya arka planlar olmamalıdır gölgeler alır.

  • En az 48x48 dp boyutunda bir logo kullanın. 66x66 dp'yi aşmamalıdır, simgenin iç 66x66 dp'si maskelenmiş görünüm.

Katmanların dört tarafının her birindeki en dış 18 dp değeri kullanarak paralaks veya parlayıp sönen ışık gibi görsel efektler oluşturabilirsiniz.

Android Studio'yu kullanarak uyarlanabilir simge oluşturmayı öğrenmek için Android Uygulamamıza göz atın. Figma simgesi şablon veya Başlatıcı oluşturmayla ilgili Android Studio dokümanları) simgelerini tıklayın. Ayrıca, Designing Uyarlanabilir Simgeler ,

Uyarlanabilir simgenizi uygulamanıza ekleyin

Tıpkı uyarlanabilir olmayan simgeler gibi, uyarlanabilir simgeler de Uygulamada android:icon özelliği manifest dosyasındaki talimatları uygulayın.

İsteğe bağlı bir özellik (android:roundIcon), veya dairesel simgeler içeren uygulamalar içerir. Uygulama simgenizin üzerinde bir dairesel arka plan oluşturmaya karar verdi. Bu tür başlatıcıların şunları yapması gerekir: android:roundIcon ürününe yuvarlak maske uygulayarak uygulama simgeleri oluşturabilirsiniz. garantisi sayesinde uygulama simgenizin görünümünü optimize edebilirsiniz. Örneğin, logoyu biraz büyütebilir ve kırpıldığı zaman dairesel arka plan tam çerçeveli.

Aşağıdaki kod snippet'i bu özelliklerin ikisini de göstermektedir, ancak çoğu uygulama yalnızca android:icon belirtin:

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

Sonra, uyarlanabilir simgenizi res/mipmap-anydpi-v26/ic_launcher.xml hesabına kaydedin. Tekliflerinizi otomatikleştirmek ve optimize etmek için <adaptive-icon> öğesini kullanarak ön planı, arka planı ve tek renkli katman kaynaklarına sahip. <foreground>, <background> ve <monochrome> iç öğeleri her ikisini de destekler ve bit eşlem resimlerinden oluşur.

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

<?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 öğe olarak tanımlamak için bu öğeleri <foreground>, <background> ve <monochrome> öğeleri. Aşağıdakiler snippet'i, bunu ön plandaki çekilebilir öğede yapmanın bir örneğini gösterir.

<?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 aynı maskeyi ve görsel efekti uygulamak için standart uyarlanabilir simgeleri kullanıyorsanız, aşağıdaki tekniklerden birini kullanın:

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

Uyarlanabilir simgeleri uygulama hakkında daha fazla bilgi için bkz. Uygulama Uyarlamalı Simgeler. Kısayollar hakkında daha fazla bilgi için bkz. Uygulama kısayolları genel bakış bölümüne bakın.

Ek kaynaklar

Tasarım ve kalite hakkında ek bilgi için aşağıdaki kaynaklara otomatik olarak oluşturabilirsiniz.