Vektorová ikona pro Android

... Petr Blahoš, 5. 7. 2021 Android

Spousta online nástrojů Vám udělá sadu ikon pro Android v různých rozlišeních z rastrového obrázku. A Vy si pak říkáte: Proč ty moje ikony vypadají tak hnusně? V bílém kruhu je miniaturní verze Vaší ikony. Ostatní aplikace ale mají normální ikonu s barvou pozadí, a s obrázkem roztáhlým přes celou plochu ikony. Co je špatně?

Rastrová nebo vektorová

Android od jisté verze podporuje vektorové ikony. Na starších verzích budou ale fungovat jen ty rastrové, takže musíme mít opravdu i rastrové verze pro různá rozlišení, i vektorové, aby vypadaly hezky na těch nových Androidech.

Image Asset Studio

Android Studio má na to nástroj: Image Asset Studio. Pokud Android Studio používáte, máte to jednodušší. Jinak jej prostě musíte spustit, a zařídit si v něm projekt.

Pokud, jako já, děláte na Flutter projektu, ale nepoužíváte Android Studio, tak máte možná taky smůlu. Když otevřu svůj Flutter projekt v Android Studio, tak se k Image Asset Studio nedostanu. Musím si otevřít nějaký projekt na Android appku vytvořený přímo v Android Studio. Pak kliknu na app, a v menu podle obrázku:

Android Studio - Asset Studio

Nenechte se zmást. Opravdu chcete Image Asset. Ne ten Vector Asset pod tím.

Konečně obrázky

Nejprve vybereme popředí. Sice jsem na začátku psal o vektorovém obrázku, ale můžete použít i rastrový.

Vyberte popředí

Taky si nastavte scaling. Pak vybereme pozadí. Můžete zase vybrat obrázek, nebo pokud jste skomní, jako já, tak Vám asi bude stačit barva:

Vyberte pozadí

Dále, na záložce Options můžete vybrat, co všechno chcete (jako třeba, zda chcete i kulaté ikony). Pak dejte pozor na jméno ikony, a můžete uložit.

Souhrn před uložením

Tady si všimněte, že kromě těch souborů mipmap-**/*png s různými rozlišeními (což jsou ty naše staré známé bitmapové obrázky v různém rozlišení) jsou tam ještě mipmap-anydpi-v26, a to je právě ta naše adaptivní ikona, jejíž obsah vidíme na obrázku. Všimněte si pro zajímavost, že ic_lungs_background.xml není v drawables, ale ve values, protože obsahuje jen barvu.

Tak jo. Ikonku máme, všechny její souboru si přesuneme tam, kde je potřebujeme, a víc se v tom asi nemá smysl hrabat.

Odkazy

Dokumentace od Google