Material You tasarımı

Android 12'den itibaren Material You tasarımı, Android işletim sisteminde ifade ve akıcılığa odaklanarak kullanıcıların ihtiyaçlarına uygun tek ve tutarlı bir deneyim oluşturup sahiplenmelerine yardımcı olmayı amaçlar. Bir Android iş ortağı olarak, Android cihazlarınıza aşağıdaki alanlarda Material You tasarımını dahil etmeniz önerilir:

• Dinamik renk
• Hareket
• Widget'lar

Dinamik renk

Dinamik renk, Material You tasarımının merkezinde yer alır ve Android'in, kullanıcılarına diğer cihazların yapamayacağı şekilde daha basit ve kapsamlı özelleştirme sunmaya yönelik çok yıllık stratejisinin önemli bir parçasıdır. Material You'nun sunduğu özellikler:

• Kullanıcılara ve geliştiricilere, herhangi bir Android cihazda kullanılabilen tutarlı ve zengin bir kişiselleştirme hikayesi sunar.

• Android OEM'leri, sistem kullanıcı arayüzü ve birinci taraf uygulamalarında donanımları, marka rengi, modeli ve biçimiyle uyumlu şekilde yenilik yapmaya devam edebilir.

Dinamik renkten yararlanmak için Android 12 Material You renk çıkarma özelliğini, kullanıcılara sunduğunuz yazılımın önemli bir parçası olarak kullanın. Cihazda, özellikle tek bir duvar kağıdı veya tema kaynak rengini alıp 65 renk API'si aracılığıyla çıkışını yapan mantık olmak üzere AOSP'deki renk çıkarma mantığını kullanın. Dinamik renk koşulları için Using Dynamic Color (Dinamik Renk Kullanımı) başlıklı makaleyi inceleyin.

Tam dinamik renk akışı, aşağıda gösterildiği gibi dört adımdan oluşur:

1. şekil. Material You dinamik renk akışı

1. Kullanıcı, OEM seçici aracılığıyla duvar kağıdını veya temayı değiştirir.

2. Kullanıcı aşağıdakilerden birini seçer:

   • Cihaz teması. Seçildiğinde Android, şartları karşılayan tek bir kaynak rengi otomatik olarak seçer.

   • Yeni duvar kağıdı + tema. Seçildiğinde, AOSP mantığı seçilen duvar kağıdından otomatik olarak tek bir kaynak rengi seçer.

3. AOSP, tek kaynaklı rengi AOSP mantığına göre her biri 13 tonlu renk varyantı içeren 5 ton paletine genişletir. Bu paletler daha sonra 65 renk özelliğini doldurur.

4. Uygulama kullanıcı arayüzü, Android uygulama ekosisteminde tutarlı bir şekilde 65 renk özelliğini kullanır. Cihazın sistem kullanıcı arayüzü ve OEM'ye özgü uygulamalar için aynı renk paletini kullanmanız önerilir.

Android 12 yamaları

Duvar kağıdı rengi çıkarma işleminin uçtan uca mantığını almak ve cihazın 65 renkli API'leri ekosistemle tutarlı bir şekilde doldurmasını sağlamak için Android 12 uygulamanıza aşağıdaki yamaları ekleyin:

• Zorunlu

  • Monet'i AOSP'ye ekleme
  • Temel renkler için kroma/lstar filtrelerini ayarlama
  • 90 tonunda en fazla 40 renk doygunluğu kullanın

• Önemle Tavsiye Edilir

  • Önyükleme rengi sysprop'ları ayarlanırken yarışma koşulunu düzeltin.
  • Tema değişiklikleri hakkında bildirim almak için yer paylaşımlarına izin verme
  • Başlatma rengi sistem özelliklerini ayarlarken yarışma koşulunu düzeltme (2. tur)
  • FeatureFlags'ı flags paketine taşıma.
  • Çok kullanıcılı tema desteğini doğru şekilde uygulama
  • Yeniden başlatma işleminden sonra belirtilen duvar kağıdı rengi seçeneğinin eksik olması sorununu düzeltme
  • Üçüncü rengi hesaplama hatasını düzeltme
  • Arka plan uygulamalarının temayı değiştirmesine izin verme

