Bahan yang Anda desain

Mulai Android 12, desain Material You berfokus pada ekspresi dan kelancaran di OS Android, dengan tujuan membantu pengguna menciptakan dan memiliki satu pengalaman kohesif yang memenuhi kebutuhan mereka. Sebagai mitra Android, Anda dianjurkan untuk memasukkan Materi yang Anda desain ke perangkat Android Anda di bidang berikut:

• Warna dinamis
• Gerakan
• Widget

Warna dinamis

Warna dinamis adalah inti dari desain Material You dan bagian penting dari strategi multi-tahun Android untuk menghadirkan penyesuaian yang lebih sederhana dan mendalam kepada penggunanya dengan cara yang tidak dapat dilakukan perangkat lain. Materi yang Anda tawarkan:

• Pengguna dan pengembang memiliki kisah personalisasi yang konsisten dan kaya yang tersedia di perangkat Android mana pun.

• OEM Android berpeluang untuk terus berinovasi pada UI sistem dan aplikasi pihak pertama dengan cara yang selaras dengan perangkat keras dan warna, merek, dan bentuk merek mereka.

Untuk memanfaatkan warna dinamis, gunakan kisah ekstraksi warna Android 12 Material You sebagai bagian penting dari penawaran perangkat lunak Anda kepada pengguna. Pada perangkat, gunakan logika ekstraksi warna yang ada di AOSP, terutama logika yang mengambil satu warna sumber wallpaper atau tema dan mengeluarkannya melalui 65 API warna. Untuk persyaratan warna dinamis, lihat Menggunakan Warna Dinamis .

Aliran warna dinamis penuh mencakup empat langkah, seperti yang diilustrasikan di bawah ini:

Gambar 1. Aliran warna dinamis Material You

1. Pengguna mengubah wallpaper atau tema melalui pemilih OEM.

2. Pengguna memilih salah satu dari berikut ini:

   • Tema perangkat. Saat dipilih, Android secara otomatis memilih satu warna sumber yang memenuhi persyaratan.

   • Wallpaper + tema baru. Saat dipilih, logika AOSP secara otomatis memilih satu warna sumber dari wallpaper yang dipilih.

3. AOSP memperluas warna sumber tunggal menjadi 5 palet tonal dengan masing-masing 13 varian warna tonal, sesuai logika AOSP, yang kemudian mengisi 65 atribut warna.

4. UI aplikasi menggunakan 65 atribut warna dengan cara yang konsisten di seluruh ekosistem aplikasi Android. Anda dianjurkan untuk menggunakan palet warna yang sama untuk UI Sistem perangkat dan aplikasi khusus OEM.

Patch Android 12

Untuk mendapatkan logika menyeluruh untuk ekstraksi warna wallpaper dan memungkinkan perangkat mengisi API 65 warna dengan cara yang konsisten dengan ekosistem, sertakan patch berikut dalam penerapan Android 12 Anda:

• Wajib

  • Tambahkan monet ke AOSP
  • Sesuaikan filter kroma/lstar untuk warna benih
  • Gunakan kroma maks 40 pada nada 90

• Sangat direkomendasikan

  • Perbaiki kondisi balapan saat mengatur sysprops warna boot.
  • Izinkan overlay diberi tahu tentang perubahan tema
  • Perbaiki kondisi balapan saat menyetel sysprops warna boot (putaran 2)
  • Pindahkan FeatureFlags ke paket flags.
  • Menerapkan dukungan tema multi-pengguna dengan benar
  • Perbaiki opsi warna wallpaper tertentu yang hilang setelah reboot
  • Perbaiki kesalahan komputasi rona tersier
  • Jangan izinkan aplikasi latar belakang mengubah tema

Menentukan warna khusus pada ThemePicker

Jika Anda menggunakan aplikasi AOSP ThemePicker, aplikasi WallpaperPicker menampilkan bagian warna jika kedua kondisi berikut terpenuhi:

• flag_monet pada frameworks/base/packages/SystemUI/res/values/flags.xml adalah true .
• APK rintisan sistem dengan nama paket ditentukan dalam themes_stub_package dalam file packages/apps/ThemePicker/res/values/override.xml .

Format APK rintisan

Contoh versi APK ini dapat ditemukan di packages/apps/ThemePicker/themes .

