1. Introdução
Última atualização:08/04/22
A partir do Android 13, os usuários podem tematizar os ícones adaptativos na tela de início. Com esse recurso, os ícones dos apps em telas de início com suporte do Android herdam a tonalidade da cor do plano de fundo escolhido e de outros temas.
Crie com facilidade todos os recursos do sistema necessários para seu app Android, incluindo os novos ícones de cores adaptáveis.
O que você vai aprender
- Entender os diferentes tipos de ícones de apps e dicas para projetá-los.
- Como usar o modelo do Figma para a tela de início do Android.
- Como usar o gerador de recursos do Android Studio.
- Como visualizar o ícone na tela de início com o emulador do Android Studio.
Pré-requisitos
- Conhecimento básico do Figma
- Opcional: arte do ícone do app (primeiro plano, segundo plano e monocromático)
O que é necessário
- Uma conta do Figma
- Um arquivo do Figma no designlab
- Opcional: um computador com o Android Studio instalado
2. Começar
Configuração
Para começar, acesse o arquivo do Figma para ícones de apps Android.
Primeiro, faça login no Figma ou crie uma conta.
Cópia da comunidade do Figma
Navegue até o arquivo de modelo da tela de início do Android ou pesquise "Android Adaptive icons fonts" na comunidade do Figma. Clique em Get a Copy no canto superior direito para copiar o arquivo para seu computador.
Uso do modelo
O modelo de ícone do Android consiste em duas páginas:
- A página de capa aborda brevemente conceitos relevantes e como usar o modelo.
- A página de modelo inclui tudo o que você precisa para criar os recursos necessários,divididos em três frames (cor, forma, Google Play).
Observação:no painel "Camada" à esquerda, a maioria das camadas e grupos está bloqueada. Eles precisam permanecer assim. Você poderá colocar a arte nos grupos de arte desbloqueados.
Antes de começarmos a criar recursos, vamos conferir o que vamos criar...
3. Ícones do sistema Android
Ícones na tela de início
Os ícones na tela de início, ou ícones de apps, são uma parte essencial da experiência de inicialização do app. Eles aparecem na tela inicial como um ponto de entrada no app.
Forma adaptável
Um ícone adaptativo, ou AdaptiveIconDrawable, pode aparecer de maneira diferente dependendo das características do dispositivo e do tema do usuário. Os ícones adaptativos são usados principalmente pelo launcher na tela inicial, mas também podem ser usados em atalhos, no app Configurações, em caixas de diálogo de compartilhamento e na tela de visão geral.
Um ícone adaptativo pode exibir várias formas em diferentes modelos de dispositivos. Por exemplo, ele pode exibir uma forma circular em um dispositivo OEM e uma forma quadrada com cantos arredondados em outro. Cada OEM de dispositivo precisa fornecer uma máscara usada pelo sistema para renderizar todos os ícones adaptativos com a mesma forma.
A capacidade de se adaptar à forma também permite que o sistema aplique vários efeitos de animação com a interação do usuário.
Cor adaptável
Os ícones adaptativos agora podem usar cores dinâmicas para permitir ícones de apps temáticos personalizados.
Se um usuário ativou os ícones de app temáticos (ou seja, ativou a opção "Ícones com tema" nas configurações do sistema) e a tela de início oferece suporte a esse recurso, o sistema usa a cor do plano de fundo e o tema escolhidos pelo usuário para determinar a cor da tonalidade.
Assim como os ícones que se adaptam à forma, os ícones de cores adaptáveis são compostos de um primeiro e um segundo plano. Somente um recurso de ícone monocromático de primeiro plano precisa ser fornecido. O sistema vai cuidar do segundo plano e da cor com o esquema de cores extraído.
Você também pode usar o mesmo ícone monocromático para um ícone de notificação.
Legado
Os ícones legados precisam ser incluídos para oferecer suporte a dispositivos que executam versões mais antigas do Android ou que não oferecem suporte a recursos adaptativos (anteriores à 8.0).
Eles não têm recursos de primeiro e segundo planos e podem ter uma forma livre. Se você estiver usando o modelo fornecido, a arte final da forma adaptativa será exportada nos tamanhos necessários para o ícone legado.
Ícones de notificação
Uma notificação é uma mensagem que o Android exibe fora da IU do app para fornecer ao usuário lembretes, comunicados de outras pessoas ou outras informações oportunas do seu app. O sistema mostra notificações em diferentes locais e formatos, como um ícone na barra de status, uma entrada mais detalhada na gaveta de notificações, um indicador no ícone do app e de forma automática em wearables pareados.
Arte da loja
Você pode usar um recurso gráfico, capturas de tela, uma descrição curta e vídeos para destacar e divulgar seu app no Google Play e em outros canais promocionais do Google.
O ícone do app não substitui o ícone na tela de início, mas precisa ser uma versão de alta resolução e maior fidelidade.
Assim como o ícone na tela de início, a arte pode preencher todo o espaço do recurso ou você pode criar e posicionar elementos gráficos, como logotipos, na grade de linhas-chave.
É necessário fornecer um ícone do app quadrado de 512 x 512 px para publicar a página de detalhes do app. Se você estiver usando o modelo de ícone do app Android, ele será fornecido na exportação usando a arte da forma adaptativa.
4. Práticas recomendadas de design
Os ícones na tela de início iniciam o app para o usuário. Como uma entrada no app, eles precisam ser reconhecíveis e legíveis. Confira algumas práticas recomendadas para garantir essas qualidades no ícone do app.
Mantenha a arte simples. Evite várias camadas, muitos efeitos e texto. Esses detalhes serão perdidos ou difíceis de ver em tamanhos pequenos. 
Evite formas complexas. Isso inclui logotipos. Use um logotipo simplificado, se possível, ou considere a simbologia que os usuários associam ao seu app. Uma forma legível e distinta ajuda a criar unidade para que os usuários reconheçam facilmente seu app em diferentes contextos (cor adaptável e notificação). 
Use uma grade. Aproveite uma grade ou linhas-chave para garantir que a arte do primeiro plano funcione quando cortada, incluindo a arte de ilustração sem margens. 
Considere o contraste. Para ícones legados e de forma adaptável, verifique se o primeiro e o segundo planos do ícone têm contraste legível. Evite usar sombras projetadas pesadas, que podem ser confundidas com a sombra do sistema. 
Mantenha a arte dentro das zonas seguras. Mantenha os recursos de primeiro plano em 72 x 72 pixels (a menos que você esteja usando a ilustração sem margens). Mantenha os planos de fundo em 108 x 108 pixels. Observação: o frame da arte do modelo de ícone é maior que 72 x 72 pixels para permitir que você crie a arte do ícone. Os recursos serão redimensionados para se ajustar às especificações.
Formato vetorial. Tente usar a arte em um formato vetorial (como arquivos SVG, AI, PDF e EPS) em vez de um formato rasterizado (como arquivos PNG, JPG e GIF). Isso garante que sua arte seja compatível com recursos mais recentes e mais fácil de editar. 
5. Ícones de cores adaptáveis e de notificação
Agora é sua vez de criar seus próprios ícones do sistema Android.
- Localize o arquivo do Figma para ícones de apps Android.
- No arquivo, localize o frame Cor adaptável. Procure no painel de camadas à esquerda para encontrar "Cor adaptável" > "Componentes" > "arte" > "Área de arte do ícone" > Arte do ícone temático < adicione seu ícone. Se você tiver um ícone monocromático pronto, copie-o aqui para substituir o ícone de bugdroid de exemplo e pule para a etapa 6.
- Se você não tiver um ícone monocromático, comece com um logotipo ou ícone relacionado ao seu app. Consulte as dicas de design para atualizar o ícone. Primeiro, simplifique e evite formas complexas. Por exemplo, aqui as ilustrações usadas no app são simplificadas com formas de folhas menos complexas. Sombras e detalhes de linha são simulados com espaço em branco.
- Agora, atualize o tamanho usando a grade de linhas-chave. Aqui, definimos o redimensionamento como Escala e garantimos que a arte esteja dentro da zona de segurança de primeiro plano. O modelo é configurado com a arte em 4x e redimensionado automaticamente para exportação. Assim, você pode criar seus ícones em uma escala maior.
- O arquivo está configurado para funcionar com o Material Theme Builder para ajudar a visualizar a cor dinâmica. Conecte o estilo de cor do ícone de primeiro plano a On-surface-variant.
- Agora, ao abrir o Material Theme Builder no painel de plug-ins, você pode embaralhar a cor de origem ou adicionar uma imagem para atualizar as cores usando a cor de origem extraída.
- Como isso vai aparecer em diferentes resoluções ou em uma tela inicial? O modelo é configurado para que a arte colocada nos frames de arte apareça nos vários contextos de visualização.
- O sistema usa o ícone monocromático como notificação e o exibe como tal nas visualizações.
6. Ícones legados e de forma adaptável
Agora, vamos criar os ícones legados e de forma adaptável para garantir um amplo suporte ao ícone.
- No arquivo, localize o frame de forma. Procure no painel de camadas à esquerda para encontrar Plano de fundo do ícone < adicione seu ícone*. Se você tiver um ícone pronto, copie-o aqui para substituir o ícone de bugdroid de exemplo e pule para a etapa 5.* Se você não tiver um ícone, comece com um logotipo ou ícone relacionado ao seu app ou reutilize o ícone monocromático.
- Atualize o ícone de primeiro plano, mantendo as práticas recomendadas de ícones. Aqui, recuperei as cores originais da ilustração, mas mantive os detalhes mínimos.
- Agora, atualize o tamanho usando a grade de linhas-chave. Aqui, definimos o redimensionamento como Escala e garantimos que a arte esteja dentro da zona de segurança de primeiro plano.
- Os ícones de apps de forma adaptável também podem ter um plano de fundo distinto. Isso permite que as camadas do ícone sejam cortadas com segurança e forneçam efeitos de movimento sutis na interação. Você também pode usar e definir um plano de fundo de cor sólida no Android Studio.
- As visualizações são atualizadas para mostrar como o primeiro e o segundo planos aparecem juntos, na tela inicial, em diferentes formas cortadas e como um ícone legado.
A forma usada para cortar pode ser atualizada na visualização da tela inicial selecionando os ícones e mudando a opção de variante de forma. 
7. Exportando
Ótimo! Você atualizou o modelo com os ícones do app. Vamos exportá-los para implementação.
- Verifique se nada está selecionado na tela.
- Acesse o menu do Figma > "Arquivo" > Exportar (Shift + Cmd + E).
- No menu de exportação, confirme a exportação. Isso vai fazer o download dos recursos do modelo.
O que está na exportação?
Os recursos exportados têm todos os arquivos necessários para implementar o ícone do app, conforme mostrado abaixo.
- O Figma exporta o ícone monocromático de primeiro plano para cores adaptáveis como um arquivo SVG, junto com o primeiro e o segundo planos para ícones de forma adaptável.
- O Figma também fornece ícones legados em diferentes diretórios de mipmap organizados por resolução.
Pronto! Seu ícone está pronto para ser enviado ao desenvolvimento.
Como alternativa, se você quiser visualizar seus ícones no Android Studio e converter esses SVGs no formato de recurso final, continue para a próxima etapa.
8. Usar o Image Asset Studio
Começar a usar o Android Studio
- Faça o download e instale o Android Studio.
- Inicie o Android Studio.
O Android Studio mostra opções para iniciar um novo projeto ou selecionar projetos atuais.
- Selecione um novo projeto por enquanto. As telas a seguir vão orientar você na configuração do novo projeto.
- Selecione qualquer modelo nos modelos iniciais, já que vamos analisar apenas os ícones de inicialização.
- Depois, nomeie o novo projeto e selecione Concluir. A criação do novo projeto leva alguns instantes.
Usar o Image Asset Studio
Agora podemos adicionar seus ícones ao projeto usando uma ferramenta útil, o Asset Studio.
- Para acessar essa ferramenta, selecione Menu "Arquivo" > "Novo" > "Recurso de imagem".
- Quando o Image Asset Studio for aberto, adicione a camada de primeiro plano selecionando o ícone de pasta em Caminho. Escolha o arquivo SVG exportado como drawable-anydpi/ic_launcher.svg
- Selecione a guia Camada de segundo plano e escolha a camada de segundo plano que foi exportada. Como alternativa, escolha "Tipo de recurso: cor" para ter um plano de fundo de inicialização de cor sólida.
- Volte para a camada de primeiro plano e verifique se a imagem está dentro da zona de segurança. Redimensione o ícone para o que funciona melhor visualmente.
- Quando terminar, clique em Próxima . Isso vai perguntar onde os ícones precisam estar no projeto (deixe como padrão ou mude para "Principal"). Em seguida, clique em Concluir. Você poderá encontrar os recursos da tela de início em res > drawable. Clicar duas vezes vai abrir uma visualização dos drawables vetoriais finais.
- Copie e cole manualmente o recurso de camada monocromática em res/drawable ou res/drawable-v24 ou importe manualmente a camada monocromática clicando com o botão direito na pasta res e selecionando Novo > Recurso vetorial.
- Em res/mipmap-anydpi-v26/ic_launcher.xml e res/mipmap-anydpi-v26/ic_launcher_round.xml , adicione ou mude o android:monochrome="path/to/monochrome/asset para apontar para o recurso monocromático correto.
9. Visualização e recursos
Visualização no emulador
Fizemos isso para adicioná-los ao projeto do app, permitindo que visualizemos em um dispositivo real ou emulador. Vamos conferir como nossos ícones vão aparecer de verdade.
Você precisa ter uma configuração de emulador por padrão, mas, se não tiver, crie um Dispositivo virtual Android. Clique no botão de reprodução verde. Isso vai criar o projeto e abrir o emulador.
Recursos finais
Ótimo! Você conseguiu conferir como o ícone do app vai aparecer em um dispositivo usando o emulador e os adicionou a um projeto de app. Isso os converteu na forma de produção final. Mas onde eles estão?
Os recursos ficam como recursos com um app Android e podem ser localizados abrindo o painel de recursos (normalmente no lado esquerdo). Acesse o app e encontre a pasta Res. Clique com o botão direito para abrir um menu e selecione Abrir no Finder (no Mac). Isso vai abrir uma janela do Finder. Opcionalmente, você pode economizar tempo de desenvolvimento e controle de qualidade convertendo e testando o restante dos recursos do app usando um processo semelhante. Se você tiver convertido o restante dos recursos do app, essa pasta poderá ser compartilhada com o desenvolvimento.
10. Parabéns
Ótimo trabalho! Você aprendeu sobre os ícones do sistema Android necessários para criar um app Android, projetar seus próprios ícones, conferiu o recurso de modelo de ícone e talvez tenha ido além, acessando o Android Studio para visualizar e converter recursos para produção.
Se tiver dúvidas, fale com a gente a qualquer momento usando o @MaterialDesign no Twitter.
Confira outros tutoriais e conteúdo de design em youtube.com/MaterialDesign.