Ícones adaptativos

Um ícone adaptativo, ou AdaptiveIconDrawable, pode ser mostrado de forma diferente, dependendo das capacidades do dispositivo 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.

Um ícone adaptativo pode se adaptar a diferentes casos de uso:

  • Formas diferentes:um ícone adaptativo pode mostrar uma variedade de formas em diferentes modelos de dispositivo. Por exemplo, ela pode exibir uma forma circular em um dispositivo OEM e mostrar um círculo arredondado (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 mostrando uma animação repetida do mesmo ícone de exemplo do Android,
mostrando formas diferentes, dependendo da máscara usada: um círculo e
dois tipos diferentes de contornos arredondados.
    Figura 1. Os ícones adaptativos oferecem suporte a várias máscaras, que variam de um dispositivo para outro.
  • Efeitos visuais:um ícone adaptativo é compatível com vários efeitos visuais atraentes, que são mostrados quando os usuários colocam ou movem o ícone na tela inicial.

    Um GIF mostrando exemplos de dois ícones de exemplo do Android em formato circular,
animados para mostrar a resposta do usuário. O primeiro mostra o logotipo do Android
balanço para a esquerda e para a direita, depois para cima e para baixo dentro do círculo. O segundo
ícone se expande e, em seguida, se contrai novamente.
    Figura 2. Exemplos de efeitos visuais exibidos por um ícone adaptativo.
  • Temas dos usuários:no Android 13 (nível 33 da API) e versões mais recentes, os usuários podem tema de ícones adaptativos. Se um usuário ativar í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 o 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 e o terceiro mostra um
plano de fundo cinza-claro com tons azulados. Em cada exemplo, os
ícones herdaram a tonalidade do plano de fundo e se misturam 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 tiver um ícone monocromático,
  • Se a tela de início não oferecer suporte a ícones de apps com tema.

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 colorida do ícone: uma para o primeiro plano e outra para o segundo plano.

    Uma imagem com um exemplo de uma camada de primeiro plano (imagem à esquerda) e uma
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 66x66. A zona segura está centralizada dentro de um contêiner de 108 x 108. O plano de fundo mostra as mesmas
dimensões para a zona segura e o contêiner, mas apenas um plano de fundo azul
e sem 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 com forma definida por um OEM.
    Uma imagem que mostra 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 em relação a ícones do app, forneça uma única camada para a versão monocromática do ícone.

    Uma imagem que mostra um exemplo de camada de ícone monocromático (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 66x66. A zona segura está centralizada dentro de um contêiner de 108 x 108. As visualizações de cores mostram
essa exibição da camada quando aplicadas a temas do usuário de cores diferentes (laranja,
rosa, amarelo e verde).
    Figura 6. Uma camada de ícone monocromático (à 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 com pelo menos 48 x 48 dp. Ele não pode exceder 66 x 66 dp, porque os 66 x 66 dp do ícone aparecem dentro da 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 do Figma de ícone do app Android ou a documentação do Android Studio para criar ícones na tela de início. Além disso, confira a postagem do blog Como criar ícones adaptáveis (link em inglês).

Adicionar um ícone adaptativo ao app

Para adicionar um ícone adaptativo ao app, atualize o atributo android:icon no manifesto do app para especificar um recurso drawable. Também é possível definir um recurso drawable de ícone usando o atributo android:roundIcon, mas somente se você precisar de um recurso de ícone diferente para máscaras circulares, por exemplo, se a marca depender de uma forma circular.

O snippet de código abaixo ilustra os 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, em res/mipmap-anydpi-v26/ic_launcher.xml, crie recursos drawable alternativos no app para oferecer compatibilidade com versões anteriores do Android 8.0 (nível 26 da API). Use o elemento <adaptive-icon> para definir os drawables de camada de primeiro, segundo plano e monocromáticos para os ícones. Os elementos internos <foreground>, <background> e <monochrome> oferecem suporte ao atributo android:drawable.

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 colocando-os nos 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>
...

Para aplicar aos atalhos a mesma máscara e efeito visual que os ícones adaptativos normais, use uma das técnicas abaixo:

  • 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 mais informações 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.