Mudar o ícone do app

1. Antes de começar

O ícone é uma maneira importante de dar destaque ao app, adicionando um estilo e uma aparência distintos. Ele aparece em vários lugares, incluindo na tela inicial, na tela "Todos os apps" e no app Configurações.

O ícone do app também pode ser chamado de ícone na tela de início. A tela de início refere-se à experiência que você tem quando pressiona o botão home em um dispositivo Android para visualizar e organizar seus apps, adicionar widgets e atalhos, entre outros.

Se você já usou dispositivos Android diferentes, pode ter notado que a experiência da tela de início pode ser diferente dependendo do fabricante do dispositivo. Às vezes, os fabricantes de dispositivos criam uma experiência personalizada na tela de início para representar a marca. Por exemplo, fabricantes distintos podem mostrar ícones de apps com uma forma diferente do ícone circular mostrado acima.

Eles podem mostrar todos os ícones de apps em formato quadrado, arredondado ou quadrado com bordas arredondadas.

Seja qual for a escolha do fabricante, o objetivo é que todos os ícones de apps em um único dispositivo tenham um formato uniforme para oferecer uma experiência consistente aos usuários.

Por isso, a Plataforma Android oferece suporte para ícones adaptativos (no nível 26 da API e mais recentes). Ao implementar um ícone adaptativo, o app pode acomodar uma grande variedade de dispositivos adaptando o ícone na tela de início com base na tela de cada dispositivo.

Este codelab fornece arquivos de origem de imagem para o ícone na tela de início do app Affirmations. Você vai usar uma ferramenta do Android Studio chamada Image Asset Studio para gerar diferentes versões dos ícones na tela de início. Depois, você vai poder aplicar o que aprendeu aos ícones de outros apps.

Pré-requisitos

• Saber navegar pelos arquivos de um projeto básico do Android, inclusive os arquivos de recursos.
• Saber instalar um app Android do Android Studio no emulador ou em um dispositivo físico.

O que você vai aprender

• Como mudar o ícone na tela de início de um app.
• Como usar o Image Asset Studio no Android Studio para gerar recursos de ícones na tela de início.
• O que é um ícone adaptativo e por que ele tem duas camadas.

O que você vai criar

• Um ícone na tela de início personalizado para o app Affirmations.

O que é necessário

• Um computador com a versão estável mais recente do Android Studio.
• Uma conexão de Internet para fazer o download dos arquivos de recursos de imagem.
• Acesso ao GitHub

Faça o download do código inicial

No Android Studio, abra a pasta basic-android-kotlin-compose-training-affirmations.

1. Navegue até a página do repositório do GitHub fornecida para o projeto.
2. Verifique se o nome da ramificação corresponde ao especificado no codelab. Por exemplo, na captura de tela a seguir, o nome da ramificação é main.

3. Na página do GitHub do projeto, clique no botão Code, que vai mostrar uma janela pop-up.

4. Na janela pop-up, clique no botão Download ZIP para salvar o projeto no seu computador. Aguarde a conclusão do download.
5. Localize o arquivo no computador. Geralmente ele é salvo na pasta Downloads.
6. Clique duas vezes para descompactar o arquivo ZIP. Isso cria uma nova pasta com os arquivos do projeto.

Abrir o projeto no Android Studio

1. Inicie o Android Studio.
2. Na janela Welcome to Android Studio, clique em Open.

Observação: caso o Android Studio já esteja aberto, selecione a opção File > Open.

3. No navegador de arquivos, vá até a pasta descompactada do projeto, que provavelmente está na pasta Downloads.
4. Clique duas vezes nessa pasta do projeto.
5. Aguarde o Android Studio abrir o projeto.
6. Clique no botão Run para criar e executar o app. Confira se ele foi criado da forma esperada.

2. Ícones na tela de início

O objetivo é que o ícone na tela de início pareça claro e elegante, independente do modelo do dispositivo ou da densidade da tela. A densidade da tela se refere a quantos pixels por polegada ou pontos por polegada (dpi) a tela tem. Em um dispositivo de densidade média (mdpi), ela tem 160 pontos por polegada, enquanto em um dispositivo de densidade extra-extra-extra-alta (xxxhdpi) ela tem 640 pontos por polegada.

