Ícones maskable e a zona de segurança
O Android recorta o ícone do seu app para qualquer forma que o launcher use. Um ícone maskable é aquele projetado para sobreviver a esse recorte: fundo de sangria total, arte mantida dentro da zona de segurança.
Por que um ícone normal é cortado
Launchers diferentes do Android usam formas de ícone diferentes. Para mantê-los consistentes, o Android pega seu ícone e o recorta para qualquer forma que o dispositivo use. Um ícone padrão com um logo perto da borda perde os cantos, e um ícone com fundo transparente ganha uma linha de recorte feia.
Um ícone maskable é feito para esse recorte. Ele preenche toda a tela com um fundo para não haver transparência, e mantém tudo o que é importante longe das bordas que podem ser cortadas.
A zona de segurança
A regra é simples: mantenha a arte crítica dentro do círculo interno, aproximadamente os 80 por cento centrais da tela. Em um ícone de 512x512 isso é um círculo centralizado de cerca de 410 pixels de diâmetro. Qualquer coisa fora dele está sujeita ao recorte.
O anel externo é sangria. Deve ser apenas fundo, sem logo, sem texto, sem nenhuma borda que você se importaria em perder. Como você não sabe qual forma um determinado dispositivo vai usar, projete de modo que o ícone fique correto seja ele um círculo, um squircle ou um quadrado arredondado.
Declare-o no manifest
{
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}O campo purpose informa ao Android qual ícone mascarar. Publique um maskable ao lado do seu ícone any padrão para cobrir os dois casos. Você também pode definir "purpose": "any maskable" em um único ícone se ele funcionar bem recortado e sem recorte.
Dúvidas comuns
O que é um ícone maskable?
Um ícone de app projetado para sobreviver ao recorte do Android na forma do launcher. Ele tem um fundo de sangria total e mantém a arte importante dentro de uma zona de segurança central, para que nenhuma forma corte o logo.
Qual o tamanho da zona de segurança maskable?
Mantenha o conteúdo crítico dentro dos 80 por cento internos da tela, um círculo centralizado. Em um ícone de 512x512 esse círculo tem cerca de 410 pixels de largura. Trate tudo fora dele como sangria recortável.
Como marco um ícone como maskable?
Adicione "purpose": "maskable" à entrada do ícone no array icons do seu manifest. Publique-o ao lado de um ícone com purpose any padrão, ou use "any maskable" em um ícone que funcione recortado e sem recorte.
Por que o ícone da minha tela inicial do Android parece cortado?
Seu ícone não é maskable, então o Android recortou um design que não foi feito para isso. Adicione uma versão maskable com fundo de sangria total e arte com espaçamento, e declare-a com purpose maskable.