ThemePicker'da özel renkleri belirtme

AOSP ThemePicker uygulamasını kullanıyorsanız WallpaperPicker uygulaması, aşağıdaki koşulların her ikisi de karşılandığında renk bölümünü gösterir:

• frameworks/base/packages/SystemUI/res/values/flags.xml üzerindeki flag_monet true.
• packages/apps/ThemePicker/res/values/override.xml dosyasındaki themes_stub_package içinde paket adıyla bir sistem stub APK'sı tanımlanmıştır.

Stub APK biçimi

Bu APK'nın örnek sürümünü packages/apps/ThemePicker/themes adresinde bulabilirsiniz.

Bu APK yalnızca mevcut temel renkleri ve adlarını ayrıntılı olarak açıklayan kaynakları içermelidir.

Saplama, res/xml altında aşağıdaki biçimde bir XML dosyası içermelidir:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

Bu dosyada, aşağıdaki dizeler bundle_name_item olarak adlandırıldığı sürece color_bundles içindeki her item öğesinin farklı bir adı vardır.

Her renk için bir bundle_name_item dizesi ve her renk için açıklayıcı bir ad olmalıdır. Bunlar, ilgili çevrilmiş dizeleri res/values-language code dizinlerine eklenerek çevrilebilir.

Gerçek renk değerleri aynı XML'de veya aşağıdaki biçimde ayrı bir kaynaklar XML dosyasında olabilir:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

Renk paketleri dizisindeki her öğe için bir color_primary_item ve bir color_secondary_item girişi olmalıdır (ve her iki renk de aynı renk olmalıdır). Bu color girişlerin değerleri, temel renk bölümünde gösterilecek her rengin gerçek renk kodlarıdır.

1. adım: Kullanıcı temalandırma deneyimi oluşturun

Tema seçici, kullanıcıların yeni Material You kişiselleştirme özellikleriyle etkileşime girdiği ve renk seçenekleri ya da hazır ayarlar arasında seçim yapabildiği yerdir. Ürününüz ve kullanıcı demografiniz için uygun olduğunda, tema seçici veya duvar kağıdı seçici kullanarak kullanıcılara daha zengin bir kişiselleştirme ve renk deneyimi sunabilirsiniz.

• Duvar kağıdı seçici kullanılırken duvar kağıdı rengi çıkarma özelliği varsayılan olarak etkindir. Ancak kullanıcıya daha fazla seçenek sunmak için seçicide bazı özelleştirmeler yapabilirsiniz.

2. adım: Duvar kağıdı rengini kaynak renge çıkarın

Duvar kağıdından renk çıkarma özelliğini etkinleştirmek için yukarıda listelenen Android 12 yamalarını seçin (bu işlev, gelecekteki bir AOSP sürümünde varsayılan olarak etkinleştirilecektir). Duvar kağıdı çıkarma işlemini tetikleyen AOSP mantığı, frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java ile başlar, ThemeOverlayController#mOnColorsChangedListener üzerinde WallpaperManager#onWallpaperColorsChanged aracılığıyla devam eder. Tutarlı bir geliştirme deneyimi için değiştirilmemiş AOSP mantığını kullanmanızı öneririz.

Varsayılan olarak, mantık kullanıma uygun en yüksek frekanslı rengi seçer. Algoritma tarafından döndürülen diğer kaynak renklerden yararlanmak ve bu renkleri tema seçicide kullanıcılara sunmak için ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) kullanın.

