Vektorová ikona aplikace Android — kompletní průvodce.

Při čtení dokumentace OS Android jsem si všiml, že do SDK pro verzi 26 byly přidány nejen adaptivní ikony, ale také možnost úplně zapomenout na rastrové ikony aplikací pro launcher na nejnovějších verzích Androidu. To znamená, že vůbec nemusíte vytvářet bitmapové ikony pro každé rozlišení obrazovky, ale pro všechna možná rozlišení použijte jeden/dva vektorové soubory! A protože jsou rastrové ikony poměrně objemné, můžete tímto ušetřit spoustu kilobajtů z celkové velikosti aplikace. Má to však určité meze a zde je popíšu a poskytnu úplný popis celého procesu přípravy, včetně videa. Průvodce je k dispozici také v anglickém a ruském jazyce.

Než začneme

Zbavit se bitmap v celé aplikaci je sen mnoha optimalizátorů. Zvláště pokud aplikace není velká a ikony PNG (pokud nejsou provedeny správně) spotřebovávají téměř čtvrtinu celkové velikosti aplikace. Ale má to určitá omezení, pojďme si o nich promluvit, možná ve vašem případě není vektorová ikona řešením. Takže:

• Vektorový formát v Android OS byl zaveden ve verzi 21, vektorové obrázky můžete použít jako ikony aplikací v launcheru pouze ve verzi 26 a vyšší. To znamená, že pokud vaše aplikace musí podporovat i starší verze Androidu, budete pro ně muset stále poskytovat rastrové ikony. Takže tu není žádná velká výhoda.
• Vektorový formát, který používá Android, není tak rozšířený jako např. SVG/EPS/AI — je to XML, a to znamená, že má velmi omezené využití. Tento formát nepodporuje atributy stylů, tj. jakékoliv efekty, prolnutí, dokonce i nejjednodušší stíny, rozostření. Na začátku videa vidíte, co se stane se stíny — prostě zmizí. Pokud máte ve svém týmu šikovného grafika, pak obecně lze toto omezení obejít převodem stínů na jednoduché přechody z plné barvy do průhledna atd. Pokud nemáte vektorový originál vůbec nebo je tam příliš mnoho efektů, pravděpodobně nestojí to za to.

Tady končí hlavní minusy. Pokud vaše aplikace musí běžet pouze na zařízeních, která jsou stále podporována bezpečnostními záplatami (tj. v době psaní tohoto článku je to verze SDK 27+) nebo používá nějaký moderní prvek Android systému/senzoru/zařízení, pak je vektorová ikona skvělou volbou. Ušetřit můžete jak na velikosti aplikace, tak i soubory — ikonkou jsou pouze jeden nebo dva vektorové obrázky a pár souborů s jejich popisem! Zní to dobře? Pak dole najdete recept, jak to všechno připravit.

Příprava souborů

Nebudu zacházet do detailů vytváření obrázků ikon, protože jsou naprosto identické s ostatními adaptivními ikonami. Na internetu jsou doslova tuny všech možných šablon pro adaptivní ikony a návodů pro ně. Můžete je použít všechny, s jediným rozdílem — nakonec používáme soubory SVG místo PNG. To znamená, že to ve výsledku bude jeden/dva soubory, první s pozadím, který by měl mít “bezpečnou oblast” pro parallax efekt a soubor s popředím. V mém příkladu používám variantu, kde pozadí je jen barva, takže budu mít jeden soubor s popisem barvy a jeden soubor s vektorovou grafikou.

Pokud tedy máte své soubory SVG, dalším krokem je získat Android Studio, ale pokud vyvíjíte aplikace pro Android, tento software již znáte. Toto volně dostupné IDE lze stáhnout na této adrese:

https://developer.android.com/studio

Důležité! Vektorové podklady z SVG lze vytvořit pouze s verzí 4.2.2 a vyšší.

Spusťte Studio, otevřete svůj projekt, po načtení zvolte kartu Project (první karta vlevo nahoře). Ve složce s prostředky otevřte kontextové menu pravým kliknutím myši. Vyberte první položku — “New”, pak “Vector Asset”. Otevře se okno Asset Studio a tam poté vyberte typ: místní soubor a cestu pomocí tlačítka složky. Zkontrolujte, jak ikona vypadá, a pokud jste spokojeni, klepněte na tlačítko Next. Zobrazí se cesta a název souboru XML s vektorovou ikonou. Opakujte tento postup pro druhý soubor, pokud používáte vektory v popředí i na pozadí. Hotovson.

Nastavení konfiguračních souborů

Obrázky jsou tedy připraveny, ale váš projekt ještě nezná cestu k nim a ani způsob jejich zobrazení. Budete muset přidat/upravit několik souborů:

• build.gradle — zde je třeba povolit podporu vektorových souborů, stačí přidat tyto dva řádky do konfigurace a závislostí:

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}
dependencies {
    implementation("com.android.support:appcompat-v7:23.2.0")
}

• přidejte složku “mipmap-anydpi-v26” do složky zdrojů, tj. jak můžete vidět z názvu, toto jsou ikonky pro libovolné DPI ve verzích OS nad 26. K dispozici budou dva soubory: ic_launcher_round.xml a ic_launcher.xml, ve kterých je třeba popsat, co použít jako pozadí a co jako popředí. V mém případě je to barva pro pozadí a vektorová grafika pro popředí.
• Nakonec, věci popsané v předchozí části musí být přidány do složky “drawable” a pokud jste použili barvu jako pozadí — popište tuto barvu v colors.xml uvnitř složky “values”.

Obecně zde je seznam změn, které by se měly objevit ve vašem VCS:

Nejméně dva nové řádky ve nastavení a závislostech v:
./app/build.gradle

Nová složka “mipmap-anydpi-v26” se 2 novými soubory v:
./app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
./app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

Nejméně jeden nový soubor XML popředí ve složce “drawable”:
./app/src/main/res/drawable/ic_launcher_foreground.xml

A buď barva jako pozadí:
./app/src/main/res/values/colors.xml
nebo použít soubor s obrázkem:
./app/src/main/res/drawable/ic_launcher_background.xml (v tomto návodu není uvedeno)

Nyní systém ví, jak, kde a co použít jako ikonu aplikace spouštěče. Spusťte čistou instalaci a zkontrolujte výsledky své práce. Jak vidíte, technická část je docela jednoduchá (v porovnání s vytvořením PNG ikon).

V odkazu níže najdete všechny potřebné soubory z příkladu zobrazeného ve videu. Můžete to použít jako podklad pro vaši aplikaci. Díky za přečtení!

https://gist.github.com/tsinis/7580343ef2c973be231b1c9ca4a52bb1