adaptiv ajkonTakéAdaptivní ikony, Android adaptive icon, Themed iconPokročilý
Definice
Adaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
Než se na to spolehnete: Rozměry 108 dp plátna, 72 dp viditelné plochy a doporučené bezpečné zóny okolo 66 dp odpovídají dokumentaci Androidu, ale konkrétní číslo bezpečné zóny se v různých verzích materiálů mírně liší; doporučuji ověřit proti aktuální stránce Adaptive icons. Doména developer.android.com nebyla v seznamu povolených hostitelů explicitně uvedena (seznam obsahuje developers.google.com), zdroje je proto potře
Proč ikona přestala být jedním obrázkem
Výrobci telefonů s Androidem si dlouho upravovali vzhled domovské obrazovky po svém: jeden launcher kreslil ikony do kruhu, jiný do čtverce se zaoblenými rohy, další do tvaru zvaného squircle. Aplikace přitom dodávala jednu hotovou bitmapu, takže výsledek byl nesourodý: vedle sebe stály ikony různých tvarů i optických velikostí. Adaptivní ikona tenhle problém řeší tím, že rozhodnutí o tvaru přesouvá ze strany vývojáře na stranu systému.
Z čeho se adaptivní ikona skládá
Adaptivní ikona má dvě povinné vrstvy a od Androidu 13 volitelnou třetí. Vrstva background bývá plná barva nebo jemný přechod, vrstva foreground nese samotný symbol značky. Obě vrstvy mají velikost 108 × 108 dp, ale viditelných je jen prostředních 72 × 72 dp: vnější lem slouží jako rezerva pro ořez maskou a pro pohyb při animacích. Vrstva monochrome je jednobarevná silueta, ze které systém vytvoří takzvanou themed icon obarvenou podle tapety a dynamického barevného schématu.
Bezpečná zóna
Logo umístěné mimo prostředních zhruba 66 dp se u agresivnějších masek ořízne. Praktické pravidlo zní držet klíčový tvar uvnitř kruhu o průměru 66 dp vycentrovaného v plátně a zbytek považovat za výplň, která smí zmizet.
Paralaxa a další efekty
Protože launcher drží vrstvy odděleně, může s nimi hýbat nezávisle. Odtud pochází efekt hloubky při přetažení ikony, zvětšení při otevření aplikace nebo pulzování ve výběru widgetů. Slitá bitmapa nic z toho neumí.
Jak se ikona zapisuje v projektu
Definice žije v XML souboru ve složce res/mipmap-anydpi-v26/. Vrstvy se odkazují na drawable, ideálně vektorové, aby nebylo nutné exportovat pět rastrových velikostí. Manifest pak ukazuje na @mipmap/ic_launcher a starší systémy si samy vezmou klasickou PNG variantu ze stejného jména.
Co adaptivní ikona znamená pro design značky
Návrh musí fungovat současně v kruhu i ve čtverci, takže symetrické a kompaktní značky obstojí lépe než široké logotypy. Text v ikoně je téměř vždy chyba: v kruhové masce se okraje slov ořežou. Monochromatická vrstva navíc nutí ověřit, že značka je čitelná i bez barvy, což je stejná disciplína jako u přístupnosti. Ikona je zároveň první vizuální kontakt v obchodě s aplikacemi, takže její návrh patří do stejné úvahy jako App Store Optimization. Obdobný princip vrstvení používá i iOS s tinted a dark variantami ikon, jen s jinou terminologií a jinými pravidly ořezu.
Příklady z praxe
Definice dvouvrstvé ikony v XML
Projekt v Android Studiu má ikonu popsanou souborem res/mipmap-anydpi-v26/ic_launcher.xml. Pozadí je plná barva z barevných zdrojů, popředí vektorový symbol. Launcher si na výsledek aplikuje vlastní masku, takže na Pixelu vyjde kruh a na jiném telefonu squircle, aniž by se cokoli exportovalo znovu.
<?xml version="1.0" encoding="utf-8"?> <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@color/ic_launcher_background" /> <foreground android:drawable="@drawable/ic_launcher_foreground" /> <monochrome android:drawable="@drawable/ic_launcher_monochrome" /> </adaptive-icon>Oříznuté logo e-shopu
E-shop nahrál do vrstvy foreground celý vodorovný logotyp přes celou šířku plátna 108 dp. Na zařízeních s kruhovou maskou se z názvu obchodu staly dvě useknuté slabiky. Oprava spočívala v tom, že se v ikoně nechal jen znak z logotypu, zmenšený do bezpečné zóny o průměru 66 dp.
Časté omyly
- MýtusStačí nahrát PNG ikonu ve všech velikostech a Android si ji zaoblí sám.
- Ve skutečnostiSystém běžnou bitmapu jen zmenší a vloží do bílého nebo šedého podkladu, což vypadá jako cizí prvek mezi ostatními ikonami. Ořez podle masky a efekty hloubky fungují pouze tehdy, když aplikace dodá oddělené vrstvy adaptivní ikony.
- MýtusAdaptivní ikona má rozměr 108 × 108 dp, takže celé plátno je vidět.
- Ve skutečnostiViditelná je jen vnitřní část zhruba 72 × 72 dp a bezpečné je počítat s kruhem o průměru 66 dp. Vnější lem existuje kvůli ořezu maskou a pohybu vrstev při animaci a na obrazovce se běžně nezobrazí.
- MýtusMonochromatická vrstva je jen volitelná ozdoba, kterou nikdo nevidí.
- Ve skutečnostiMonochromatickou vrstvu používá systémové motivované barvení ikon podle tapety. Bez ní launcher vykreslí zástupné řešení, které vedle správně připravených aplikací působí nedodělaně.
Časté dotazy
- Jak se adaptivní ikona chová na starších verzích Androidu?
- Adaptivní ikona se načítá ze složky mipmap-anydpi-v26, kterou rozumí až Android 8.0 a novější. Starší systémy stejnou složku ignorují a sáhnou po klasické rastrové ikoně se stejným názvem v běžných mipmap složkách. V projektu proto obvykle existují obě varianty vedle sebe: XML definice s vrstvami a sada PNG souborů pro zpětnou kompatibilitu. Nástroj Image Asset Studio v Android Studiu obě sady vygeneruje najednou, takže se na fallback nezapomene.
- Jaký formát mají mít podklady pro vrstvy adaptivní ikony?
- Vrstvy adaptivní ikony mohou být libovolný drawable, tedy i PNG, ale vektorový drawable je praktičtější. Vektor se vykreslí ostře na jakékoli hustotě obrazovky, zabere méně místa v balíčku a nevyžaduje export pěti rastrových velikostí. Pozadí bývá plná barva definovaná jako barevný zdroj, protože fotografie nebo složitý vzor po ořezu maskou působí nečitelně. Pokud návrh vznikl ve vektorovém editoru, cesta přes SVG a import do vektorového drawable bývá nejrychlejší.
- Proč ikona po instalaci vypadá menší než u ostatních aplikací?
- Menší optická velikost obvykle znamená, že symbol byl v popředí nakreslen příliš uvnitř bezpečné zóny. Bezpečná zóna o průměru 66 dp je limit, za který nemá logo přesahovat, ne cíl, na který se má zmenšit. Pomáhá vyplnit ji symbolem téměř celou a porovnat výsledek s ikonami systémových aplikací na domovské obrazovce. Druhou častou příčinou je průhledné pozadí: bez plné podkladové vrstvy launcher doplní vlastní podklad a ikona opticky splyne.
- Musí být adaptivní ikona připravená i pro Google Play?
- Obchod Google Play používá pro výpis aplikace samostatnou ikonu ve formátu PNG o rozměru 512 × 512 pixelů, kterou vývojář nahrává v konzoli zvlášť. Adaptivní ikona z balíčku aplikace se v obchodě nepoužije. Prakticky to znamená připravit dvě podoby stejné značky a hlídat, aby vypadaly stejně: obchodní ikona se totiž zobrazuje se zaoblením, které si vykresluje samotný obchod, takže i tady je nutné držet klíčový tvar dál od okrajů.
Související pojmy
