Ícones adaptativos

Um ícone adaptativo, ou AdaptiveIconDrawable, pode ser mostrado de maneira diferente, dependendo dos recursos do dispositivo individual e dos temas do usuário. Os ícones adaptativos são usados principalmente pela tela de início da 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. Ícones adaptativos são usados em todos os formatos Android.

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

  • Formas diferentes:um ícone adaptativo pode mostrar diversas formas em diferentes modelos de dispositivo. Por exemplo, ele pode mostrar uma forma circular em um dispositivo OEM e mostrar um contorno circular (uma forma entre um quadrado e um círculo) em outro dispositivo. Cada OEM de dispositivo precisa fornecer uma máscara, usada pelo sistema para renderizar todos os ícones adaptativos com a mesma forma.

    Um GIF que mostra uma animação repetida do mesmo exemplo de ícone do Android, mostrando formas diferentes, dependendo da máscara usada: um círculo e dois tipos diferentes de esquilos
    Figura 1. Ícones adaptativos oferecem suporte a várias máscaras, que variam de um dispositivo para outro.

  • Efeitos visuais:um ícone adaptativo oferece suporte a uma variedade de efeitos visuais envolventes, que são mostrados quando os usuários colocam ou movem o ícone pela tela inicial.

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

  • Temas do usuário:no Android 13 (nível 33 da API) e versões mais recentes, os usuários podem aplicar um tema aos ícones adaptativos. Se um usuário ativar os ícones temáticos de apps ativando a opção Ícones com tema nas configurações do sistema e a tela de início oferecer suporte a esse recurso, o sistema vai usar a cor do plano de fundo e do tema escolhidos pelo usuário para determinar a cor da tonalidade.

    Uma imagem mostrando exemplos 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 dourado; o terceiro mostra um plano de fundo cinza-claro com matizes azuladas. Em cada exemplo, os ícones herdaram a tonalidade do plano de fundo e se misturaram perfeitamente.
    Figura 3. Ícones adaptativos herdados do plano de fundo e dos temas do usuário.

    Nos cenários abaixo, a tela inicial não mostra o ícone temático do app, mas sim o ícone adaptativo ou padrão:

    • Se o usuário não ativar os ícones com tema do app.
    • Se o app não oferece um ícone monocromático.
    • Se a tela de início não oferecer suporte a ícones temáticos de apps.

Criar ícones adaptativos

Para garantir que o ícone adaptativo ofereça suporte a diferentes formas, efeitos visuais e temas do usuário, o design precisa atender aos seguintes requisitos:

  • Você precisa fornecer duas camadas para a versão de cores do ícone: uma para o primeiro plano e outra para o segundo plano. As camadas podem ser vetores ou bitmaps, mas os vetores são preferidos.

    Imagem mostrando um exemplo de camada de primeiro plano (imagem à esquerda) e camada de plano de fundo (imagem à 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 está 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 66x66 representada é a área que nunca é recortada por uma máscara moldada definida por um OEM.
    Uma imagem mostrando o ícone da imagem 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 oferecer suporte aos temas dos usuários para ícones de apps, forneça uma única camada para a versão monocromática do ícone.

    Uma imagem que mostra um exemplo de camada de ícone monocromática (imagem à esquerda) e visualizações de cores (imagem à direita). A camada monocromática 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 está centralizada dentro de um contêiner de 108 x 108. As visualizações de cores mostram essa camada quando aplicadas a temas de usuários de cores diferentes (laranja, rosa, amarelo e verde).
    Figura 6. Uma camada de ícone monocromática (à esquerda) com exemplos de visualizações de cores (à direita).

  • Dimensione todas as camadas para 108 x 108 dp.

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

  • Use um logotipo de 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 mascarar e criar efeitos visuais, como paralaxe ou pulsação.

Para aprender a criar ícones adaptativos usando o Android Studio, consulte nosso modelo de ícone do app Android do Figma ou a documentação do Android Studio para criar ícones na tela de início. Além disso, confira a postagem do blog Como projetar ícones adaptáveis (em inglês).

Adicionar um ícone adaptativo ao app

Os ícones adaptativos, assim como os não 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 app incluir um plano de fundo circular como parte principal do design. Essas telas de início são necessárias para gerar ícones de apps aplicando uma máscara circular a android:roundIcon. Essa garantia pode permitir que você otimize a aparência do ícone do app, por exemplo, aumentando um pouco o logotipo e garantindo que, quando cortado, o plano de fundo circular seja um sangramento total.

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 camada de primeiro, segundo plano e monocromáticos dos ícones. Os elementos internos <foreground>, <background> e <monochrome> oferecem suporte a imagens vetoriais e 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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Você também pode definir drawables como elementos in-line nos elementos <foreground>, <background> e <monochrome>. O snippet a seguir 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>
...

Para aplicar aos atalhos a mesma máscara e efeito visual 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 ver mais informações sobre como implementar ícones adaptativos, consulte Como implementar ícones adaptáveis. Para saber mais sobre atalhos, consulte Visão geral dos atalhos de apps.

Outros recursos

Consulte os recursos abaixo para mais informações sobre como criar e implementar ícones adaptativos.