Ícones de guia

Os ícones de guia são elementos gráficos usados para representar guias individuais em uma interface com vários itens desse tipo. Todo ícone de guia tem dois estados: não selecionado e selecionado.

Conforme descrito em Fornecer Conjuntos de ícones específicos para densidades, crie conjuntos separados de ícones para telas de média e alta densidade. Isso garante que os ícones sejam exibidos corretamente em todos os dispositivos nos quais o aplicativo pode ser instalado. Consulte Dicas para designers para sugestões sobre como trabalhar com vários conjuntos de ícones.

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

Os modelos para a criação de ícones no Adobe Photoshop estão disponíveis na Central Pacote de modelos.

Aviso: O estilo dos ícones de guias mudou drasticamente no O Android 2.0 em comparação com as versões anteriores. Para oferecem suporte para todas as versões do Android, os desenvolvedores precisam:
1: Coloque ícones de guia para Android 2.0 e versões mais recentes no Diretórios drawable-hdpi-v5, drawable-mdpi-v5 e drawable-ldpi-v5.
2: Coloque ícones de guia para versões anteriores no Diretórios drawable-hdpi, drawable-mdpi e drawable-ldpi.
3: Defina android:targetSdkVersion como 5 ou maior nas <uses-sdk> no manifesto do aplicativo. Isso informará ao sistema que é necessário renderizar guias usando o novo estilo de guia.

Como fornecer ícones para dois estados de guia

Os ícones de guia precisam ter dois estados: não selecionado e selecionado. Para fornecer ícones com vários estados, os desenvolvedores precisam criar estado um drawable de lista para cada ícone, que é um arquivo XML que lista qual imagem usar para os diferentes estados da interface.

Por exemplo, para um widget de guia com guias chamadas "Amigos" e "Colegas de trabalho", você pode usar uma estrutura de diretórios semelhante à esta:

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

O conteúdo dos arquivos XML listados acima deve fazer referência ao arquivo drawables de ícone selecionados e não selecionados. Por exemplo, confira abaixo o código para ic_tab_friends.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

Do Android 2.0 ao Android 2.3

As diretrizes a seguir descrevem como projetar ícones de guia para Android 2.0 ao Android 2.3 (API de níveis 5 a 10).

Tamanho e posicionamento

Os ícones de guia devem usar formas e formas simples e devem ser dimensionado e posicionado dentro do recurso final.

A Figura 1 ilustra várias maneiras de posicionar o ícone dentro do ativo. Você deve dimensionar os ícones menores que os limites reais do recurso.

Para indicar o tamanho recomendado para o ícone, cada exemplo em A Figura 1 inclui três retângulos de guia diferentes:

  • A caixa vermelha é a caixa delimitadora do recurso completo.
  • A caixa azul é a caixa delimitadora recomendada para o ícone real. A caixa do ícone é menor do que a caixa do recurso inteiro para permitir tratamentos especiais para ícones.
  • A caixa laranja é a caixa delimitadora recomendada para o ícone real quando o conteúdo é quadrado. A caixa para ícones quadrados é menor do que a de outros ícones para estabelecer um peso visual consistente entre os dois tipos.
  1. Dimensões do ícone de guia para telas de densidade alta (hdpi):
    1. Recurso completo: 48 x 48 px.
    2. Ícone: 42 x 42 px
  1. Dimensões do ícone de guia para telas de densidade média (mdpi):
    1. Recurso completo: 32 x 32 px.
    2. Ícone: 28 x 28 px
  1. Dimensões do ícone de guia para telas de densidade baixa (ldpi):
    1. Recurso completo: 24 x 24 px.
    2. Ícone: 22 x 22 px

Figura 1. O tamanho e o posicionamento do ícone de guia dentro dos limites do recurso de ícone.

Estilo, cores e efeitos

Os ícones de guia são planos, foscos e têm perspectiva frontal.

Os ícones de guia precisam ter dois estados: selecionados e não selecionados.

Uma visualização dos efeitos para ícones de guia não selecionados.

Figura 2. Estilo e efeitos para ícones de guia não selecionados.

Observação: todas as dimensões em pixels são para densidade média e precisam ser dimensionadas adequadamente para outras densidades.

1.Cor de preenchimento:#808080

2.Conteúdo interno:O conteúdo interno será subtraído da forma externa e deve consistir apenas em pixels transparentes.
Uma visualização dos efeitos para ícones de guia selecionados.