Para levar em consideração dispositivos com várias densidades de tela, é necessário fornecer versões diferentes do ícone do app.

Conferir arquivos de ícones na tela de início

1. Para conferir a aparência dos ícones na tela de início em um projeto, abra-o no Android Studio.
2. Na janela Project, mude para a visualização Project. Isso mostra a estrutura de arquivos do seu projeto.

3. Navegue até o diretório de recursos (app > src > main > res) e abra algumas das pastas mipmap. Coloque os recursos do ícone na tela de início do app Android nessas pastas mipmap.

As pastas drawable contêm os vetores do ícone na tela de início em arquivos XML. No caso de um ícone drawable, um vetor é uma série de instruções que desenha uma imagem quando compilado. mdpi, hdpi, xhdpi etc. são qualificadores de densidade que podem ser anexados ao nome de um diretório de recursos, como mipmap,, para indicar que esses são recursos para dispositivos com determinada densidade da tela. Confira abaixo uma lista de qualificadores de densidade no Android:

• mdpi: recursos para telas de média densidade (aproximadamente 160 dpi)
• hdpi: recursos para telas de alta densidade (aproximadamente 240 dpi)
• xhdpi: recursos para telas de densidade extra-alta (aproximadamente 320 dpi)
• xxhdpi: recursos para telas de densidade extra-extra-alta (aproximadamente 480 dpi)
• xxxhdpi: recursos para telas de densidade extra-extra-extra-alta (aproximadamente 640 dpi)
• nodpi: recursos que não podem ser dimensionados, independente da densidade de pixels da tela
• anydpi: recursos que são dimensionados para qualquer densidade

4. Uma prévia aparece se você clicar nos arquivos de imagem. Os arquivos ic_launcher.webp contêm a versão quadrada do ícone e os arquivos ic_launcher_round.webp contêm a versão circular. Ambos são fornecidos nos respectivos diretório de mipmap.

Por exemplo, res > mipmap-xxxhdpi > ic_launcher_round.webp. Observe que o tamanho do recurso fica no canto direito de cima. O tamanho desta imagem é de 192 px x 192 px.

A imagem res > mipmap-mdpi > ic_launcher_round.webp tem a aparência abaixo. O tamanho é de apenas 48 px x 48 px.

Como você pode notar, esses arquivos de imagem de bitmap são compostos por uma grade fixa de pixels. Eles foram criados para determinada resolução de tela. Dessa forma, a qualidade pode diminuir quando são redimensionados.

Agora que você aprendeu sobre ícones na tela de início, vai aprender sobre os ícones adaptativos.

3. Ícones adaptativos

Camadas de primeiro e segundo plano

O Android 8.0 (nível 26 da API) e versões mais recentes oferece suporte a ícones adaptativos, o que permite mais flexibilidade e efeitos visuais interessantes. Para os desenvolvedores, isso significa que o ícone do app é composto de duas camadas: uma em primeiro plano e outra de segundo.

No exemplo acima, o ícone branco do Android está na camada de primeiro plano, enquanto a grade azul e branca está na camada de segundo plano. A camada de primeiro plano é colocada sobre a camada de segundo plano. Uma máscara, que é circular nesse caso, é aplicada sobre as camadas para produzir um ícone circular do app.

Explorar arquivos de ícones adaptativos

Confira os arquivos padrão de ícones adaptativos já fornecidos no código do app Affirmations.

1. Na janela Project do Android Studio, localize e abra o diretório de recursos res > mipmap-anydpi-v26.

2. Abra o arquivo ic_launcher.xml. Você vai encontrar isto:

<?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_foreground"/>
</adaptive-icon>

3. Observe como o elemento <adaptive-icon> é usado para declarar as camadas <background> e <foreground> do ícone do app fornecendo drawables de recurso para cada um.
4. Volte para a visualização Project e localize os drawables em primeiro e segundo plano: res > drawable > ic_launcher_background.xml e res > drawable > ic_launcher_foreground.xml.
5. Alterne para a visualização Design para conferir cada um deles:

Contexto:

Primeiro plano:

6. Ambos os arquivos são drawables vetoriais. Eles não têm um tamanho fixo em pixels. Se você alternar para a visualização de Code, poderá ver a declaração XML para o drawable vetorial usando o elemento <vector>.

