Ícones de visualização em lista

Os ícones de visualização em lista se parecem muito com os ícones de caixa de diálogo, mas usam um efeito de sombra interno, em que a fonte de luz está acima do objeto. Eles também são projetados para ser usados apenas em um ListView. Exemplos incluem o aplicativo Configurações.

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 do ícone da visualização em lista concluída 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 visualização em lista	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 projetar ícones de visualização em lista para todas as versões da plataforma Android.

Estrutura

• Um ícone de visualização em lista normalmente tem um SafeFrame de 1 px, mas não há problema em usar a área de SafeFrame para a borda do anti-alias de uma forma redonda.
• Todas as dimensões especificadas são baseadas em um tamanho de prancheta de 32 x 32 pixels no Photoshop. Mantenha 1 pixel de preenchimento ao redor da caixa delimitadora dentro do modelo.

Figura 1. SafeFrame e gradiente de preenchimento para os ícones de visualização em lista. O tamanho do ícone é 32 x 32.

Luz, efeitos e sombras

Os ícones de visualização em lista têm perspectiva frontal com uma sombra interna. Criadas por um gradiente de luz e uma sombra interna, elas se destacam bem em um fundo escuro.

Figura 2. Luz, efeitos e sombras para ícones de visualização em lista. 1. Sombra interna: preto | 57 % de opacidade | ângulo de 120 ° | modo de mistura normal | distância 1 px | tamanho 1 px 2. Fundo: preto | cor padrão do sistema Esses ícones são exibidos apenas em visualizações em lista. Observação: o ícone de visualização em lista fica em uma imagem de 32 x 32 pixels no Photoshop, sem SafeFrame.

Passo a passo 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. 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.