Kullanıma uygun olması için bir kaynak rengin (duvar kağıdından çıkarılmış veya kullanıcı tarafından seçilmiş bir hazır ayar) minimum 5 CAM16 kroma değerine sahip olması gerekir. Bu, kaynak rengin tek bir renkten 65 tonlu renge dönüştürüldüğünde ince koyu tonlardan etkilenmemesini ve kullanıcı seçimini temsil etmeye devam etmesini sağlar. CAM16'daki renkleri okumak ve değiştirmek için Cam#fromInt veya Cam#getInt simgesini kullanın.

Dinamik olmayan bir renk paleti kullanma Duvar kağıdı rengi çıkarma özelliğini desteklemeyen cihazlarda, aşağıdaki işlemleri yaparak dinamik rengi destekleyen Google uygulamalarının ve üçüncü taraf uygulamalarının harika görünmesini sağlayabilirsiniz:

• frameworks/base/packages/SystemUI/res/values/flags.xml üzerinde flag_monet seçeneğini devre dışı bırakarak varsayılan Material paletini kullanın.
• Kullanıcıların, önceden ayarlanmış tema seçiciyi kullanarak işletim sistemlerini kişiselleştirmeye devam edebilmelerini sağlayın.

3. adım: Kaynak rengi, renk API'lerine genişletin

Android, önceki adımda elde edilen tek kaynak rengi kullanarak her biri 13 renk içeren 5 benzersiz ton paleti (accent 1-3, neutral 1-2) oluşturur. Her renk, farklı parlaklık değerleri (0-1000) içerir. Toplamda 65 renk elde edilir. Android 12 yamalarında sağlanan mantık, bu renk genişletmeyi doğru şekilde uygular. Aşağıda verilen ayrıntılarda uygulama açıklanmaktadır.

Geliştiricilerin tutarlılığı için 5 ton paleti (accent1, accent2, accent3, neutral1, neutral2) ve bunlara karşılık gelen 13 renk, aşağıdaki gibi CAM16 kroma ve renk tonu değerlerinde ilgili değişiklikler yapılarak tek bir kaynak rengine dayandırılmalıdır:

• system_accent1

  • Kroma: 0, 10, 50 ve 100 ile biten renk varyantları için "40", aksi takdirde "48" değerini kullanın.
  • Ton: Kaynakla aynı

• system_accent2

  • Kroma: "16" değerini kullanın.
  • Ton: Kaynakla aynı

• system_accent3

  • Kroma: "32" değerini kullanın.
  • Ton: 60 derece pozitif döndürme

• system_neutral1

  • Kroma: "4"ü kullanın.
  • Ton: Kaynakla aynı

• system_neutral2

  • Kroma: "8"i kullanın.
  • Ton: Kaynakla aynı

CTS, parlaklık ve renk tonu API çağrılarını doğrulama testlerini içerir. Çalıştırmak için atest SystemPalette simgesini kullanın.

4. adım: Uygulamalarda ve sistem kullanıcı arayüzünde dinamik renkleri kullanın

Bir cihazda dinamik renkler ayarlandıktan sonra uygulamalar, renkleri kullanmak için Material yönergelerini izler. Materyal yönergeleri, üçüncü taraf uygulamalarının kullanabilmesi için 26 Ekim 2021'e kadar material.io adresinde yayınlanacak. Sistem kullanıcı arayüzü ve birinci taraf uygulamaları için, donanımınıza ve markanıza uygun şekilde kullanıcı deneyimine dinamik renkler entegre etmenizi ve cihazlarınızı farklılaştırmanızı önemle tavsiye ederiz.

Genel dinamik renk kılavuzu için aşağıdakilere bakın:

• Uygulamalarda ve sistem kullanıcı arayüzünde ön plan öğeleri için vurgu renkleri kullanın:

  @android:color/system_accent1_0 … 1000 // most-used foreground color group
  @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
  @android:color/system_accent3_0 … 1000 // playful, analogous color
  

• Uygulamalardaki arka plan öğeleri ve sistem kullanıcı arayüzü için nötr renkler kullanın:

  @android:color/system_neutral1_0 … 1000 // most-used background color group
  @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
  