APK ini hanya boleh berisi sumber daya, yang merinci warna dasar yang tersedia dan namanya.

Stub harus berisi file XML di bawah res/xml dengan format berikut:

<?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>

Dalam file ini, setiap item dalam color_bundles memiliki nama yang berbeda, selama string di bawahnya diberi nama bundle_name_ item .

Harus ada string bundle_name_ item untuk setiap warna, dengan nama deskriptif untuk setiap warna. Ini dapat diterjemahkan dengan menambahkan string terjemahan yang sesuai ke dalam direktori res/values- language code .

Nilai warna sebenarnya dapat berada pada XML yang sama atau pada file XML sumber daya terpisah dengan format berikut:

<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>

Untuk setiap item dalam array bundel warna, harus ada entri color_primary_ item dan color_secondary_ item (dan kedua warna harus memiliki warna yang sama). Nilai untuk entri color ini adalah kode warna sebenarnya untuk setiap warna yang akan ditampilkan di bagian warna dasar .

Langkah 1: Bangun pengalaman tema pengguna

Pemilih tema adalah tempat pengguna terlibat dengan kemampuan personalisasi Material You yang baru dan berpotensi memilih antara opsi warna atau preset. Karena sesuai dengan demografi produk dan pengguna, Anda dapat menawarkan personalisasi dan pengalaman warna yang lebih kaya kepada pengguna melalui penggunaan pemilih tema atau pemilih wallpaper .

• Saat menggunakan pemilih wallpaper, ekstraksi warna wallpaper diaktifkan secara default. Namun, Anda dapat membuat beberapa penyesuaian pada alat pilih untuk memberikan lebih banyak opsi kepada pengguna.

Langkah 2: Ekstrak warna wallpaper menjadi warna sumber

Untuk mengaktifkan ekstraksi warna wallpaper, pilih patch Android 12 yang tercantum di atas (fungsi ini akan diaktifkan secara default pada rilis AOSP mendatang). Logika AOSP yang memicu ekstraksi wallpaper dimulai pada frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java , pada ThemeOverlayController#mOnColorsChangedListener , melalui WallpaperManager#onWallpaperColorsChanged . Kami merekomendasikan penggunaan logika AOSP yang tidak dimodifikasi untuk memastikan pengalaman pengembangan yang konsisten.

Secara default, logika memilih warna frekuensi tertinggi yang sesuai untuk digunakan. Untuk memanfaatkan warna sumber lain yang dikembalikan oleh algoritme dan menampilkan warna tersebut kepada pengguna di pemilih tema, gunakan ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Agar sesuai untuk digunakan, warna sumber (baik diekstraksi dari wallpaper atau preset yang dipilih pengguna) harus memiliki nilai kroma CAM16 minimal 5; ini memastikan bahwa warna sumber tidak terpengaruh oleh rona gelap halus saat diubah dari satu warna menjadi 65 warna rona dan tetap mewakili pilihan pengguna. Untuk membaca dan mengubah warna di CAM16, gunakan Cam#fromInt atau Cam#getInt .

Menggunakan palet warna non-dinamis Untuk perangkat yang tidak mendukung ekstraksi warna wallpaper, Anda tetap dapat memastikan bahwa aplikasi Google dan aplikasi pihak ketiga yang mendukung warna dinamis tampak bagus dengan melakukan hal berikut:

• Gunakan palet Material default dengan menonaktifkan flag_monet pada frameworks/base/packages/SystemUI/res/values/flags.xml .
• Pastikan pengguna masih dapat mempersonalisasi OS mereka menggunakan pemilih tema yang telah ditetapkan sebelumnya.

Langkah 3: Perluas warna sumber menjadi API warna

Menggunakan warna sumber tunggal yang berasal dari langkah sebelumnya, Android menghasilkan 5 palet nada unik (aksen 1-3, netral 1-2), setiap palet berisi 13 warna, dan setiap warna menyertakan nilai pencahayaan berbeda (0 hingga 1000), untuk a total 65 warna. Logika yang disediakan dalam patch Android 12 mengimplementasikan perluasan warna ini dengan benar; rincian yang diberikan di bawah ini menjelaskan implementasinya.

