aplikacje
opisy
pliki do pobrania

← Powrót

Parametry ikon w aplikacjach Android

Opis ogólny

Od Androida 8.0 (API 26) obowiązuje standard ikon adaptacyjnych (Adaptive Icons). Ich celem jest zapewnienie spójnego wyglądu pulpitu niezależnie od tego, jakiego motywu używa producent telefonu (np. ikony okrągłe w czystym Androidzie, zaokrąglone kwadraty w Samsungu czy tzw. "squircle" w Xiaomi). Same grafiki wektorowe były używane już w starszych Androidach od wersji 5.0 (API 21), słuzyły one wyświetlania obrazów w samej aplikacji, a nie jako ikony. Ikony monochromatyczne (jednokolorowe) to rozszerzenie standardu ikon adaptacyjnych, które pozwala dostosować wygląd pulpitu do palety kolorystycznej systemu (np. technologii Material You / Dynamic Color). Zostały wprowadzone od wersji Android 13 (API level 33).
W przypadku ikon w formacie XML (wektorowych) nie ma ograniczeń co do rozdzielczości, w zasadzie może być dowolna, gdyż są skalowalne i zachowują ostrość niezależnie od skali. Wystarczy podać jeden plik w formacie XML, a system Android sam dopasuje go do rozdzielczości ekranu. Warto jednak pamiętać, że niektóre starsze wersje Androida mogą nie obsługiwać ikon wektorowych, dlatego zaleca się dostarczenie również ikon w formacie PNG dla kompatybilności wstecznej.
Zazwyczaj spotykanym formatem wektorowym jest SVG, który można przekonwertować do formatu XML przy użyciu narzędzi takich jak Android Studio lub online konwerterów. Warto również pamiętać, że ikony wektorowe mogą być bardziej złożone i zawierać więcej szczegółów, co może wpływać na wydajność renderowania w aplikacji, zwłaszcza na starszych urządzeniach.

Marginesy

W przypadku ikon adaptacyjnych, zaleca się pozostawienie marginesu wokół ikony, aby uniknąć przycinania jej przez system. Standardowo zaleca się pozostawienie marginesu wynoszącego 20% szerokości i wysokości ikony. Bezpieczna strefa (Safe Zone): Kluczowy element graficzny (logo/sygnet) musi znajdować się w centralnym okręgu o średnicy 66 dp (lub kwadracie 72 x 72 dp). Wszystko, co wykracza poza ten obszar, może zostać przycięte przez maskę systemową.
W praktyce:

Baner (dla wersji TV)

W przypadku aplikacji przeznaczonych na Android TV (Google TV, ewentualnie FireOS), zaleca się dostarczenie dodatkowego obrazu banera (banner) w formacie PNG o wymiarach 320x180 px. Baner ten jest wyświetlany w interfejsie Android TV i powinien być spójny wizualnie z ikoną aplikacji, ale może zawierać więcej szczegółów lub informacji, które nie mieszczą się w standardowej ikonie. Baner powinien być zoptymalizowany pod kątem wyświetlania na dużych ekranach, z odpowiednim kontrastem i czytelnością tekstu, jeśli jest on używany. Zazwyczaj narożniki są zaokrąglone, a kluczowe elementy graficzne powinny być umieszczone w centralnej części obrazu, aby uniknąć przycinania na różnych urządzeniach i wersjach Android TV.

Ikony werktorowe - warstwy

Ikony wektorowe (XML) mogą składać się z dwóch warstw: tło (background) i pierwszoplanowej (foreground).

Ikony monochromatyczne

Kiedy Użytkownik w ustawieniach telefonu włącza opcję „Ikony z motywem”. W tym momencie system ignoruje kolorowe tło i kolorowe logo z Twojej ikony adaptacyjnej, a sięga po trzecią, opcjonalną warstwę: monochromatyczną (<monochrome>). System sam nakłada na tę warstwę dwa kolory pobrane z tapety użytkownika: kolor tła kafelka oraz kolor sygnetu/logo. Parametry:

Ikony regionalne

W przypadku aplikacji wielojęzycznych, zaleca się dostarczenie ikon w różnych wariantach językowych, aby zapewnić spójność wizualną i czytelność. System Android automatycznie wybiera odpowiednią ikonę w zależności od ustawień językowych urządzenia. W praktyce oznacza to, że dla każdej lokalizacji (np. polski, angielski, niemiecki) można przygotować osobne pliki ikon, które będą zawierały odpowiednie napisy lub symbole charakterystyczne dla danego języka. Warto również pamiętać, że niektóre elementy graficzne mogą być uniwersalne i nie wymagać lokalizacji, co pozwala na zmniejszenie liczby plików ikon w projekcie aplikacji.

Ikony ic_launcher_round (zaokrąglone narożniki)

Ikony - nieaktualne praktyki