Material You'nun renkleri nasıl eşlediği ve SysUI'da API'lerin nasıl kullanıldığı hakkında daha fazla bilgi için Ek Kaynaklar'a bakın.

5. adım: AOSP WallpaperPicker uygulamanıza dinamik renk seçenekleri ekleyin

Android 13 ve sonraki sürümler için geliştirme

Android 13'ten itibaren android.theme.customization.accent_color kullanımdan kaldırılmıştır. Farklı renk varyantlarını desteklemek için yeni bir android.theme.customization.theme_style özelliği eklendi. Şu anda kod tabanında dört varyant bulunmaktadır:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Bunlar, aşağıdaki JSON'da gösterildiği gibi Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES adresine gönderilir:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Android 12 ve önceki sürümler için derleme

Özel tema seçici kullanılırken cihaz, aşağıdaki biçimde bir JSON dosyası sağlayarak Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES adresine geçerli bir kaynak rengi göndermelidir (burada 746BC1, geçerli bir kaynak rengi örneğidir):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

Bu işlem, duvar kağıdı rengi çıkarma (2. adım) işlemini atlar ve sağlanan kaynak rengi doğrudan 65 renk özelliğine (3. adım) genişletir.

6. adım: Destek kaydı oluşturun

Sistem entegrasyonunun yanı sıra bir destek kaydı oluşturmanız ve marka adınızı (Build.MANUFACTURER) bize bildirmeniz gerekir. Üçüncü taraf uygulamalarının çoğu dinamik renkleri göstermek için Android için Material Components'ı kullandığından, hangi cihazların dinamik renk ton paletleri özelliğini entegre ettiğini belirlemek için sabit kodlanmış bir izin verilenler listesi kullanıyoruz.

Hareket

Akıcı hareketler, cihazların modern ve birinci sınıf görünmesini sağlar. Geliştiricilerin güvenini ve memnuniyetini kazanmak için, akıcı hareketin iki önemli parçası olan aşırı kaydırma ve dalgalanmanın tutarlı görünmesi ve hissedilmesi gerekir.

İşletim sisteminizde aşırı kaydırma kullanma

Android 12'de, kullanıcının bir listenin kenarını geçmeye çalıştığında gösterilen, görünümü uzatma şeklinde daha duyarlı ve dinamik bir aşırı kaydırma hareketi bulunur. Aşağıda bir örnek gösterilmektedir:

Şekil 2. Ayarlarda gösterildiği gibi Android 12'deki aşırı kaydırma efekti

Geliştiricilerin tutarlılığı için cihazlarınızdaki genel aşırı kaydırma efektinin aşağıdakine benzer olduğundan emin olun:

• ActivityManager.isHighEndGfx() için doğru değerini döndüren cihazlarda, ekranı aşırı kaydırma efekti, ekranın doğrusal olmayan şekilde uzatılmasıdır (yukarıda gösterildiği gibi).

• Daha düşük performanslı cihazlarda, esnetme efekti doğrusal esnetme olarak basitleştirilir (sistemdeki yükü azaltmak için).

Birinci taraf uygulamalarında aşırı kaydırma kullanma

Özel görünümleri kullanırken, esnetme efektini kullanan bazı uygulamaları ve sistem arayüzünü ayarlamanız gerekebilir.

• Esnek aşırı kaydırmayı desteklemek için en son kitaplıklara yükseltin:

  • RecyclerView için androidx.recyclerview:recyclerview:1.3.0-alpha01
  • NestedScrollView ve EdgeEffectCompat için androidx.core:core:1.7.0-alpha01
  • ViewPager için androidx.viewpager:viewpager:1.1-alpha01