ic_launcher_foreground.xml

<!--
    Copyright (C) 2023 The Android Open Source Project

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:endX="85.84757"
          android:endY="92.4963"
          android:startX="42.9492"
          android:startY="49.59793"
          android:type="linear">
        <item
            android:color="#44000000"
            android:offset="0.0" />
        <item
            android:color="#00000000"
            android:offset="1.0" />
      </gradient>
    </aapt:attr>
  </path>
  <path
      android:fillColor="#FFFFFF"
      android:fillType="nonZero"
      android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
      android:strokeWidth="1"
      android:strokeColor="#00000000" />
</vector>

Embora um drawable vetorial e uma imagem de bitmap descrevam um gráfico, há diferenças importantes entre eles.

Uma imagem de bitmap não tem muitas informações sobre a imagem que ela contém, exceto pelas informações de cor em cada pixel. Por outro lado, um gráfico vetorial sabe como desenhar as formas que definem uma imagem. Essas instruções são compostas por um conjunto de pontos, linhas e curvas, junto com as informações de cor. A vantagem é que um gráfico vetorial pode ser dimensionado para qualquer tamanho e densidade de tela sem perder a qualidade.

Drawables vetoriais são a implementação de gráficos vetoriais do Android e foram projetados para serem flexíveis o suficiente em dispositivos móveis. É possível definir drawables vetoriais no arquivo XML com estes elementos possíveis. Em vez de fornecer versões de um recurso de bitmap para todos os buckets de densidade, você só precisa definir a imagem uma vez. Dessa forma, você reduz o tamanho do app e facilita a manutenção.

Agora, vamos mudar o ícone do app.

4. Fazer o download de novos recursos

Faça o download dos dois novos recursos abaixo, que permitem a criação de um ícone adaptativo para o app Affirmations. Você não precisa se preocupar em entender cada detalhe dos arquivos de drawables vetoriais. O conteúdo é gerado automaticamente para você com base nas ferramentas de design.

1. Faça o download do ic_launcher_background.xml (link em inglês), que é o drawable vetorial da camada de segundo plano. Se o navegador mostrar o arquivo em vez de fazer o download, selecione Arquivo > Salvar página como… para salvar no computador.
2. Faça o download do ic_launcher_foreground.xml (link em inglês), que é o drawable vetorial da camada de primeiro plano.

Há alguns requisitos para usar esses recursos das camada de primeiro e segundo plano. Por exemplo, os dois precisam ter 108 dpi x 108 dpi. Para mais detalhes, consulte os documentos do AdaptiveIconDrawable e as orientações de design sobre ícones do Android (em inglês) no site do Material Design.

Como as bordas do ícone podem ser cortadas, dependendo da forma da máscara do fabricante do dispositivo, é importante colocar as principais informações sobre o ícone em uma "zona segura" (link em inglês). A zona segura é um círculo com 66 dpi de diâmetro no centro da camada de primeiro plano. O conteúdo fora da zona segura não pode ser essencial, como a cor do plano de fundo, e pode ser cortado.

5. Mudar o ícone do app

Volte ao Android Studio para usar os novos recursos que você acabou de transferir por download.

1. Primeiro, exclua os recursos drawable antigos que contêm o ícone do Android e o plano de fundo de grade verde. Na visualização Project, clique com o botão direito do mouse no arquivo e escolha Delete.

Exclua:

drawable/ic_launcher_background.xml
drawable/ic_launcher_foreground.xml

Exclua:

mipmap-anydpi-v26/
mipmap-hdpi/
mipmap-mdpi/
mipmap-xhdpi/
mipmap-xxhdpi/
mipmap-xxxhdpi/

Desmarque a caixa Safe delete (with usage search) e clique em OK. O recurso Safe delete (with usage search) pesquisa no código se o recurso que você está prestes a excluir é usado no código. Neste caso, você vai substituir essas pastas por novas com o mesmo nome, então não precisa se preocupar com a opção Safe delete.

2. Crie um novo Image Asset. Clique com o botão direito do mouse no diretório res e escolha New > Image Asset ou clique na guia Resource Manager, clique no ícone + e selecione Image Asset no menu suspenso.

