Um guia prático para ícones de aplicativos Android: ícones adaptativos explicados (e como gerar os seus corretamente)
É uma surpresa comum para desenvolvedores Android iniciantes: você aprimora um único PNG quadrado para o ícone do seu aplicativo, exporta-o em um formato organizado de 512x512 e fica perfeito em seu editor de imagens. Então você instala uma versão de depuração em um telefone Samsung e o ícone de repente parece cortado e ligeiramente descentralizado, como se parte do logotipo tivesse sido cortada. Não há nada de errado com o arquivo em si. O problema é que uma única imagem quadrada nunca sobreviveria ao contato com o mundo real dos inicializadores Android, cada um dos quais corta, mascara e remodela ícones de maneira diferente. Se você ainda não se deparou com isso, é apenas uma questão de tempo até que isso aconteça, então vamos ver o que está acontecendo nos bastidores e como acertar na primeira vez.
Por que um único PNG quadrado não é mais suficiente
Nos primeiros anos do Android, os ícones de aplicativos eram exatamente o que pareciam: um único PNG quadrado (ou ocasionalmente de formato livre) que cada iniciador exibia como está. Isso funcionou bem até que os fabricantes começaram a diferenciar visualmente seus telefones, e um dos lugares mais fáceis para fazer isso foi a tela inicial. A Samsung queria quadrados arredondados, alguns OEMs chineses queriam tratamentos de canto diferentes e o Android padrão acabou se estabelecendo em círculos. De repente, o mesmo arquivo de ícone parecia visivelmente diferente e, às vezes, visivelmente pior, dependendo do telefone em que estava.
A resposta do Google, introduzida com o Android 8.0 Oreo, foi o sistema de ícones adaptativos. Em vez de fornecer uma forma fixa, os desenvolvedores fornecem arte em camadas que o próprio sistema operacional mascara na forma que um determinado iniciador preferir. A identidade visual permanece consistente; apenas a silhueta externa muda.
O que exatamente é um ícone adaptativo?
Um ícone adaptável é construído a partir de duas camadas separadas, cada uma ocupando uma tela de 108 x 108 dp: uma camada de fundo e uma camada de primeiro plano. O Android combina os dois e aplica qualquer formato de máscara que o inicializador atual usa, seja um círculo, um quadrado arredondado, uma lágrima ou algo totalmente diferente. A estrutura de duas camadas é o que permite ao Android adicionar também efeitos sutis de paralaxe e movimento, já que as camadas podem mudar independentemente quando você toca ou arrasta um ícone.
Nos recursos de um aplicativo, isso geralmente é definido por meio de um arquivo XML como mipmap-anydpi-v26/ic_launcher.xml, que simplesmente aponta para os drawables de fundo e de primeiro plano, em vez de conter os próprios dados de pixel. Um ic_launcher.png plano tradicional ainda é mantido como um substituto para dispositivos que executam Android 7.1 ou anterior, que são totalmente anteriores ao sistema de ícones adaptáveis.
Por que a zona segura é importante
Aqui está a parte que mais confunde as pessoas. Embora a tela de cada camada tenha 108 dp por 108 dp, apenas o círculo interno de 66 dp por 66 dp, centralizado nessa tela, tem garantia de visibilidade, independentemente do formato da máscara aplicada. Esta região interna é comumente chamada de zona segura. Qualquer coisa fora dela pode ser mostrada em uma máscara circular e, em seguida, cortada abruptamente em uma máscara de esquilo ou lágrima mais agressiva, ou vice-versa.
Este é exatamente o tipo de problema que aparece quando um logotipo é desenhado próximo às bordas da tela para maximizar seu tamanho visual: ele pode parecer perfeito em uma máscara circular, mas ficar cortado de forma desigual na máscara de esquilo da Samsung. A correção não é um redesenho, apenas encolhendo ligeiramente a arte para que o conteúdo significativo permaneça dentro da zona segura, não importa qual forma seja aplicada.
Formas de lançador que você encontrará
| Forma | Onde você verá |
|---|---|
| Círculo | Stock Android, Pixel launcher (o padrão de longa data) |
| Esquilo (quadrado arredondado) | Samsung One UI e vários outros skins Android |
| Quadrado arredondado (superelipse) | iOS, aplicado automaticamente pelo sistema sem controle do desenvolvedor |
| Lágrima | Oferecido como opção selecionável em algumas versões de software Samsung |
| Quadrado com cantos suaves | Vários outros skins de lançador de fabricantes |
A conclusão prática é que você não pode escolher qual dessas formas seu ícone vai usar. Os usuários de inicializadores Android padrão muitas vezes podem até escolher seu formato preferido em um menu de configurações. Sua única alavanca real é garantir que a obra de arte sobreviva a todos eles graciosamente, que é exatamente o que a zona segura existe para garantir.
Construindo os ativos: tamanhos e densidades que você precisa
| Balde de densidade | Tamanho do ícone do iniciador |
|---|---|
| mdpi | 48 x 48 pixels |
| hdpi | 72 x 72 pixels |
| xhdpi | 96 x 96 pixels |
| xxhdpi | 144 x 144 pixels |
| xxxhdpi | 192 x 192 pixels |
| Ícone de listagem da Play Store | 512 x 512 pixels |
Se você também estiver enviando o aplicativo para iOS, adicione outro conjunto completo, já que os requisitos de ícone da App Store da Apple chegam a 1024x1024 e usam um formato completamente diferente, sem camadas e sem nenhuma transparência.
A maneira manual vs. usando um gerador
Você pode produzir absolutamente cada um desses tamanhos manualmente em um editor de imagens ou por meio do Image Asset Studio integrado do Android Studio, que lida razoavelmente bem com o dimensionamento de densidade e as visualizações de máscara para um único projeto. Isso se torna entediante quando você mantém um sistema de design em vários aplicativos, precisa de exportações iOS correspondentes da mesma arte mestre ou simplesmente deseja uma maneira rápida de verificar como um design se comporta em todas as formas antes de aplicá-lo.
Gere todos os tamanhos a partir de uma imagem mestre
Nosso Gerador de ícones de aplicativos pega uma única imagem de origem de alta resolução e produz o conjunto completo de intervalos de densidade do Android, a estrutura adaptável de primeiro plano/plano de fundo do ícone e o tamanho da listagem da Play Store, tudo a partir de um upload, para que você não exporte e renomeie manualmente uma dúzia de arquivos manualmente.
Extraindo ícones de um APK existente
Às vezes a necessidade vai na direção oposta. Talvez você tenha herdado um projeto sem seus arquivos de design originais, ou queira ver exatamente como um concorrente estruturou seu ícone antes de criar o seu próprio, ou simplesmente precise extrair um ícone de um APK criado para reutilizá-lo em uma ferramenta relacionada ou ativo de marketing. Como um APK é efetivamente um arquivo estruturado que contém todos os recursos de um aplicativo, os arquivos do ícone do iniciador estão fisicamente presentes nele e podem ser extraídos diretamente, em vez de reconstruídos do zero.
Nosso Extrator de ícones extrai exatamente esses arquivos de qualquer APK que você carrega, fornecendo os ativos de ícone brutos em qualquer resolução que o desenvolvedor original enviou, o que geralmente é a maneira mais rápida de recuperar um arquivo de origem perdido ou estudar como outro aplicativo abordou o mesmo problema de design.
Erros comuns de ícones que são sinalizados na revisão
- Assando em preenchimento extra ou interface cromada. Um efeito de sombra projetada, borda ou canto arredondado adicionado manualmente dentro da imagem entra em conflito com o mascaramento do próprio sistema e muitas vezes parece duplicado ou desalinhado.
- Usando um fundo branco puro sem bordas distintas. Em iniciadores com tema claro, o ícone pode ficar quase invisível no fundo da tela inicial.
- Detalhe excessivamente fino. Texto e linhas complexas que parecem nítidas em 512px frequentemente se transformam em uma mancha ilegível quando reduzidas para 48px, que é como a maioria dos usuários vê no dia a dia.
- Uma incompatibilidade entre o ícone de listagem da Play Store e o ícone de instalação. Revisores e usuários percebem quando esses dois não combinam e isso parece desleixado ou, pior, suspeito.
- Esquecendo totalmente o substituto do legado. Se o seu aplicativo ainda oferece suporte a versões do Android anteriores a 8.0, ignorar o substituto PNG plano pode deixar esses usuários com um ícone quebrado ou de aparência genérica.
Testando seu ícone em várias formas antes de enviar
Antes de finalizar um ícone, vale a pena visualizá-lo pelo menos sob uma máscara circular e uma máscara de esquilo lado a lado, em vez de presumir que ele será traduzido de forma limpa. O Image Asset Studio do Android Studio inclui uma visualização ao vivo em vários formatos de iniciador exatamente por esse motivo, e leva apenas um minuto para detectar um problema que, de outra forma, só surgiria após a publicação, quando um usuário no formato de iniciador "errado" relata que algo parece errado.
Principais conclusões
- Os ícones adaptativos usam duas camadas, fundo e primeiro plano, em uma tela de 108 dp, que o sistema mascara em diferentes formas por inicializador.
- Apenas a zona segura interna de 66 dp é garantidamente visível em todos os formatos de máscara; mantenha obras de arte significativas dentro dele.
- Você ainda precisa de um ícone legado plano para dispositivos com Android 7.1 ou anterior.
- Um gerador pode produzir todas as densidades necessárias e o tamanho da listagem da Play Store a partir de uma imagem mestre, economizando um trabalho de exportação manual significativo.
- Os ícones podem ser extraídos diretamente de um APK existente quando os arquivos de origem são perdidos ou você precisa estudar os ativos de outro aplicativo.
Perguntas Frequentes (FAQ)
Qual é o tamanho real do pixel necessário para um ícone de listagem da Play Store?
512x512 pixels, um PNG de 32 bits com canal alfa. Isso é separado dos tamanhos dos ícones do iniciador incluídos no próprio APK.
A camada de fundo do meu ícone adaptável precisa ter uma cor sólida?
Não necessariamente uma cor plana, mas geralmente deve ser opaca e simples, pois pode ser deslocada, dimensionada ou mascarada de maneiras que você não controla totalmente. Busy or transparent backgrounds tend to look inconsistent across launchers.
Posso reutilizar meu design de ícone adaptável do Android diretamente para iOS?
Não diretamente. O iOS usa uma única imagem quadrada plana com arredondamento de cantos aplicado pelo sistema em vez de camadas separadas, portanto, normalmente você exporta uma versão simplificada e achatada da mesma arte para iOS.
Por que meu ícone parece bom no meu telefone, mas desfocado na listagem da Play Store?
Isso geralmente acontece quando o ícone da listagem foi ampliado a partir de uma pequena imagem de origem. Sempre comece com um arquivo mestre de pelo menos 1024x1024 pixels e exporte cada tamanho necessário abaixo desse tamanho.
O que acontece se eu pular o substituto do ícone herdado para versões mais antigas do Android?
Dispositivos com Android 7.1 ou anterior que não oferecem suporte a ícones adaptáveis podem recorrer a um ícone genérico do sistema ou renderizar seu ícone incorretamente. É seguro pular apenas se a versão mínima do Android suportada pelo seu aplicativo for 8.0 ou superior.
Você não precisa de experiência em teoria de design para nada disso, apenas a consciência de que seu ícone será remodelado de maneiras que você não controla no momento em que ele sai de suas mãos. Projete para a zona segura, mantenha um legado legado, gere todos os tamanhos necessários a partir de um arquivo mestre limpo e seu ícone permanecerá ativo, independentemente do inicializador em que ele estiver.