• EdgeEffect kullanan özel düzenlerde aşağıdaki kullanıcı deneyimi değişikliklerini göz önünde bulundurun:

  • Kullanıcılar, esnetme işlemi sırasında düzenin içeriğiyle etkileşimde bulunmamalıdır. Kullanıcılar yalnızca uzatmayı değiştirmeli, örneğin içerikteki bir düğmeye basamamalıdır.

  • Kullanıcılar, EdgeEffect animasyonu oynatılırken içeriğe dokunduğunda animasyonu yakalamalı ve esnetmeyi değiştirmelerine izin verilmelidir. Mevcut çekme değeri EdgeEffectCompat.getDistance() tarihinden itibaren kullanılabilir.

  • Çekme değerini değiştirmek ve tüketilen tutarı döndürmek için onPullDistance() kullanın. Bu, geliştiricilerin parmak içeriği başlangıç konumunun ötesine doğru uzattıkça uzatma işleminden kaydırma işlemine sorunsuz bir şekilde geçiş yapmasına olanak tanır.

  • İç içe kaydırma ile çalışırken içerik gerilirse iç içe yerleştirilmiş içerikten önce dokunma hareketini gerilme işlemi kullanmalıdır. Aksi takdirde, parmak yön değiştirdiğinde gerilme bırakılmak yerine iç içe yerleştirme kaydırılabilir.

Aşırı kaydırma ile ilgili ayrıntılar için Kaydırma Hareketini Animasyonla Gösterme başlıklı makaleyi inceleyin.

İşletim sisteminizde dalgalanma (dokunma geri bildirimi) özelliğini kullanma

Android 12'de, kullanıcıya dokunma işlemiyle ilgili geri bildirim vermek için daha yumuşak ve ince bir dokunma dalgası bulunur.

3.Şekil Android 12'deki dalgalanma efekti, daha yumuşak bir dolgu animasyonuyla

Geliştiricilerin tahmin edilebilirliği ve mükemmel bir kullanıcı deneyimi için cihazlarınızdaki dalgalanma efektinin yukarıdaki örnekte gösterilene benzer olduğundan emin olun. Dalgalanma efektlerini desteklemek için herhangi bir entegrasyon adımı uygulamanız gerekmez. Ancak uygulamanızda istenmeden ortaya çıkan gerilemeleri kontrol etmek için efekti cihazlarınızda test etmeniz gerekir.

Widget'lar

Widget'lar, Android cihazların temel bileşenleridir. Android 12, tüm OEM'lerin desteklemesi gereken yeni API'ler ve API özellikleri içerir.

• İşletim sisteminizde widget düzenleri, boyutlandırma ve yazılım parametreleriyle (ör. yuvarlatılmış köşe boyutu) ilgili geliştirici API'lerini destekleyin. Uygulamanız, API'ler aracılığıyla parametre sağlama ve kullanıcı tarafından boyutlandırılabilir ve yapılandırılabilir widget'lar sağlama konusunda widget'ları doğru şekilde desteklemelidir.

• Uygulamalarınızda, mümkün olduğunda yeni birinci taraf widget'ları güncellemek veya oluşturmak için yeni API özelliklerinden yararlanın. Kapsamınızdaki tüm birinci taraf uygulama widget'ları için aşağıdaki geliştirici kontrol listesini inceleyin.

  • Öncelik, platformun önerilerine göre belirlenir.
  • Bir öneriyle ilgili ayrıntılar için Değişiklik sütunundaki bağlantıyı takip edin.

  Bölge	Değişim	Uygulama önceliği
  Ev deneyimini iyileştirme	Ölçeklenebilir önizlemeler ekleme	P1
  	Widget açıklaması ekleme	P1
  	Widget'ları kişiselleştirmeyi kolaylaştırma	P2 (isteğe bağlı)
  	Daha akıcı geçişleri etkinleştirme	P0
  	Yayın trambolinlerinden kaçının	P0
  Widget yönergelerini benimseme	Widget boyutlarını ve düzenlerini iyileştirme	P2
  	Dinamik renkleri uygulama	P0
  	Yuvarlatılmış köşeleri uygulama	P0
  	Yeni bileşik düğmeler ekleme	P2
  Mevcut widget kodunu basitleştirme	RemoteView Koleksiyonlarını Basitleştirme	P2
  	RemoteView çalışma zamanını basitleştirme	P2

