Ícones de caixa de diálogo

Os ícones são mostrados em caixas de diálogo pop-up que solicitam a interação do usuário. Eles usam um gradiente de luz e uma sombra interna para se destacarem em um fundo escuro.

Conforme descrito em Como fornecer conjuntos de ícones de densidade específica, crie conjuntos de ícones separados para telas de baixa, média e alta densidade. Isso garante que os ícones sejam exibidos corretamente em todos os dispositivos em que o aplicativo pode ser instalado. Consulte a Tabela 1 para ver uma lista dos tamanhos recomendados de ícones concluídos para cada densidade. Além disso, consulte Dicas para designers para ver sugestões sobre como trabalhar com vários conjuntos de ícones.

Tabela 1. Resumo das dimensões concluídas do ícone da caixa de diálogo para cada uma das três densidades de tela generalizadas.

	ldpi (120 dpi) (Tela de baixa densidade)	mdpi (160 dpi) (Tela de densidade média)	hdpi (240 dpi) (Tela de alta densidade)	xhdpi (320 dpi) (tela de densidade extra-alta)
Tamanho do ícone da caixa de diálogo	24 x 24 px	32 x 32 px	48 x 48 px	64 x 64 px

A arte final precisa ser exportada como um arquivo PNG transparente. Não inclua uma cor de plano de fundo.

Modelos para criar ícones no Adobe Photoshop estão disponíveis no Pacote de modelos de ícones.

Todas as versões do Android

As diretrizes a seguir descrevem como criar ícones de caixa de diálogo para todas as versões da plataforma Android.

Estrutura

• Os ícones de caixas de diálogo têm um SafeFrame de 1 pixel. A forma de base precisa caber no safeframe, mas o anti-alias de uma forma redonda pode se sobrepor a ele.
• Todas as dimensões especificadas nesta página são baseadas em um tamanho de prancheta de 32 x 32 pixels no Adobe Photoshop. Mantenha 1 pixel de preenchimento ao redor da caixa delimitadora dentro do modelo do Photoshop.

Figura 1. SafeFrame e gradiente de preenchimento para os ícones de caixa de diálogo. O tamanho do ícone é 32 x 32.

Luz, efeitos e sombras

Os ícones da caixa de diálogo são planos e têm uma perspectiva frontal. Para se destacarem em um fundo escuro, eles são criados usando um gradiente de luz e uma sombra interna.

Figura 2. Luz, efeitos e sombras para ícones de caixas de diálogo. 1. Parte da frente: sobreposição de gradiente | ângulo 90 ° inferior: r 223 | g 223 | b 223 superior: r 249 | g 249 | b 249 local da cor inferior: 0% local da cor superior: 75% 2. Sombra interna: preto | 25% de opacidade | ângulo de -90 ° | distância 1 px | tamanho 0 px

Passo a passo Crie as formas básicas usando uma ferramenta como o Adobe Illustrator. Importe a forma para uma ferramenta como o Adobe Photoshop e dimensione para caber em uma imagem de 32 x 32 px em um plano de fundo transparente. Adicione os efeitos vistos na Figura 2 para o filtro adequado. Exporte o ícone em 32 x 32 como um arquivo PNG com a transparência ativada.