Ícones adaptativos

Cabeçalho de ícones adaptativos

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 acesso rápido 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. Os ícones adaptativos são usados em todos os formatos do Android.

Ao contrário das imagens de bitmap, os ícones adaptativos podem se adaptar a diferentes casos de uso:

  • Formas diferentes:um ícone adaptativo pode ter várias formas em diferentes modelos de dispositivo. Por exemplo, ele pode exibir uma forma circular em um dispositivo OEM e uma forma quadrada com bordas arredondadas em outro dispositivo. Cada OEM de dispositivo precisa fornecer uma máscara, que o sistema usa para renderizar todos os ícones adaptativos com o mesmo formato.

    Um GIF mostrando uma animação repetida do mesmo ícone de exemplo do Android, com formas diferentes dependendo da máscara usada: um círculo e, em seguida, dois tipos diferentes de esquilos.
    Figura 1. Os ícones adaptativos são compatíveis com várias máscaras, que variam de um dispositivo para outro.

  • Efeitos visuais:um ícone adaptativo é compatível com uma variedade de efeitos visuais interessantes, que aparecem quando os usuários colocam ou movem o ícone na tela inicial.

    Um GIF mostrando exemplos de dois ícones de amostra do Android em forma de círculo, animados para mostrar a resposta do usuário. O primeiro ícone mostra o logotipo do Android balançando para a esquerda e para a direita, depois para cima e para baixo dentro do círculo. O segundo ícone se expande e depois se contrai novamente.
    Figura 2. Exemplos de efeitos visuais mostrados por um ícone adaptativo.

  • Temas do usuário:a partir do Android 13 (nível 33 da API), os usuários podem aplicar temas aos ícones adaptativos. Se um usuário ativar os ícones de app temáticos 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 dos ícones do app para apps que têm uma camada monochrome no ícone adaptativo. A partir do Android 16 QPR 2, o Android aplica automaticamente temas aos ícones de apps que não têm um próprio.

    Um exemplo de três dispositivos Android, cada um mostrando um tema de usuário diferente com tonalidades diferentes: o primeiro mostra um plano de fundo com tonalidade escura, o segundo mostra um plano de fundo com tonalidade dourada e o terceiro mostra um plano de fundo cinza-claro com tonalidades azuladas. Em cada exemplo, os ícones herdaram a tonalidade do plano de fundo e se misturam perfeitamente.
    Figura 3. Ícones adaptativos que herdam o plano de fundo e os temas do usuário.

    Nos cenários a seguir, a tela inicial não mostra o ícone do app com tema, mas sim o ícone adaptativo ou padrão:

    • Se o usuário não ativar os ícones do app com tema.
    • Se o app não tiver um ícone monocromático e o dispositivo do usuário executar uma versão do Android anterior ao Android 16 QPR 2.
    • Se a tela de início não oferecer suporte para ícones de apps com tema.

Criar ícones adaptativos

