Ícones adaptáveis

O Android 8.0 (API nível 26) introduz ícones adaptáveis na tela de início, que exibem uma variedade de formas em diferentes modelos de dispositivos. Por exemplo, é possível que um ícone adaptável na tela de início exiba uma forma circular em um dispositivo OEM e uma forma quadrada com cantos arredondados em outro. Cada OEM de dispositivo fornece uma máscara usada pelo sistema para renderizar todos os ícones adaptáveis com a mesma forma. Os ícones adaptáveis na tela de início também são usados em atalhos, no app Config., nas caixas de diálogo de compartilhamento e na tela de visão geral.

Uma variedade de máscaras aplicadas a um wireframe de ícone adaptável Uma variedade de máscaras aplicadas a um ícone adaptável

Figura 1. Os ícones adaptáveis são compatíveis com máscaras que variam de acordo com o dispositivo.

É possível controlar a aparência do ícone adaptável na tela de início, definindo duas camadas: primeiro e segundo plano. Forneça camadas de ícones como drawables sem máscaras ou sombras de segundo plano no contorno do ícone.

Ilustração isométrica da criação de um ícone adaptável

Figura 2. Os ícones adaptáveis são definidos usando duas camadas e uma máscara.

No Android 7.1 (API nível 25) e versões anteriores, os ícones na tela de início eram dimensionados em 48 x 48 dp. Agora, é preciso dimensionar as camadas do ícone usando as seguintes diretrizes:

  • As duas camadas precisam ter 108 x 108 dp.
  • A área interna de 72 x 72 dp do ícone aparece na janela de visualização mascarada.
  • O sistema reserva os 18 dp externos em cada um dos 4 lados para criar efeitos visuais interessantes, como paralaxe ou pulsação.

Observação: os efeitos visuais animados são gerados por telas de início compatíveis. É possível que os efeitos visuais variem de acordo com a tela de início.

Cuidado: é possível que um OEM de dispositivo especifique uma máscara que inclua um raio pequeno, de 33 dp, ao longo de determinados pontos da forma.

Demonstração de paralaxe aplicada a um ícone adaptável Demonstração da animação de captação aplicada a um ícone adaptável

Figura 3. Os ícones adaptáveis são compatíveis com vários efeitos visuais.

Cuidado: se você não atualizar o ícone na tela de início com as camadas necessárias, ele não ficará consistente com os outros ícones exibidos pela interface do usuário do sistema e não será compatível com efeitos visuais.

Para saber como criar ícones adaptáveis usando o Android Studio, consulte Criar ícones com o Image Asset Studio.

Como criar ícones adaptáveis em XML

Para adicionar um ícone adaptável a um app usando XML, comece atualizando o atributo android:icon no manifesto do app para especificar um recurso drawable. Também é possível definir um recurso drawable do ícone usando o atributo android:roundIcon. No entanto, use o atributo android:roundIcon apenas se precisar de um material de ícone diferente para máscaras circulares, como, por exemplo, se o uso da marca no logotipo depender de uma forma circular. O snippet de código a seguir ilustra esses dois atributos:

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

Em seguida, crie recursos drawable alternativos no app para uso com o Android 8.0 (API nível 26) em res/mipmap-v26/ic_launcher.xml. Depois, use o elemento <adaptive-icon> para definir os drawables da camada de primeiro e segundo plano para seus ícones. Os elementos internos <foreground> e <background> são compatíveis com o atributo android:drawable.

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

Também é possível definir os drawables de primeiro e segundo plano como elementos colocando-os nos elementos <foreground> e <background>.

Se você quiser aplicar aos seus atalhos a mesma máscara e efeito visual dos ícones adaptáveis normais na tela de início, 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 ver mais informações sobre atalhos, consulte Atalhos de apps.

Outros recursos

Para ver mais informações sobre como criar e implementar ícones adaptáveis, leia esta série de artigos (em inglês) do designer e desenvolvedor do Google, Nick Butcher: