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.
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.
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.
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.
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.
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.
- 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