Material You tasarımı

Android 12'den itibaren Material You tasarımı, kullanıcıların ihtiyaçlarına uygun tek ve uyumlu bir deneyim oluşturmasına ve bu deneyimi sahiplenmesine yardımcı olmak amacıyla Android OS'de ifadeye ve akışkanlığa odaklanır. Android iş ortağı olarak, Material You tasarımını aşağıdaki alanlarda Android cihazlarınıza dahil etmenizi öneririz:

• Dinamik renk
• Hareket
• Widget'lar

Dinamik renk

Dinamik renk, Material You tasarımının ana unsuru ve Android'in kullanıcılarına diğer cihazlarda olmayan bir şekilde daha basit ve daha derin bir özelleştirme sunma hedefine yönelik çok yıllık stratejisinin önemli bir parçasıdır. Material You şu özellikleri sunar:

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

• Android OEM'ler, sistem kullanıcı arayüzü ve birinci taraf uygulamalarında donanımlarına, marka renklerine, markalarına ve biçimlerine uygun şekilde yenilik yapmaya devam etme fırsatı elde eder.

Dinamik renkten yararlanmak için Android 12 Material You renk ayıklama hikayesini, kullanıcılara sunduğunuz yazılım teklifinin önemli bir parçası olarak kullanın. Cihaz üzerinde, AOSP'deki renk ayıklama mantığını, özellikle de tek bir duvar kağıdı veya tema kaynak rengini alıp 65 renk API'si aracılığıyla çıkış veren mantığı kullanın. Dinamik renk koşulları için 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:

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

1. Kullanıcı, OEM seçiciyi kullanarak duvar kağıdını veya temayı değiştirir.

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

   • Cihaz teması. Seçilen Android, koşulları karşılayan tek bir kaynak renk otomatik olarak seçer.

   • Yeni duvar kağıdı ve tema. AOSP mantığı, seçildiğinde otomatik olarak seçili duvar kağıdından tek bir kaynak renk seçer.

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

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

Android 12 yamaları

Duvar kağıdı rengini ayıklamayla ilgili uçtan uca mantığı elde etmek 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

  • AOSP'ye monet ekleme
  • Tohum renkleri için renk/lstar filtrelerini ayarlama
  • 90 tonda en fazla 40 kromatiklik kullanın

• Kesinlikle önerilir

  • Açılış rengi sysprops'ini ayarlarken yarış koşulunu düzeltin.
  • Yer paylaşımlarının tema değişiklikleri hakkında bilgilendirilmesine izin verme
  • Başlatma rengi sysprops ayarlanırken yarış koşulunu düzeltme (2. tur)
  • FeatureFlags'ı flags paketine taşıyın.
  • Çok kullanıcılı tema desteğini doğru şekilde uygulama
  • Belirtilen duvar kağıdı rengi seçeneğinin yeniden başlatma işleminden sonra eksik olması sorunu düzeltildi
  • Üçüncül ton hesaplama hatası düzeltildi
  • Arka plan uygulamalarının temayı değiştirmesine izin verme

Tema seçicide özel renkler belirtme

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

• frameworks/base/packages/SystemUI/res/values/flags.xml için flag_monet değeri true.
• packages/apps/ThemePicker/res/values/override.xml dosyasında themes_stub_package içinde paket adını içeren bir sistem stub APK'sı tanımlanır.

Stub APK biçimi

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

Bu APK'da yalnızca mevcut temel renkleri ve adlarını ayrıntılı olarak açıklayan kaynaklar bulunmalıdır.

Kısa kod, res/xml altında aşağıdaki biçime sahip 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 dizelerin adı bundle_name_item olduğu sürece color_bundles içindeki her item farklı bir ada sahiptir.

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

Gerçek renk değerleri, aynı XML'de veya aşağıdaki biçime sahip ayrı bir kaynak 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şlerinin değerleri, temel renk bölümünde gösterilecek her rengin gerçek renk kodlarıdır.

1. adım: Kullanıcı tema oluşturma deneyimi oluşturun

Tema seçici, kullanıcıların yeni Material You kişiselleştirme özellikleriyle etkileşime geçtiği ve renk seçenekleri veya hazır ayarlar arasından seçim yaptığı yerdir. Ürününüze ve kullanıcı demografinize uygun olarak, 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ı renginin çıkarılması varsayılan olarak açıktır. 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 ayıklayın

Duvar kağıdı rengini ayıklama ö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ı ayıklama işlemini tetikleyen AOSP mantığı, frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java'te, ThemeOverlayController#mOnColorsChangedListener'te WallpaperManager#onWallpaperColorsChanged aracılığıyla başlar. Tutarlı bir geliştirme deneyimi için değiştirilmemiş AOSP mantığını kullanmanızı öneririz.

Mantık, varsayılan olarak 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) öğesini kullanın.

