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.
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.
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.
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.
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.
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.
- Modelo de página da comunidade do Figma
- Noções básicas sobre ícones adaptativos do Android (link em inglês)
- Como criar ícones adaptativos (link em inglês)
- Como implementar ícones adaptáveis (link em inglês)
- Criar ícones de apps no Android Studio
- Especificações de design de ícones do Google Play