Untuk konsistensi pengembang, 5 palet tonal (accent1, aksen2, aksen3, netral1, netral2) dan 13 warna yang sesuai harus didasarkan pada satu warna sumber dengan perubahan masing-masing pada nilai kroma dan rona CAM16 seperti yang ditulis di bawah ini:

• system_accent1

  • Chroma: gunakan "40" untuk varian warna yang diakhiri dengan 0 , 10 , 50 , dan 100 , jika tidak "48"
  • Hue: sama seperti sumbernya

• system_accent2

  • Kroma: gunakan "16"
  • Hue: sama seperti sumbernya

• system_accent3

  • Kroma: gunakan "32"
  • Hue: putar positif 60 derajat

• system_neutral1

  • Kroma: gunakan "4"
  • Hue: sama seperti sumbernya

• system_neutral2

  • Kroma: gunakan "8"
  • Hue: sama seperti sumbernya

CTS mencakup pengujian untuk memvalidasi panggilan API luminansi dan rona. Untuk menjalankannya, gunakan atest SystemPalette .

Langkah 4: Gunakan warna dinamis di aplikasi dan UI Sistem

Setelah warna dinamis disetel pada perangkat, aplikasi mengikuti pedoman Material untuk memanfaatkan warna tersebut. Pedoman material akan dirilis di material.io pada tanggal 26 Oktober 2021 untuk diadopsi oleh aplikasi pihak ketiga. Untuk UI Sistem dan aplikasi pihak pertama, kami sangat menyarankan untuk mengintegrasikan warna dinamis di seluruh pengalaman pengguna dengan cara yang sesuai dengan perangkat keras dan merek Anda serta membantu Anda membedakan perangkat.

Untuk panduan warna dinamis umum, lihat yang berikut ini:

• Gunakan warna aksen untuk elemen latar depan di aplikasi dan UI Sistem:

  @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
  

• Gunakan warna netral untuk elemen latar belakang di aplikasi dan UI Sistem:

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

Untuk informasi selengkapnya tentang cara Material You memetakan warna dan cara API digunakan di SysUI, lihat Sumber Daya Tambahan .

Langkah 5: Tambahkan opsi warna dinamis dalam implementasi AOSP WallpaperPicker Anda

Dibuat untuk Android 13 dan lebih tinggi

Dimulai dengan Android 13, android.theme.customization.accent_color tidak digunakan lagi. Atribut baru android.theme.customization.theme_style ditambahkan untuk mendukung varian warna yang berbeda. Saat ini kami memiliki empat varian dalam basis kode sebagai berikut:

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.

Ini dikirim ke Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , seperti yang ditunjukkan dalam JSON di bawah:

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

Dibuat untuk Android 12 dan lebih rendah

Saat menggunakan pemilih tema khusus, perangkat harus mengirimkan warna sumber yang valid ke Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES dengan menyediakan file JSON dalam format berikut (dengan 746BC1 adalah contoh warna sumber yang valid):

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

Melakukan hal ini akan melewati ekstraksi warna wallpaper (Langkah 2) dan secara langsung memperluas warna sumber yang disediakan menjadi 65 atribut warna (Langkah 3).

Langkah 6: Ajukan tiket

Selain integrasi sistem, Anda perlu mengajukan tiket dan memberi tahu kami nama merek Anda ( Build.MANUFACTURER ). Karena sebagian besar aplikasi pihak ketiga menggunakan Komponen Material untuk Android untuk menampilkan warna dinamis, kami menggunakan daftar hardcode yang diizinkan untuk mengetahui perangkat mana yang telah mengintegrasikan fitur Palet warna dinamis .

Gerakan

Gerakan yang lancar membuat perangkat terasa modern dan premium. Untuk membangun dan mempertahankan kepercayaan dan kebahagiaan pengembang, overscroll dan riak adalah dua bagian penting dari gerakan yang lancar yang perlu terlihat dan terasa konsisten.

Menggunakan overscroll di OS Anda

Android 12 menyertakan gerakan gulir berlebih yang lebih responsif dan dinamis dalam bentuk bentangan tampilan, yang ditampilkan saat pengguna mencoba men-scroll melewati tepi daftar. Contohnya ditunjukkan di bawah ini:

Gambar 2. Efek overscroll Android 12, seperti yang ditunjukkan di Pengaturan

