Material You transformoval možnosti přizpůsobení na Androidu díky výkonné a zároveň snadno použitelné nabídce: dynamické barvy, které se přizpůsobují uživateliZa touto magií se skrývá pečlivě navržený engine pro extrakci a rozšiřování barev, který nejen vykresluje krásná rozhraní, ale také zajišťuje konzistenci, přístupnost a předvídatelnost pro vývojáře a výrobce originálního vybavení (OEM).
V této příručce vám podrobně popíšeme, jak funguje dynamická barevná paleta, jak se generuje z tapety nebo základní barvy a jak... Změna motivu v systémech Android 12 a Android 13 v souladu s doporučeními AOSP a Material Design 3. Uvidíte také, jaké možnosti mají výrobci, jak vše do sebe zapadá s widgety, pohybovými a dotykovými efekty a jaké nástroje můžete použít k maximálnímu návrhu a testování.
Jaká je dynamická barevná paleta v Material You?
Klíčovou myšlenkou je, že systém vezme jednu zdrojovou barvu (buď z tapety, nebo uživatelem definovanou barvu) a transformuje ji do kompletní sady konzistentních tónových barev pro celý systém a aplikace. Tento engine generuje 5 tónových palet s 13 odstíny v každé (celkem 65 atributů), aby bylo možné komponenty materiálu konzistentně mapovat na barevné role.
Tento přístup poskytuje uživatelům a vývojářům historie úpravy uniforem a funkčně funkčná na jakémkoli zařízení se systémem Android, což umožňuje výrobcům originálního vybavení (OEM) inovovat svá vlastní uživatelská rozhraní, aniž by se narušila soudržnost ekosystému nebo ohrozila přístupnost.
Jak funguje extrakce a expanze barev
Od verze Android 12 obsahuje AOSP logiku extrakce a rozšiřování barev, která převádí tapetu nebo základní barvu do tónových palet. Pro zajištění konzistentního zážitku se doporučuje používat stejná logika jako AOSP bez úprav, a to jak v uživatelském rozhraní systému, tak v aplikacích výrobce.
Kompletní průtok ve 4 krocích
- Uživatel změní tapetu nebo téma pomocí selektoru výrobce originálního vybavení (OEM). Tímto gestem systém zobrazí dostupné možnosti pro generování nebo použití tématu. Zdroj barev může být automatický nebo zvolený..
- Uživatel si vybírá mezi dvěma cestami: „Téma zařízení“ (Android automaticky určí platnou barvu seed) nebo „Nová tapeta a téma“ (Logika AOSP extrahuje vhodnou zdrojovou barvu z nového obrázku.)
- S vybranou barvou semínka ji AOSP rozšíří na 5 tónových palet s 13 hodnotami pro každou z nich (přízvuk 1–3, neutrální 1–2), čímž se v celém systému šíří 65 atributů připravených k použití.
- Uživatelské rozhraní a aplikace systému těchto 65 atributů využívají konzistentně. Google doporučuje, aby výrobci OEM používali jedna paleta pro systém a proprietární aplikace pro posílení vizuální kontinuity.
Technické požadavky a záplaty v systému Android 12
V zařízeních s Androidem 12L nebo novějším je dynamické zobrazování barev již integrováno. Pokud používáte Android 12, budete muset zahrnout záplaty, které poskytují logika typu end-to-end těžby a rozšiřování, s prvky označenými jako „povinné“ a „vysoce doporučené“, aby byla zajištěna konzistence 65 atributů a jejich kompatibilita s ekosystémem.
Logika začíná v Ovladač překrytí tématu SystemUI a reaguje na změny v Barvy na tapetě oznámeno Správce tapetTento přístup zajišťuje, že když uživatel změní pozadí, systém předvídatelně aktualizuje téma.
ThemePicker a definování vlastních barev pomocí stub APK
Pokud používáte AOSP ThemePicker, sekce barev se zobrazí, když jsou splněny dvě podmínky: příznak flag_monet = true v SystemUI a definice balíčku výhonek en override.xmlTato „pahýlová“ aplikace APK obsahuje minimální zdroje pro výpis dostupných základních barev a jejich názvů a slouží jako katalog… základní barvy.
El výhonek musí obsahovat soubor XML obsahující pole balíčků a popisných řetězců, stejně jako hodnoty primárních a sekundárních barev pro každý balíček. Například:
<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>Barvy lze definovat ve stejném souboru nebo v samostatném souboru zdrojů, a to v párech. základní_barva_* y sekundární_barva_* pro každý balíček. Obě hodnoty musí odpovídat stejné barvě, aby byla zachována integrita katalogu.
<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>Pro internacionalizaci přidejte překlady v res/values-xx s názvy jednotlivých balíčků. Tímto způsobem může ThemePicker zobrazit základní sadu popisných barev, které odpovídají vaší značce.
Krok 1: Navrhněte užitečné téma pro uživatelský zážitek
Uživatel si může přizpůsobit pomocí výběr motivu nebo pozadíPokud zvolíte selektor pozadí, extrakce barvy pozadí je ve výchozím nastavení povolena, i když můžete možnosti rozšířit (například umožnit výběr z více semen navržených algoritmem).
Krok 2: Extrakce zdrojové barvy
Extrakce barev se spustí, když uživatel nastaví pozadí nebo po vypnutí a zapnutí obrazovky. Logika AOSP bere z obrázku nejvhodnější barvu, pokud splňuje podmínky. CAM16 chroma minimálně 5 (aby se zabránilo příliš matným semenům). Pro práci s CAM16 můžete použít utility jako Cam#fromInt nebo Cam#getInt.
Pokud vaše zařízení nepodporuje dynamickou extrakci, můžete zvolit nedynamickou paletu: zakázat flag_monet a poskytuje výchozí přepínač motivů, takže uživatel má stále možnosti přizpůsobení.
Krok 3: Rozšíření na 65 atributů
S platným počtem `seed` Android vygeneruje 5 palet: přízvuk1, přízvuk2, přízvuk3, neutrální1 a neutrální2, každý s 13 odstíny, které se liší jasem. Pravidla CAM16 zajišťují konzistenci: například accent1 udržuje základní odstín s chroma 40 na indexech 0, 10, 50 a 100 a 48 jinde; accent2 používá chroma 16; accent3 používá chroma 32 s rotací tón +60°; neutrální1 používá chroma 4; neutrální2 používá chroma 8.
Pro ověření rozšíření zahrnuje CTS testy jasu a odstínu, které lze vyvolat pomocí atest SystemPaletteTímto způsobem můžete ověřit, zda implementace respektuje rozsahy a mapování definované platformou.
Krok 4: Použití v aplikacích a systémovém uživatelském rozhraní
Jakmile jsou dynamické barvy nakonfigurovány, aplikace využívají atributy prostřednictvím Material Components podle pokynů Material Design 3. Google doporučuje integraci dynamické barvy v celém zážitku (systémové a proprietární aplikace) k posílení identity zařízení bez ztráty konzistence s ekosystémem.
Android 13+: Styly motivů a personalizace JSON
Od verze Android 13 se pole android.theme.customization.accent_color stane se nedostupným a dorazí android.theme.customization.theme_style pro rozlišení barevných variant. V AOSP jsou podporovány čtyři styly: TONAL_SPOT (standard od Androidu 12), VIBRANT (přízvuk 2 a 3 analogický s přízvukem 1), expresivní styl (velmi chromatický) a SPRITZ (desaturovaný téměř ve stupních šedi).
Jsou odesláni Nastavení.Zabezpečení.Balíčky_přizpůsobení_překrytí_témat s JSONem, jako je tento:
{ "android.theme.customization.system_palette":"B1611C", "android.theme.customization.theme_style":"EXPRESSIVE" }V systému Android 12 a starších verzích formát zahrnuje také diakritiku: je poskytnut platný seed a systém se přímo rozbalí na 65 atributů, čímž se přeskočí extrakce na pozadí. Příkladem by mohlo být: { „android.theme.customization.system_palette“:»746BC1“, „android.theme.customization.accent_color“:»746BC1“ }.
Seznam povolených a signalizace třetím stranám
Aby třetí strany mohly spolehlivě identifikovat, že vaše zařízení správně implementuje dynamická barevná paletaGoogle udržuje kódovaný seznam povolených. Musíte si otevřít tiket a odeslat svůj VÝROBCETo je klíčové, protože většina aplikací používá Material Components pro Android k malování dynamickými barvami.
Konzistentní pohyb a hmatová zpětná vazba
Android 12 představil protažení očí při dosažení limitů seznamu. Na zařízeních s jeHighEndGfx() Pravda, protahování je nelineární; na méně výkonném hardwaru se zjednodušuje na lineární protahování, aby se snížilo zatížení.
Pokud používáte vlastní zobrazení, aktualizujte knihovny: androidx.recyclerview:recyclerview 1.3.0-alpha01, androidx.core:core 1.7.0-alpha01 (NestedScrollView a EdgeEffectCompat) a androidx.viewpager:viewpager 1.1-alpha01Také s EdgeEffect: zabraňuje interakcím s obsahem během roztahování, umožňuje zachycení animace pro manipulaci se vzdáleností (EdgeEffectCompat.getDistance()) a používá přiPullDistance() pro plynulé přechody mezi roztažením a posouváním, s prioritou roztažení před vnořenými pohledy.
Týkající se dominový efekt (vlnění) Po stisknutí Android 12 vyhladí odezvu a dosáhne jemnější odezvy. Nevyžaduje to žádnou speciální integraci, ale je dobré to otestovat na vašich zařízeních, abyste se vyhnuli estetickým nebo výkonnostním regresím.
Widgety: nová API a aktualizace našich vlastních
Widgety jsou v systému Android stále nezbytné. Váš systém je musí správně podporovat. konstrukční parametry (velikosti, rohy atd.) a umožňují uživateli bezproblémově je překonfigurovat a změnit velikost, a také zpřístupnit příslušné velikosti a poloměry prostřednictvím API.
Využijte nové funkce API k modernizaci widgetů vaší aplikace. Projděte si doporučený seznam úkolů platformy a upřednostněte ty, které budou mít největší dopad na vaši firmu. použitelnost a vizuální konzistence.
Mapování barevných rolí v materiálových komponentách
Material Design 3 aktualizuje atributy motivu tak, aby fungovaly s barevnými rolemi. Ve světlém motivu s dynamickými barvami, Primární barva je obvykle mapován na system_accent1_600 a barvaNaPrimární na system_accent1_0; ve tmě na system_accent1_200 a system_accent1_800. Sekundární prvk se řídí ekvivalentní logikou se system_accent2_*. Pozadí a povrch jsou odvozeny z neutrální1a texty na pozadí/povrchu jsou převzaty z kontrastních tónů.
Podobně jsou atributy stavu zavedeny jako barvaPrimaryStateObsah o colorOnSurfaceVariantStateLayer, zaměřené na specifické indexy palet (např. system_accent1_700 pro světlý obsah hlavního stavu nebo system_neutral2_200 pro tmavé varianty). Toto podrobné mapování zajišťuje konzistenci napříč stavy, vrstvami a kontrasty.
Klíčové časté dotazy
Aktivuje se extrakce automaticky při změně pozadí? Ano. V záplatách pro Android 12 je extrakce barev ve výchozím nastavení povolena prostřednictvím ThemeOverlayController, který naslouchá onColorsChanged a reaguje na něj. WallpaperManager#onWallpaperColorsChanged.
A co animované nebo video pozadí? Extrakce se znovu použije po vypnutí a zapnutí obrazovky, když engine na pozadí upozorní na změny barev (WallpaperEngine#notifyColorsChanged). Poslední tedy Barvy na tapetě Po opětovné aktivaci obrazovky se zkonsoliduje.
Mohu ve výběru zobrazit více semen? Ano. Použijte BarevnéSchéma#getSeedColors(BarvyTapety) nabídnout uživateli alternativy k barvě s nejvyšší frekvencí. Tato možnost vylepšuje možnosti přizpůsobení bez odchylky od logiky AOSP.
A co tematické ikony? Nejsou součástí výše zmíněných oprav a nejsou v systému Android 12 k dispozici jako obecná funkce. Nepokoušejte se předpokládat jejich přítomnost pokud nejsou ve vaší sestavě.
Můžu s tím vším používat aplikaci Google Wallpaper? Ano. Implementujte výše uvedené kroky a spoléhejte se na třídy jako WallpaperPicker2 y Spouštěč3Náhled pozadí je v Ovladač sekce tapetyA Poskytovatel přizpůsobení mřížky zobrazí náhled pomocí ContentProvider které aplikace „Tapeta a styl“ spotřebovává.
Přístupnost a materiály, které navrhujete, nástroje
Material You byl navržen s inkluzivním zaměřením: generované palety si udržují dostatečné kontrasty aby byla zajištěna čitelnost textu a prvků uživatelského rozhraní, a to jak ve světlém, tak i tmavém prostředí. Uživatel si navíc může zvolit úroveň kontrastu (standardní, střední a vysoká) a přizpůsobit si tak zážitek svým potřebám.
Pro designéry, plugin Tvůrce materiálových témat pro Figmu Umožňuje vám generovat a zobrazovat palety na základě barvy nebo obsahu značky, prohlížet si náhled světlých/tmavých stavů a kontrolovat kontrasty. Je to rychlý způsob, jak experimentovat, aniž byste ztratili identitu značky.
Pokud již máte firemní paletu (např. primární zelená, sekundární hnědá, terciární modrá), můžete tyto barvy vložit do nástroje Theme Builder a automaticky generovat tónové stupnice. přístupné kontrastyTo urychluje spolupráci mezi návrhem a vývojem a zkracuje cykly úprav.
Kompatibilita s výrobci a jak ji otestovat bez mobilního telefonu
Dynamické barvení (interně známé jako Monet) nebyl součástí AOSP v původní verzi Androidu 12, ale Google potvrdil jeho příchod do vrstev velkých výrobců, jako jsou Samsung (One UI), OnePlus (OxygenOS), OPPO (ColorOS), Vivo (OriginOS), Realme a Xiaomi (MIUI), Mimo jiné.
Pokud nemáte po ruce kompatibilní zařízení, můžete k tomu použít nástroj Material Theme Builder v prohlížeči. testování dynamických tématStřídejte pozadí nebo nahrajte vlastní obrázek a podívejte se, jak ovlivní barvy vašich aplikací.
Pokročilé přizpůsobení: vrstvené chování a aplikace třetích stran
Implementace od OEM může přinést nuance. Například někteří uživatelé si všimli, že v One UI při používání aplikací, které automaticky mění pozadí (například Tapet), systém ne... osvěžuje paletu dokud paletu ručně nezakážete a znovu nepovolíte v Nastavení. V těchto případech je to obvykle kvůli omezením nebo rozhodnutím o vrstvách: je vhodné ověřit, zda se jedná o očekávané chování nebo o konkrétní chybu.
Pokud chcete jít s úpravami dále, aplikace k přizpůsobení Stejně jako Repainter umožňují jemné doladění systémových palet. Nejlépe fungují s rootem, ale na některých zařízeních fungují i bez rootu pomocí bezdrátového ADB (podobně jako Shizuku). Můžete si vybrat paletu používanou aplikacemi, které podporují Material You, generovat palety z tapety a zamykací obrazovky nebo dokonce vyberte barvu ručně.
Bezplatná verze Repainteru vytváří jeden styl; aplikace obsahuje až šest stylů K dispozici jako třídenní zkušební verze. Poté je k dispozici měsíční předplatné nebo jednorázová platba. Vyžaduje Android 12+ a změny obvykle přetrvávají i po odinstalaci nebo restartu.
Praktické tipy pro design s Material You
Pokud jde o Material Design (2014), Material You zjednodušuje: méně stínů, čistší písma a zaoblenější tvaryGoogle aktualizoval web Material s jasnými pokyny pro komponenty, velikosti, barvy a případy použití, abyste se mohli snadno řídit osvědčenými postupy a neztratit se.
Jako pracovní postup začněte vytvořením barevná paleta (Tvůrce motivů je skvělou volbou), definujte textové styly s ohledem na čitelnost a spolehněte se na oficiální sady Figma Design Kits. Pro usnadnění kontroly je vhodné připravit vizuální šablonu s použitými typografickými styly a jejich vztahem k barvě a povrchům.
Při implementaci použijte Materiální složky a respektujte klíčové části dokumentace (Přehled, Specifikace, Pokyny). Sekce Přístupnost se na některých stránkách stále vyvíjí, ale Specifikace a Pokyny vám poskytnou rozměry, správné použití a omezení, čímž se zabrání překvapením v produkci.
Vývoj aplikace s Material You není složitý, pokud znáte stack, ale vyžaduje to... pokročilé znalosti abyste z toho vytěžili maximum. Pokud potřebujete odbornou pomoc, existují specializované týmy, které vám mohou pomoci s definicí, návrhem a implementací, zodpovězením otázek a přizpůsobením se vašemu rozpočtu.
Material You spojuje přizpůsobení, přístupnost a technickou konzistenci v jednom balíčku: z jediného barevného semínka Android generuje 65 atributů připravených pro role Material, které se přizpůsobují světlu/tmě a různým styly motivů (TONÁLNÍ_BODOVÝ, ŽIVÝ, EXPRESSIVNÍ, STŘÍKANÝ) a stará se o detaily, jako je protahování při nadměrném rolování, zvlnění nebo widgety.
S nástrojem Theme Picker, překryvným JSON, APK stuby pro základní barvy, testováním CTS a nástroji jako Theme Builder máte vše, co potřebujete k vytvoření elegantních zážitků, které respektují vaši značku a bezproblémově zapadají do ekosystému. Sdílejte informace a o tomto tématu se dozví více uživatelů..
