Í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 launcher 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 adaptáveis são usados em todos os formatos do Android.

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

  • Formas diferentes:um ícone adaptativo pode mostrar uma variedade de 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.

    Um GIF mostrando uma animação repetida do mesmo ícone de amostra do Android, mostrando formas diferentes dependendo da máscara usada: um círculo e depois dois tipos diferentes de squircle.
    Figura 1. Os ícones adaptáveis são compatíveis com várias máscaras, que variam de acordo com o dispositivo.

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

    Um GIF mostrando exemplos de dois ícones de amostra do Android em formato de círculo, animados para mostrar a resposta do usuário. O primeiro ícone mostra o logotipo do Android oscilando 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.

  • Tematização pelo usuário:a partir do Android 13 (nível 33 da API), os usuários podem tematizar os í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 de app para apps que têm uma camada monochrome no ícone adaptativo. A partir do Android 16 QPR 2, o Android aplica temas automaticamente aos ícones de apps que não fornecem os próprios.

    Exemplo de três dispositivos Android, cada um mostrando um tema de usuário diferente com tons diferentes: o primeiro mostra um plano de fundo com tons escuros; o segundo mostra um plano de fundo com tons dourados; o terceiro mostra um plano de fundo cinza claro com tons azulados. Em cada exemplo, os ícones herdaram a coloração do papel de parede e se misturam perfeitamente.
    Figura 3. Ícones adaptativos que herdam o plano de fundo e os temas do usuário.

    Em qualquer um dos casos 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 de apps com tema.
    • Se o app não tiver um ícone do app monocromático e o dispositivo dos usuários 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 adaptáveis

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

  • Você precisa oferecer duas camadas para a versão colorida do ícone: uma para o primeiro plano e a outra para o segundo plano. As camadas podem ser vetores ou bitmaps, mas preferimos vetores.

    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 de segurança de 66 x 66. A zona de segurança fica centralizada em um contêiner de 108 x 108. O plano de fundo mostra as mesmas dimensões medidas para a zona de segurança 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 de segurança de 66 x 66 mostrada é a área que nunca é cortada por uma máscara com uma forma definida por um OEM.
    Um exemplo mostrando o ícone da figura anterior sobreposto a uma máscara circular.
    Figura 5. Um exemplo de como as camadas de primeiro plano 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 exemplo de logotipo do Android centralizado em uma zona de segurança de 66 x 66. A zona segura fica centralizada em um contêiner de 108 x 108. As prévias de cores mostram a exibição dessa camada quando aplicada a temas de usuários 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).

  • Dimensionar todas as camadas para 108 x 108 dp.

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

  • Use um logotipo com pelo menos 48 x 48 dp. Não pode exceder 66 x 66 dp, porque a área interna de 66 x 66 dp do ícone aparece 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 sobre como criar ícones na tela de início. Leia também a postagem do blog Como criar ícones adaptáveis.

Adicionar o ícone adaptativo ao app

Os ícones adaptáveis, assim como os não adaptáveis, são especificados usando o atributo android:icon no manifesto do app.

Um atributo opcional, android:roundIcon, é usado por iniciadores que representam apps com ícones circulares e pode ser útil se o ícone do seu app incluir um fundo circular como parte principal do design. Esses launchers precisam gerar ícones de apps aplicando uma máscara circular a android:roundIcon, e 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 de sangria total.

O snippet de código a seguir 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, segundo plano e camada monocromática dos ícones. Os elementos internos <foreground>, <background> e <monochrome> são compatíveis com imagens vetoriais e bitmap.

O exemplo a seguir mostra como definir 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 elementos combináveis separados para cada camada, se necessário.

Também é possível definir drawables como elementos inserindo-os 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>
...

Se você quiser aplicar aos seus atalhos a mesma máscara e efeito visual dos ícones adaptáveis normais, use uma das seguintes 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 adaptáveis, consulte Implementar ícones adaptáveis. Para mais informações sobre atalhos, consulte a Visão geral dos atalhos de apps.

Outros recursos

Consulte os recursos a seguir para mais informações sobre como criar e implementar ícones adaptáveis.

Anterior
Testar a volta preditiva