W historii rozwoju Androida nagromadziło się wiele rozwiązań graficznych, które dziś stanowią jedynie zaszłość historyczną i archaizm technologiczny. Przede wszystkim całkowicie porzucono ręczne przygotowywanie zestawów rastrowych plików PNG dla niskozagęszczonych ekranów, takich jak LDPI, MDPI czy eksperymentalne TVDPI, które projektowano z myślą o dawnych tabletach i pierwszych generacjach przystawek. Nie używa się już także niestandardowych, wymyślanych na własną rękę katalogów w stylu mipmap-television, ponieważ współczesny system operacyjny szuka zasobów według ściśle określonych, oficjalnych kwalifikatorów gęstości oraz flag w manifeście. Do lamusa przeszło również ręczne wycinanie na stałe okrągłych krawędzi w plikach graficznych na potrzeby atrybutu roundIcon, co było jedynie krótkotrwałym rozwiązaniem pomostowym z czasów Androida 7.1. Podobnie archaiczne stało się projektowanie statycznych, jednowarstwowych ikon launcherowych, w których tło i sygnet stanowiły jeden niepodzielny obrazek, co uniemożliwia dzisiejszym systemom stosowanie efektów paralaksy czy automatycznego maskowania. Co ciekawe, w pierwszych wersjach Androida brak elastyczności graficznej zmuszał deweloperów do tworzenia nawet kilkunastu wariantów tej samej ikony pod każdy możliwy ekran, podczas gdy dziś cały ten skomplikowany ekosystem zastępuje się w zasadzie kilkoma uniwersalnymi plikami wektorowymi XML oraz jednym banerem TV.

Lokalizacja ikon

Lokalizację określamy w pliku AndroidManifest.xml w sekcji <application> poprzez atrybut android:icon.

Można wskazać różne pliki ikon dla różnych języków, używając odpowiednich folderów zasobów (np. res/drawable-pl/ dla polskiego, res/drawable-en/ dla angielskiego). System Android automatycznie wybiera odpowiednią ikonę w zależności od ustawień językowych urządzenia.

Plik AndroidManifest.xml znajduje się w:
app/src/main/AndroidManifest.xml.

Powinien zawierać wpis podobny do poniższego:
    
        <!-- Flaga informująca, że aplikacja jest przeznaczona na TV -->
        <uses-feature
            android:name="android.software.leanback"
            android:required="false" />

        <application
            android:icon="@mipmap/ic_launcher"
            android:banner="@drawable/tv_banner"   <!-- Tu wskazujesz swój baner 16:9 -->
            android:label="@string/app_name"

            android:roundIcon="@mipmap/ic_launcher_round">
            <!-- Możesz przekierować do standardowej ikony "ic_launcher" -->

            <activity
                android:name=".MainActivity"
                android:exported="true"
                android:banner="@drawable/tv_banner"> <!-- Bezpiecznie powtórzyć w głównej aktywności -->

                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    
                    <!-- Kategoria launcherowa dla ekranu głównego TV -->
                    <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
                    <!-- Kategoria launcherowa dla telefonów/tabletow -->
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        <application>
Lokalizacje plików graficznych: 
    \app\src\main\res\mipmap-anydpi-v26\ic_launcher_round.xml
    \app\src\main\res\mipmap-anydpi-v26\ic_launcher.xml
    \app\src\main\res\mipmap-hdpi\ic_launcher.png
    \app\src\main\res\mipmap-ldpi\ic_launcher.png
    \app\src\main\res\mipmap-mdpi\ic_launcher.png
    \app\src\main\res\mipmap-xhdpi\ic_launcher_round.png
    \app\src\main\res\mipmap-xhdpi\ic_launcher.png
    \app\src\main\res\mipmap-xxhdpi\ic_launcher_round.png
    \app\src\main\res\mipmap-xxhdpi\ic_launcher.png
    \app\src\main\res\mipmap-xxxhdpi\ic_launcher.png
    \app\src\main\res\drawable\tv_banner.png
Plik:

System sam wybiera odpowiedni plik, ważne aby był wrzucony do zdeklarowanego folderu, jak widać powyżej mipmap lub dla AndroidTV drawable.

Deklaracja w kodzie dla pliku XML (wektorowego) wygląda następująco:
        
            <?xml version="1.0" encoding="utf-8"?>
            <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
                <background android:drawable="@drawable/ic_launcher_background" />
                <foreground android:drawable="@drawable/ic_launcher_foreground" />
                <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
            </adaptive-icon>
Inaczej mówiąc, tak powinien wyglądać kod pliku ic_launcher.xml (analogicznie tworzymy ic_launcher_round.xml). Jak widać powyżej w tym przypadku poszczególne składniki ikony (tło, logo, warstwa monochromatyczna) są zdefiniowane w osobnych plikach graficznych i umieszczone w katalogu drawable.

Podsumowanie:

← Powrót
Do góry