Kullanıma uygun olması için kaynak rengin (duvar kağıdından veya kullanıcı tarafından seçilen bir hazır ayardan ayıklanmış olsun) CAM16 kroma değerinin en az 5 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 etmesini sağlar. CAM16'da renkleri okumak ve değiştirmek için Cam#fromInt veya Cam#getInt tuşlarını kullanın.

Dinamik olmayan bir renk paleti kullanma Duvar kağıdı renginin çıkarılmasını desteklemeyen cihazlarda, aşağıdakileri 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'te flag_monet'ü devre dışı bırakarak varsayılan Material paletini kullanın.
• Kullanıcıların, önceden ayarlanmış bir tema seçici kullanarak işletim sistemlerini kişiselleştirebildiğinden emin olun.

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

Android, önceki adımdan türetilen tek kaynak rengi kullanarak 5 benzersiz ton paleti (vurgu 1-3, nötr 1-2) oluşturur. Her palet 13 renk içerir ve her renk farklı parlaklık değerleri (0 ila 1.000) içerir. Böylece toplam 65 renk elde edilir. Android 12 yamalarını içeren mantık, bu renk genişletmesini doğru şekilde uygular. Aşağıda verilen ayrıntılar, uygulamayı açıklar.

Geliştirici tutarlılığı için 5 ton paleti (accent1, accent2, accent3, neutral1, neutral2) ve bunlara karşılık gelen 13 renk, tek bir kaynak renge dayalı olmalıdır. CAM16 renk doygunluğu ve ton değerlerinde aşağıdaki gibi ilgili değişiklikler yapılmalıdır:

• system_accent1

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

• system_accent2

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

• system_accent3

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

• system_neutral1

  • Chroma: "4" değerini kullanın
  • Ton: Kaynakla aynı

• system_neutral2

  • Renk: "8" değerini kullanın.
  • Ton: Kaynakla aynı

CTS, parlaklık ve ton API çağrılarının doğrulanmasına yönelik testler içerir. Çalıştırmak için atest SystemPalette simgesini kullanın.

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

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

Dinamik renklerle ilgili genel bilgiler için aşağıdakilere bakın:

• Uygulamalardaki ve sistem kullanıcı arayüzündeki ö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 ve sistem kullanıcı arayüzündeki arka plan öğeleri 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'un renkleri nasıl eşleştirdiği ve API'lerin SysUI'de nasıl kullanıldığı hakkında daha fazla bilgi için Ek Kaynaklar bölümüne bakın.

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

Android 13 ve sonraki sürümler için derleme

Android 13'ten itibaren android.theme.customization.accent_color desteği sonlandırılmıştır. Farklı renk varyantlarını desteklemek için yeni bir özellik android.theme.customization.theme_style eklendi. Şu anda kod tabanında aşağıdaki dört varyant mevcuttur:

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ıldığında cihaz, aşağıdaki biçimde bir JSON dosyası sağlayarak Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES'e geçerli bir kaynak renk göndermelidir (746BC1, geçerli bir kaynak renk örneğidir):

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

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

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'i kullandığından, hangi cihazların Dinamik renk ton paletleri özelliğini entegre ettiğini belirtmek için kodlanmış bir izin verilenler listesi kullanıyoruz.

Hareket

Akıcı hareketler, cihazların modern ve premium bir görünüme sahip olmasını sağlar. Geliştiricilerin güvenini kazanmak ve memnuniyetini sağlamak için akışkan hareketin tutarlı görünmesi ve hissettirmesi gereken iki önemli parçası olan kaydırma aşma ve dalga efekti gerekir.

İşletim sisteminizde fazla kaydırma özelliğini kullanma

Android 12, kullanıcı bir listenin kenarından öteye kaydırmaya çalıştığında gösterilen, görüntü germe şeklinde daha duyarlı ve dinamik bir aşırı kaydırma hareketi içerir. Aşağıda bir örnek verilmiştir:

Şekil 2. Ayarlar'da gösterilen Android 12'nin kaydırma efekti

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

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

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

Birinci taraf uygulamalarında fazla kaydırma kullanma

Özel görünümleri kullanırken, uzaytma efektini kullanan bazı uygulamaları ve sistem arayüzünü değiştirmeniz gerekebilir.

• Uzatma kaydırma özelliğini desteklemek için en yeni kitaplıklara geçin:

  • 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üzenler için aşağıdaki kullanıcı deneyimi değişikliklerini göz önünde bulundurun:

  • Genişletilmiş kaydırma özelliğinde, kullanıcılar sayfa genişletilirken sayfanın içerikleriyle etkileşime geçmemelidir. Kullanıcılar yalnızca esnemeyi kontrol etmeli, örneğin içerikteki bir düğmeye basmamalıdır.

  • Kullanıcılar EdgeEffect animasyonu devam ederken içeriğe dokunduklarında animasyonu yakalamalı ve esnemeyi kontrol edebilmelidir. Mevcut çekme değeri EdgeEffectCompat.getDistance() adresinden kullanılabilir.

  • Çekme değerini değiştirmek ve tüketilen tutarı döndürmek için onPullDistance() değerini kullanın. Bu sayede geliştiriciler, parmak başlangıç konumunun ötesinde içeriği uzattıkça germe işleminden kaydırmaya sorunsuz bir şekilde geçiş yapabilir.

  • İç içe yerleştirilmiş kaydırma kullanılırken içerik uzatılmışsa uzatılmış içerik, iç içe yerleştirilmiş içerikten önce dokunma hareketini tüketmelidir. Aksi takdirde, parmak uzatmayı bırakmak yerine yön değiştirdiğinde iç içe yerleştirilmiş içerik kaydırılabilir.