Ek kaynaklar

SysUI renk kullanımı

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Şekil 4. Sistem kullanıcı arayüzünde dinamik renk kullanımı

Materyal kitaplığı renk özelliği güncellemeleri

Material, belirli görünümlere renk sağlamak için kullanılan renk rolleri oluşturarak tema özelliklerini bir sonraki sürümde güncelleyecek.

Material, durum özelliklerini aşağıdaki işaretçilerle güncelleyecek:

SSS

Renk ayıklama

Kullanıcı duvar kağıdını değiştirdikten sonra renk çıkarma işlemi otomatik olarak mı yapılır yoksa bir yerden tetiklenmesi mi gerekir?

Android 12 yamaları ile duvar kağıdı rengi çıkarma özelliği varsayılan olarak etkindir.

ThemeOverlayController.java, ThemeOverlayController#mOnColorsChangedListener ve WallpaperManager#onWallpaperColorsChanged ile mantığı tetikler.

Animasyonlu duvar kağıtları veya video duvar kağıtları için renk çıkarma işleminin ekranın rengini ne zaman aldığını öğrenebilir miyiz? Bazı kullanıcılar, en uzun süre gösterildiği için son karedeki renkleri tercih edebilir.

Renk çıkarma, kullanıcı duvar kağıdını ayarladığında veya ekran güç döngüsünden sonra (WallpaperEngine#notifyColorsChanged yanıtı olarak) tetiklenir. Kullanıcı ekranı kapatıp tekrar açtıktan sonra son WallpaperColors etkinliği (canlı duvar kağıdından) uygulanır.

Tema/duvar kağıdı seçici

Kullanıcıların en yüksek sıklıkta olan renk yerine birden fazla kaynak rengi seçebilmesi için tema seçiciyi nasıl etkinleştirebilirim? Bu renkleri çıkarma mantığından almanın bir yolu var mı?

Evet. Tema seçicinizde ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) kullanabilirsiniz.

Pixel'de temalı simge adlı bir özellik bulunur. Paylaştığınız üç yama arasında yer alıyor mu? OEM'ler bunu nasıl uygulayabilir?

Hayır. Temalı simgeler beta sürümündedir ve Android 12'de kullanılamaz.

Google Duvar Kağıdı uygulamasını renk çıkarma ve seçme özellikleri etkin olarak kullanmanın bir yolu var mı?

Evet. Bu özellikler, bu sayfanın önceki bölümlerinde açıklanan entegrasyon adımları izlenerek Google Duvar Kağıdı uygulamasının en son sürümünde uygulanabilir.

Daha fazla ayrıntı için TAM'nizle iletişime geçin.

Google, OEM'lerin ayarlar menüsünde dinamik renk önizlemesinin kendi sürümlerini uygulayabilmesi için uygulamayı veya kaynak kodunu paylaşabilir mi? Bu sürüm, Google'ın duvar kağıdı seçici uygulamasında gösterilen önizleme bölümüne benzer.

Önizlemeyi oluşturan ana sınıflar WallpaperPicker2 ve Launcher3'dır.

Duvar kağıdı önizleme ekranı WallpaperSectionController.

Google Duvar Kağıdı uygulamasında gösterildiği gibi, rengi değiştirdikten sonra Önizleme'yi nasıl uygularım?

Duvar kağıdı seçici uygulaması, Başlatıcı'da ContentProvider olmasını bekler (Launcher3 tabanlı başlatıcılarda bu özellik bulunur). Önizleme, Başlatıcı'daki GridCustomizationsProvider tarafından sağlanır. Başlatıcı'nın ana Etkinliği'nin meta verilerinde, duvar kağıdı ve stil uygulamasının okuması için bu önizlemeye referans verilmelidir. Tüm bu özellikler AOSP'nin Launcher3'ünde uygulanır ve OEM'ler tarafından kullanılabilir.