Untuk konsistensi pengembang, pastikan bahwa keseluruhan efek gulir berlebihan pada perangkat Anda serupa dengan yang berikut:

• Pada perangkat yang mengembalikan nilai true untuk ActivityManager.isHighEndGfx() , efek gulir berlebih adalah bentangan layar non-linier (seperti yang ditunjukkan di atas).

• Pada perangkat berperforma lebih rendah, efek regangan disederhanakan menjadi regangan linier (untuk mengurangi beban pada sistem).

Menggunakan overscroll di aplikasi pihak pertama

Saat menggunakan tampilan khusus, Anda mungkin perlu mengubah beberapa aplikasi dan UI sistem yang menggunakan efek peregangan.

• Untuk mendukung stretch overscroll, tingkatkan ke perpustakaan terbaru:

  • androidx.recyclerview:recyclerview:1.3.0-alpha01 untuk RecyclerView
  • androidx.core:core:1.7.0-alpha01 untuk NestedScrollView dan EdgeEffectCompat
  • androidx.viewpager:viewpager:1.1-alpha01 untuk ViewPager

• Untuk tata letak khusus yang menggunakan EdgeEffect , pertimbangkan perubahan UX berikut:

  • Dengan stretch overscroll, pengguna tidak boleh berinteraksi dengan konten tata letak saat sedang diregangkan. Pengguna hanya boleh memanipulasi bentangan itu sendiri dan tidak, misalnya, dapat menekan tombol di konten.

  • Saat pengguna menyentuh konten saat animasi EdgeEffect sedang berlangsung, mereka harus menangkap animasi tersebut dan diizinkan untuk memanipulasi peregangan. Nilai tarikan saat ini tersedia dari EdgeEffectCompat.getDistance() .

  • Untuk memanipulasi nilai tarikan dan mengembalikan jumlah yang dikonsumsi, gunakan onPullDistance() . Hal ini memungkinkan pengembang untuk bertransisi dengan lancar dari peregangan ke pengguliran saat jari merentangkan konten melewati posisi awal.

  • Saat bekerja dengan pengguliran bertumpuk, jika konten diregangkan, regangan harus menggunakan gerakan sentuh sebelum konten yang disarangkan, atau pengguliran bertumpuk dapat bergulir saat jari mengubah arah alih-alih melepaskan regangan.

Untuk detail tentang gulir berlebihan, lihat Menganimasikan Gerakan Gulir .

Menggunakan riak (umpan balik sentuh) di OS Anda

Android 12 menyertakan riak sentuhan yang lebih lembut dan halus untuk memberikan masukan kepada pengguna saat mengetuk ke bawah.

Gambar 3. Efek riak Android 12, dengan animasi pengisian yang lebih lembut

Untuk prediktabilitas pengembang dan untuk memberikan pengalaman pengguna yang luar biasa, pastikan bahwa efek riak pada perangkat Anda serupa dengan contoh yang ditunjukkan di atas. Meskipun Anda tidak perlu melakukan langkah integrasi khusus apa pun untuk mendukung efek riak, Anda harus menguji efek tersebut pada perangkat Anda untuk memeriksa regresi yang tidak diinginkan yang muncul dalam penerapan Anda.

Widget

Widget adalah komponen kunci perangkat Android. Android 12 menyertakan API baru dan kemampuan API yang harus didukung oleh semua OEM.

• Di OS Anda, dukung API pengembang yang terkait dengan tata letak widget, ukuran, dan parameter perangkat lunak (misalnya, ukuran sudut membulat). Implementasi Anda harus mendukung widget dengan benar dalam menyediakan parameter melalui API dan memastikan widget berukuran besar dan dapat dikonfigurasi oleh pengguna.

• Di aplikasi Anda, manfaatkan kemampuan API baru untuk memperbarui atau membuat widget pihak pertama baru jika memungkinkan. Untuk semua widget aplikasi pihak pertama di bidang Anda, jalankan melalui daftar periksa pengembang di bawah.

  • Prioritas didasarkan pada rekomendasi dari platform.
  • Untuk detail mengenai rekomendasi, ikuti tautan di kolom Perubahan.

  Daerah	Mengubah	Prioritas implementasi
  Tingkatkan pengalaman rumah	Tambahkan pratinjau yang dapat diskalakan	P1
  	Tambahkan deskripsi widget	P1
  	Mempermudah personalisasi widget	P2 (opsional)
  	Aktifkan transisi yang lebih mulus	P0
  	Hindari trampolin siaran	P0
  Terapkan pedoman widget	Tingkatkan ukuran dan tata letak widget	hal2
  	Terapkan warna dinamis	P0
  	Terapkan sudut membulat	P0
  	Tambahkan tombol gabungan baru	hal2
  Sederhanakan kode widget yang ada	Sederhanakan Koleksi RemoteView	hal2
  	Sederhanakan waktu proses RemoteView	hal2