Ekranın dışına kaydırmayla ilgili ayrıntılar için Kaydırma hareketine animasyon ekleme başlıklı makaleyi inceleyin.

İşletim sisteminizde dalga (dokunma geri bildirimi) kullanma

Android 12, kullanıcılara dokunma geri bildirimi sağlamak için daha yumuşak ve daha ince bir dokunma dalgası içerir.

Şekil 3. Daha yumuşak bir doldurma animasyonuyla Android 12 dalga efekti

Geliştiricilerin tahmin edilebilirliği ve mükemmel bir kullanıcı deneyimi sunmak için cihazlarınızdaki dalga etkisinin yukarıda gösterilen örneğe benzer olduğundan emin olun. Dalga etkisini desteklemek için belirli entegrasyon adımlarını uygulamanız gerekmese de uygulamanızda istenmeyen gerileme olup olmadığını kontrol etmek için cihazlarınızdaki etkiyi test etmeniz gerekir.

Widget'lar

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

• İşletim sisteminizde widget düzenleri, boyutlandırma ve yazılım parametreleriyle (örneğin, yuvarlatılmış köşe boyutu) ilgili geliştirici API'lerini destekleyin. Uygulamanız, API'ler aracılığıyla parametreler sağlama ve widget'ların kullanıcı tarafından boyutlandırılabilir ve yapılandırılabilir olmasını 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 yapılacaklar listesini inceleyin.

  • Öncelik, platformdan gelen önerilere dayanır.
  • 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ştirin	Önizlemeleri ölçeklenebilir hale getirme	P1
  	Widget açıklaması ekleme	P1
  	Widget'ları kişiselleştirmeyi kolaylaştırma	P2 (isteğe bağlı)
  	Daha akıcı geçişler etkinleştirin	P0
  	Yayın sıçrama tahtalarından kaçının	P0
  Widget yönergelerini benimseme	Widget boyutlarını ve düzenlerini iyileştirme	P2
  	Dinamik renkler uygulama	P0
  	Yuvarlatılmış köşeler uygulama	P0
  	Yeni birleş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 önümüzdeki sürümde tema özelliklerini güncelleyecek.

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

SSS

Renk ayıklama

Kullanıcı duvar kağıdını değiştirdiğinde renk ayıklama işlemi otomatik olarak mı yapılır yoksa bir yerden mi tetiklenmesi gerekir?

Android 12 yamaları ile duvar kağıdı rengi ayıklama özelliği varsayılan olarak açıktır.

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

Animasyonlu Duvar Kağıtları veya Video Duvar Kağıtları için Renk Ayıklama'nın ekrandan ne zaman renk aldığını öğrenebilir miyiz? Bazı kullanıcılar, en çok gösterilen son karedeki renkleri tercih edebilir.

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

Tema/duvar kağıdı seçici

Tema seçicinin, kullanıcıların en yüksek sıklıktaki renkten farklı olarak birden fazla kaynak renk seçebilmesini nasıl etkinleştirebilirim? Bu renkleri ayıklama mantığından almamızın bir yolu var mı?

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

Pixel adlarında tema simgesi olarak adlandırılan bir özellik vardır. Paylaştığınız üç yamaya dahil mi? 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 ayıklama ve seçim özellikleri etkinken kullanmanın bir yolu var mı?

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

Daha fazla bilgi için TAM'ınızla iletişime geçin.

OEM'lerin, ayarlar menüsünde dinamik renk önizlemesinin kendi sürümlerini uygulayabilmesi için Google'ın uygulamayı veya kaynak kodunu paylaşması mümkün mü? Bu önizleme, 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'tir.

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

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

Duvar kağıdı seçici uygulaması, Başlatıcı'da bir ContentProvider'ün kullanılmasını bekler (Launcher3 tabanlı bir başlatıcıda bu mevcuttur). Önizleme, başlatıcıda GridCustomizationsProvider tarafından sağlanır. Duvar kağıdı ve stil uygulamasının bunu okuyabilmesi için başlatıcının ana etkinliğinin meta verilerinde bu önizlemeye referans verilmelidir. Tüm bunlar AOSP'nin Launcher3'ünde uygulanır ve OEM'ler tarafından kullanılabilir.