Figura 3. Estilo e efeitos para ícones de guia selecionados.

Observação: todas as dimensões em pixels são para densidade média e precisam ser dimensionadas adequadamente para outras densidades.

1.Cor de preenchimento:#FFFFFF

2.Conteúdo interno:O conteúdo interno será subtraído da forma externa e deve consistir apenas em pixels transparentes.

3.Brilho externo:#000000, 25% de opacidade
tamanho 3 px

O que fazer e o que não fazer

O que fazer e o que não fazer exemplos a serem considerados ao criar ícones de guia para seu aplicativo.

Exemplos de ícones

Abaixo estão os ícones padrão de guia de alta densidade usados em na plataforma Android.

Aviso: Como esses recursos podem mudar de uma versão para outra, é possível não podem fazer referência à cópia dos recursos do sistema. Se você quiser usar ícones ou outros recursos drawable internos, você deve armazenar uma cópia local desses ícones ou drawables nos recursos do aplicativo e depois fazer referência à cópia local no código do aplicativo. Dessa forma, você pode mantêm o controle sobre a aparência dos ícones, mesmo se o copiar as alterações. Observe que a grade abaixo não está completa intencionalmente.

Android 1.6 e versões anteriores

As diretrizes a seguir descrevem como projetar ícones de guia para Android 1.6 (nível 4 da API) e anteriores.

Estrutura

  • Ícones de guia não selecionados têm o mesmo gradiente de preenchimento e efeitos que ícones de menu, mas sem brilho externo.
  • Os ícones de guia selecionados parecem ícones de guia não selecionados, mas com um sombra interna e têm o mesmo gradiente da parte frontal ícones de caixa de diálogo.
  • Os ícones de guia têm um SafeFrame de 1 px que só deve ser sobreposto em relação à borda do anti-alias de uma forma arredondada.
  • Todas as dimensões especificadas nesta página são baseadas em um tamanho de imagem de 32 x 32 px. Mantenha um pixel de preenchimento ao redor da caixa delimitadora dentro do modelo do Photoshop.
Uma visão do estrutura de ícone de guia não selecionada.

Figura 3. SafeFrame e gradiente de preenchimento para a guia não selecionada ícones. O tamanho do ícone é 32 x 32.
Uma visão do estrutura de ícone de guia selecionada.

Figura 4. SafeFrame e gradiente de preenchimento para ícones de guia em selecionado. O tamanho do ícone é 32 x 32.

Ícone de guia não selecionado

Luz, efeitos e sombras

Os ícones de guia não selecionados são parecidos com os ícones de guia selecionados, mas com uma uma sombra interna mais fraca e o mesmo gradiente da parte frontal do ícone dos ícones de caixas de diálogo.

Uma visualização de luz, efeitos e sombras para ícones de guia não selecionados.

Figura 5. Luz, efeitos e sombras para não selecionado ícones de guia.

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 | 10% de opacidade | ângulo de 90 ° | distância 2 px | tamanho 2 px
3.Moldura interna:profundidade 1% | direção para baixo | tamanho 0 px | ângulo 90 ° | altitude 10 °
destaque branco 70% de opacidade
sombra preta 25% de opacidade

Passo a passo

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

Ícone de guia selecionado

Os ícones de guia selecionados têm o mesmo gradiente de preenchimento e efeitos que o menu ícone, mas sem brilho externo.

Uma visão do luz, efeitos e sombras para ícones de guia selecionados.

Figura 6. Luz, efeitos e sombras para a guia selecionada ícones.

1.Parte da frente:Use o gradiente de preenchimento da paleta de cores.
2.Sombra interna:preto | 20% de opacidade |
ângulo de 90 ° | distância 2 px |
tamanho 2 px
3.Moldura interna:profundidade 1% | direção para baixo | tamanho 0 px | ângulo 90 ° |
altitude 10 °
destaque branco 70% de opacidade
sombra preta 25% de opacidade

Paleta de cores

Gradiente de preenchimento
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Usado como preenchimento de cor em ícones de guia não selecionados.

Passo a passo

  1. Crie a forma básica usando uma ferramenta como o Adobe Illustrator.
  2. Importe a forma para uma ferramenta como o Adobe Photoshop e dimensione para caber em um tamanho 32 x 32 prancheta px com um plano de fundo transparente.
  3. Adicione os efeitos vistos na Figura 6 para o filtro de estado selecionado.
  4. Exporte o ícone em 32 x 32 como um arquivo PNG com a transparência ativada.