Para garantir a compatibilidade do ícone adaptativo com diferentes formatos, efeitos visuais e temas do usuário, o design precisa atender aos seguintes requisitos:

  • Para a versão colorida do ícone, você precisa oferecer duas camadas: uma para o primeiro plano e a outra para o segundo plano. As camadas podem ser vetores ou bitmaps, mas os vetores são preferíveis.

    Exemplo de uma camada de primeiro plano (à esquerda) e uma camada de segundo plano (à direita). O primeiro plano mostra o ícone de 16 lados de um exemplo de logotipo do Android centralizado em uma zona segura de 66 x 66. A zona segura é centralizada dentro de um contêiner de 108 x 108. O plano de fundo mostra as mesmas dimensões medidas para a zona segura e o contêiner, mas apenas um plano de fundo azul e nenhum logotipo.
    Figura 4. Ícones adaptativos definidos usando camadas de primeiro e segundo plano. A zona segura de 66 x 66 mostrada é a área que nunca é cortada por uma máscara com uma forma definida por um OEM.
    Um exemplo que mostra o ícone da figura anterior sobreposto em uma máscara circular.
    Figura 5. Exemplo de como as camadas de primeiro e segundo plano aparecem juntas com uma máscara circular aplicada.

  • Se você quiser ativar a compatibilidade com os temas dos usuários para ícones do app, disponibilize uma versão monocromática do ícone com uma única camada.

    Um exemplo de camada de ícone monocromático (à esquerda) e prévias de cores (à direita). A camada monocromática mostra o ícone de 16 lados de um logotipo de exemplo do Android centralizado em uma zona segura de 66 x 66. A zona segura é centralizada dentro de um contêiner de 108 x 108. As prévias de cores mostram essa camada quando aplicada a temas de usuário de cores diferentes (laranja, rosa, amarelo e verde).
    Figura 6. Uma camada de ícone monocromático (à esquerda) com exemplos de prévias de cores (à direita).

  • Defina o tamanho de todas as camadas como 108 x 108 dp.

  • Use ícones com bordas nítidas. As camadas não podem ter máscaras ou sombras de fundo ao redor do contorno do ícone.

  • Use um logotipo com pelo menos 48 x 48 dp. Ele não pode exceder 66 x 66 dp, porque os 66 x 66 dp internos do ícone aparecem na janela de visualização mascarada.

Os 18 dp externos em cada um dos quatro lados das camadas são reservados para mascaramento e para criar efeitos visuais, como paralaxe ou pulsação.

Para saber como criar ícones adaptativos usando o Android Studio, consulte o modelo do Figma para ícones de apps Android ou a documentação do Android Studio para criar ícones na tela de início. Leia também a postagem do blog Como criar ícones adaptativos (link em inglês).

Adicionar o ícone adaptativo ao app

Assim como os ícones não adaptativos, os ícones adaptativos são especificados usando o atributo android:icon no manifesto do app.

Um atributo opcional, android:roundIcon, é usado por telas de início que representam apps com ícones circulares e pode ser útil se o ícone do seu app incluir um plano de fundo circular como parte principal do design. Essas telas de início precisam gerar ícones de apps aplicando uma máscara circular a android:roundIcon. Essa garantia permite otimizar a aparência do ícone do app, por exemplo, ampliando um pouco o logotipo e garantindo que, quando cortado, o plano de fundo circular seja totalmente preenchido.

O snippet de código abaixo ilustra esses dois atributos, mas a maioria dos apps especifica apenas android:icon:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Em seguida, salve o ícone adaptativo em res/mipmap-anydpi-v26/ic_launcher.xml. Use o elemento <adaptive-icon> para definir os recursos de primeiro plano, plano de fundo e camada monocromática dos seus ícones. Os elementos internos <foreground>, <background> e <monochrome> são compatíveis com imagens vetoriais e de bitmap.

O exemplo a seguir mostra como definir os elementos <foreground>, <background> e <monochrome> dentro de <adaptive-icon>:

<?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>
...

As camadas de primeiro plano e monocromática estão usando o mesmo drawable. No entanto, é possível criar drawables separados para cada camada, se necessário.

Também é possível definir drawables como elementos incorporando-os aos elementos <foreground>, <background> e <monochrome>. O snippet abaixo mostra um exemplo de como fazer isso com o drawable de primeiro plano.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Se você quiser aplicar a mesma máscara e o mesmo efeito visual aos atalhos que os ícones adaptativos normais, use uma destas técnicas:

  • Para atalhos estáticos, use o elemento <adaptive-icon>.
  • Para atalhos dinâmicos, chame o método createWithAdaptiveBitmap() ao criá-los.

Para mais informações sobre como implementar ícones adaptativos, consulte Como implementar ícones adaptativos. Para mais informações sobre atalhos, consulte Visão geral dos atalhos de apps.

Outros recursos

Consulte os recursos a seguir para mais informações sobre como projetar e implementar ícones adaptativos.

Anterior
Implementar práticas recomendadas para atalhos
Avançar
Bolhas