Sumber daya tambahan

Penggunaan warna SysUI

(aksen1 = A1, aksen2 = A2, aksen3 = A3, netral1 = N1, netral2 = N2)

Gambar 4. Penggunaan warna dinamis di UI Sistem

Pembaruan atribut warna pustaka material

Material akan memperbarui atribut temanya pada rilis mendatang dengan membuat peran warna yang digunakan untuk memberikan warna pada tampilan tertentu.

Material akan memperbarui atribut statusnya dengan petunjuk berikut:

FAQ

Ekstraksi warna

Setelah pengguna mengganti wallpaper, apakah ekstraksi warna dilakukan secara otomatis atau perlu dipicu dari suatu tempat?

Dengan patch Android 12 , ekstraksi warna wallpaper diaktifkan secara default .

ThemeOverlayController.java memicu logika dengan ThemeOverlayController#mOnColorsChangedListener dan WallpaperManager#onWallpaperColorsChanged .

Untuk Wallpaper Animasi atau Wallpaper Video , dapatkah kami mengetahui kapan Ekstraksi Warna mengambil warna dari layar? Beberapa pengguna mungkin menginginkan warna dari bingkai terakhir karena warna tersebut paling sering ditampilkan.

Ekstraksi warna dipicu saat pengguna menyetel wallpaper atau setelah siklus daya layar (sebagai respons terhadap WallpaperEngine#notifyColorsChanged ). Acara WallpaperColors terakhir (dari wallpaper hidup) diterapkan setelah pengguna mematikan layar dan menyalakannya kembali.

Pemilih tema/wallpaper

Bagaimana cara mengaktifkan pemilih tema untuk menampilkan beberapa warna sumber agar pengguna dapat memilih warna frekuensi tertinggi? Apakah ada cara untuk mendapatkan warna-warna tersebut dari logika ekstraksi?

Ya. Di pemilih tema, Anda dapat menggunakan ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Ada fitur pada nama Pixel sebagai Ikon bertema . Apakah termasuk dalam tiga patch yang sudah Anda bagikan? Bagaimana OEM bisa menerapkannya?

Tidak. Ikon bertema masih dalam versi Beta dan tidak tersedia di Android 12.

Apakah ada cara untuk menggunakan aplikasi Google Wallpaper dengan fitur ekstraksi dan pemilihan warna diaktifkan?

Ya. Fitur-fitur tersebut dapat diterapkan di aplikasi Google Wallpaper versi terbaru dengan mengikuti langkah-langkah integrasi yang dijelaskan sebelumnya di halaman ini.

Hubungi TAM Anda untuk detail lebih lanjut.

Bisakah Google membagikan aplikasi atau kode sumber sehingga OEM dapat menerapkan pratinjau warna dinamis versi mereka sendiri di menu pengaturan mereka, yang terlihat mirip dengan bagian pratinjau yang ditampilkan di aplikasi pemilih Wallpaper Google?

Kelas utama yang merender pratinjau adalah WallpaperPicker2 dan Launcher3 .

Layar pratinjau wallpaper adalah WallpaperSectionController .

Bagaimana cara menerapkan Pratinjau setelah mengubah warna, seperti yang ditunjukkan di aplikasi Google Wallpaper?

Aplikasi pemilih Wallpaper mengharapkan ContentProvider tersedia dari Peluncur (peluncur berbasis Launcher3 memilikinya). Pratinjau disediakan oleh GridCustomizationsProvider di Peluncur, yang harus dirujuk dalam metadata Aktivitas utama Peluncur agar wallpaper dan aplikasi gaya dapat membacanya. Semua ini diimplementasikan di Launcher3 AOSP dan tersedia untuk OEM.