3. A ferramenta Image Asset Studio do Android Studio vai abrir.
4. Use as configurações padrão:

• Icon Type: Launcher Icons (Adaptive and Legacy)
• Name: ic_launcher

5. Com a guia Foreground Layer já selecionada, vá até a subseção Source Asset. No campo Path, clique no ícone de pasta.
6. Vai aparecer uma solicitação para procurar no computador e selecionar um arquivo. Encontre o local do novo arquivo ic_launcher_foreground.xml que você acabou de transferir por download. Ele pode estar na pasta Downloads do computador. Depois de o encontrar, clique em Abrir.
7. O campo Path vai ser atualizado com o local do novo drawable vetorial de primeiro plano. Deixe o campo Layer Name como ic_launcher_foreground e o campo Asset Type como Image.

8. Em seguida, alterne para a guia Background Layer da interface. Deixe os valores padrão.
9. Clique no ícone de pasta no campo Path.
10. Encontre o local do arquivo ic_launcher_background.xml que você acabou de transferir por download. Clique em Abrir.

11. A visualização será atualizada conforme você selecionar os novos arquivos de recursos. As novas camadas de primeiro e segundo plano vão aparecer desta forma.

Ao representar o ícone do app em duas camadas, os fabricantes de dispositivos (chamados de fabricantes de equipamento original, ou OEMs, na sigla em inglês) poderão criar formas diferentes, dependendo do dispositivo Android, como mostrado na visualização acima. O OEM fornece uma máscara que é aplicada a todos os ícones de apps no dispositivo.

Quando uma máscara circular é aplicada sobre as duas camadas do ícone do app, o resultado é um ícone circular com uma imagem do Android e um plano de fundo de grade azul (imagem à esquerda acima). Como outra opção, uma máscara quadrada arredondada pode ser aplicada para produzir o ícone do app no canto direito de cima.

Ter uma camada em primeiro e segundo plano proporciona efeitos visuais interessantes porque as duas camadas podem ser redimensionadas e movidas de forma independente. Para conferir alguns exemplos divertidos de como os efeitos visuais podem ficar, consulte a seção "Design Considerations" na postagem Designing Adaptive Icons (em inglês). Como não é possível saber qual é o dispositivo do usuário ou qual máscara o OEM vai aplicar no ícone, é preciso configurar seu ícone adaptativo para que as informações importantes não sejam cortadas.

12. Se um conteúdo importante for cortado ou aparecer muito pequeno, use o controle deslizante Resize na seção Scaling de cada camada para garantir que tudo apareça na zona segura. Para garantir que nada seja cortado, redimensione as imagens de primeiro e segundo plano para 99% arrastando o controle deslizante Resize nas guias Foreground Layer e Background Layer.

13. Clique em Próxima.
14. Esta etapa é Confirm Icon Path. É possível clicar nos arquivos individuais para acessar a visualização.

15. Clique em Finish.
16. Verifique se todos os recursos gerados são exibidos corretamente nas pastas mipmap. Exemplos:

Bom trabalho! Agora você vai fazer mais uma mudança.

Testar o app

1. Teste se o novo ícone do app é exibido. Execute o app no dispositivo (emulador ou dispositivo físico).
2. Pressione o botão home do dispositivo.
3. Deslize para cima para conferir a lista Todos os apps.
4. Procure o app que você acabou de atualizar. Você vai encontrar o novo ícone do app.

Muito bem! O novo ícone do app está ótimo.

Ícones adaptáveis e legados na tela de início

Agora que seu ícone adaptativo funciona bem, você pode se perguntar por que não pode excluir todas as imagens de bitmap do ícone do app. Esses arquivos ainda são necessários para que o ícone do app seja mostrado em alta qualidade em versões mais antigas do Android. Isso é chamado de compatibilidade com versões anteriores.

Para dispositivos com o Android 8.0 ou versões mais recentes (nível 26 da API e mais recentes), é possível usar ícones adaptativos, que são uma combinação de drawables vetoriais em primeiro plano e em segundo plano, com uma máscara OEM aplicada por cima. Estes são os arquivos relevantes para seu projeto:

res/drawable/ic_launcher_background.xml
res/drawable/ic_launcher_foreground.xml
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml

Em dispositivos com uma versão do Android anterior à 8.0 e nível de API acima do exigido pelo app, são usados ícones legados na tela de início, que são as imagens de bitmap nas pastas mipmap de buckets de densidade diferentes. Estes são os arquivos relevantes para seu projeto:

res/mipmap-mdpi/ic_launcher.webp
res/mipmap-mdpi/ic_launcher_round.webp
res/mipmap-hdpi/ic_launcher.webp
res/mipmap-hdpi/ic_launcher_round.webp
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.webp
res/mipmap-xxhdpi/ic_launcher.webp
res/mipmap-xxhdpi/ic_launcher_round.webp
res/mipmap-xxxhdpi/ic_launcher.webp
res/mipmap-xxxhdpi/ic_launcher_round.webp

Em resumo, o Android vai recorrer às imagens de bitmap em dispositivos mais antigos sem suporte para ícones adaptativos.

Parabéns! Você concluiu todas as etapas para mudar o ícone de um app.

6. Acessar o código da solução

Para baixar o código do codelab concluído, use estes comandos git:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git
$ cd basic-android-kotlin-compose-training-affirmations
$ git checkout main

Se preferir, você pode baixar o repositório como um arquivo ZIP, descompactar e abrir no Android Studio.

file_downloadBaixar ZIP

Se você quiser conferir o código da solução, acesse o GitHub (link em inglês).

1. Navegue até a página do repositório do GitHub fornecida para o projeto.
2. Verifique se o nome da ramificação corresponde ao especificado no codelab. Por exemplo, na captura de tela a seguir, o nome da ramificação é main.

3. Na página do GitHub do projeto, clique no botão Code, que vai mostrar uma janela pop-up.

4. Na janela pop-up, clique no botão Download ZIP para salvar o projeto no seu computador. Aguarde a conclusão do download.
5. Localize o arquivo no computador. Geralmente ele é salvo na pasta Downloads.
6. Clique duas vezes para descompactar o arquivo ZIP. Isso cria uma nova pasta com os arquivos do projeto.

Abrir o projeto no Android Studio

1. Inicie o Android Studio.
2. Na janela Welcome to Android Studio, clique em Open.

Observação: caso o Android Studio já esteja aberto, selecione a opção File > Open.

3. No navegador de arquivos, vá até a pasta descompactada do projeto, que provavelmente está na pasta Downloads.
4. Clique duas vezes nessa pasta do projeto.
5. Aguarde o Android Studio abrir o projeto.
6. Clique no botão Run para criar e executar o app. Confira se ele é criado da forma esperada.

7. Resumo

• Coloque arquivos de ícones do app nos diretórios de recursos mipmap.
• Forneça versões diferentes de uma imagem de bitmap do ícone do app para cada bucket de densidade (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) para oferecer compatibilidade com versões anteriores do Android.
• Adicione qualificadores de recursos aos diretórios de recursos para especificar os recursos que precisam ser usados em dispositivos com determinada configuração, como v24 ou v26.
• Drawables vetoriais são a implementação do Android de gráficos vetoriais. Eles são definidos em XML como um conjunto de pontos, linhas e curvas, junto com as informações de cor associadas. Drawables vetoriais podem ser dimensionados para qualquer densidade sem perda de qualidade.
• Ícones adaptativos foram introduzidos na Plataforma Android no nível 26 da API. Eles são compostos por uma camada de primeiro e segundo plano que seguem requisitos específicos para que o ícone do app tenha alta qualidade em vários dispositivos, com diferentes máscaras do OEM.
• Use o Image Asset Studio no Android Studio para criar ícones legados e adaptativos para o app.

8. Saiba mais

• Diretrizes de design em ícones do Android (link em inglês)
• Ícones adaptativos
• Noções básicas sobre ícones adaptativos do Android (link em inglês)
• Como criar ícones adaptativos (link em inglês)
• Como implementar ícones adaptáveis (link em inglês)
• App Playground Adaptative Icon (link em inglês)
• Criar ícones adaptativos e legados na tela de início
• Compatibilidade com densidades de pixel diferentes
• Colocar ícones de app em diretórios mipmap
• Visão geral de drawables vetoriais
• Classe VectorDrawable