1. Introdução
Última atualização:08/04/22
Do Android 13 em diante, 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 criar designs para eles.
- Como usar o modelo do Figma para o iniciador 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 PC com o Android Studio instalado
2. Começar
Configuração
Para começar, acesse o arquivo do Figma com o ícone do app Android.
Primeiro, faça login no Figma ou crie uma conta.
Cópia da comunidade do Figma
Navegue até o arquivo Modelo de iniciador do Android ou pesquise "Migrating to Variable fonts" na comunidade do Figma. Clique em Fazer uma cópia 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 capa aborda brevemente os conceitos relevantes e como usar o modelo.
- A página de modelo inclui tudo o que você precisa para criar recursos obrigatórios,divididos em três frames (cor, forma, Play Store).
Observação:no painel "Camadas" à esquerda, a maioria das camadas e grupos está bloqueada. Eles devem permanecer bloqueados. Você poderá colocar artes nos grupos desbloqueados.
Mas antes de criar recursos, vamos ver 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 para o app.
Forma adaptativa
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 na tela de início, 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 mostrar várias formas em diferentes modelos de dispositivos. Por exemplo, ele pode mostrar 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, que o sistema usa para renderizar todos os ícones adaptáveis com a mesma forma.
A capacidade de adaptação ao formato também permite que o sistema aplique vários efeitos de animação com a interação do usuário.
Cor adaptativa
Agora, os ícones adaptáveis 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 for compatível com esse recurso, o sistema vai usar a cor do plano de fundo e o tema escolhidos pelo usuário para determinar a tonalidade.
Assim como os ícones que se adaptam ao formato, os ícones de cor adaptativa são compostos de um primeiro e um segundo plano. Só é necessário fornecer um recurso de ícone monocromático em primeiro plano. O sistema cuida 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
Ícones legados precisam ser incluídos para oferecer suporte a dispositivos com versões mais antigas do Android ou que não são compatíveis com recursos adaptativos (antes do Android 8.0).
Eles não têm recursos de primeiro plano e segundo plano e podem ter uma forma livre. Se você estiver usando o modelo fornecido, a arte final adaptável 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 interface do usuário 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.
Artes da loja
Você pode usar um recurso gráfico, capturas de tela, uma descrição curta e vídeos para destacar e promover seu app no Google Play e em outros canais promocionais do Google.
Ele não substitui o ícone na tela de início do app, 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 de forma adaptável.
4. Práticas recomendadas de design
Os ícones na tela de início abrem 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 na tela de início.
Simplifique a arte. 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 uma simbologia que os usuários associem 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 adaptativa e notificação). 
Use uma grade. Use uma grade ou linhas-chave para garantir que a arte em primeiro plano funcione quando for cortada, incluindo ilustrações sem margens. 
Considere o contraste. Para ícones adaptáveis e legados, verifique se o primeiro e o segundo plano têm contraste legível. Evite usar sombras projetadas pesadas, que podem ser confundidas com a sombra do sistema. 
Mantenha o material gráfico dentro das zonas seguras. Mantenha os recursos em primeiro plano dentro de 72 x 72 px (a menos que você esteja usando sangria total). Mantenha os planos de fundo em 108x108 px. Observação : o frame da arte do modelo de ícone é maior que 72 x 72 px para permitir que você crie a arte do ícone. Os recursos serão redimensionados para atender às especificações.
Formato de vetor. Tente usar artes em formato vetorial (como arquivos SVG, AI, PDF e EPS) em vez de um formato raster (como arquivos PNG, JPG e GIF). Isso garante que a arte seja compatível com recursos mais recentes e mais fácil de editar. 
5. Ícones adaptáveis de cor e notificação
Agora é sua vez de criar seus próprios ícones do sistema Android.
- Localize o arquivo do Figma de ícones de apps Android.
- No arquivo, localize o frame Cor adaptável. Procure no painel de camadas à esquerda "Cor adaptativa" > "Componentes" > "Arte" > "Área de arte do ícone" > Arte do ícone temático < adicione seu ícone. Se você já tiver um ícone monocromático, 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. Siga as dicas de design para atualizar o ícone. Primeiro, simplifique e evite formas complexas. Por exemplo, 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ços em branco.
- Agora, atualize o dimensionamento usando a grade de linhas-chave. Aqui, definimos o redimensionamento como Escalonar e garantimos que a arte esteja dentro da zona de segurança em primeiro plano. O modelo é configurado com a arte em 4x e redimensionado automaticamente para exportação. Assim, você pode criar ícones em uma escala maior.
- O arquivo foi configurado para funcionar com o Material Theme Builder e 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 apareça nos vários contextos de visualização.
- O sistema usa o ícone monocromático como notificação e o mostra assim nas prévias.
6. Ícones adaptáveis e legados
Agora, vamos criar o formato adaptável e os ícones legados para garantir ampla compatibilidade.
- No arquivo, localize o Frame de forma. No painel de camadas à esquerda, encontre Fundo do ícone < adicione seu ícone*. Se você já tiver um ícone pronto, copie-o aqui para substituir o ícone de bugdroid de amostra e pule para a etapa 5.* Se você não tiver um ícone, comece com um logotipo ou ícone relacionado ao app ou reutilize o ícone monocromático.
- Atualize o ícone de primeiro plano, seguindo as práticas recomendadas. Aqui, recuperei as cores originais da ilustração, mas mantive os detalhes mínimos.
- Agora, atualize o dimensionamento usando a grade de linhas-chave. Aqui, definimos o redimensionamento como Scale e garantimos que a arte esteja dentro da zona de segurança de primeiro plano.
- Os ícones de apps com forma adaptativa também podem ter um plano de fundo diferente. Isso permite que as camadas do ícone sejam cortadas com segurança e ofereç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 prévias são atualizadas para mostrar como o primeiro plano e os planos de fundo ficam juntos na tela inicial, em diferentes formas cortadas e como um ícone legado.
A forma usada para cortar pode ser atualizada na prévia da tela inicial. Para isso, selecione os ícones e mude a opção de variante de forma. 
7. Exportando
Ótimo! Agora 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 ação. Isso vai baixar os 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, da seguinte forma:
- O Figma exporta o ícone monocromático em primeiro plano para cores adaptativas como um arquivo SVG, além do primeiro plano e do segundo plano para ícones de forma adaptativa.
- O Figma também oferece ícones legados em diferentes diretórios mipmap organizados por resolução.
Pronto! Seu ícone está pronto para ser enviado ao desenvolvimento.
Como alternativa, se você quiser visualizar os ícones no Android Studio e converter esses SVGs no formato final do recurso, 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 inicial, já que vamos analisar apenas os ícones de inicialização.
- Depois, dê um nome ao 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 abrir, 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 plano de fundo e escolha a camada de plano de fundo exportada. Ou escolha "Tipo de recurso: cor" para ter um plano de fundo de cor sólida no iniciador.
- 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 devem ficar no projeto. Deixe no padrão ou mude para "Principal". Em seguida, clique em Concluir. Você encontra os recursos do acesso rápido em res > drawable. Clique duas vezes para abrir uma prévia dos drawables vetoriais finais.
- Copie e cole manualmente o recurso da camada monocromática em res/drawable ou res/drawable-v24 ou importe manualmente a camada monocromática clicando com o botão direito do mouse na pasta res e selecionando New > Vector Asset.
- 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. Prévia e recursos
Visualizar no emulador
Fizemos isso para adicioná-los ao projeto do app, permitindo que você visualize em um dispositivo real ou emulador. Vamos ver como nossos ícones vão ficar na prática.
Você já deve ter um emulador configurado por padrão, mas, se não tiver, crie um dispositivo virtual Android. Clique no botão verde de reprodução. Isso vai criar o projeto e abrir o emulador.
Recursos finais
Ótimo! Você conseguiu conferir como o ícone na tela de início vai aparecer em um dispositivo usando o emulador e adicionou os ícones a um projeto de app. Isso os converteu na forma de produção final. Mas onde eles estão?
Os recursos ficam em um app Android e podem ser localizados ao abrir o painel de recursos (geralmente no lado esquerdo). Acesse o app e encontre a pasta Res. Clique com o botão direito do mouse para abrir um menu e selecione Abrir no Finder (no Mac). Isso vai abrir uma janela do Finder. Se quiser, economize 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
Muito bem! 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, usando 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.