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 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 Dicas para designers e veja sugestões sobre como trabalhar com vários conjuntos de ícones.
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.
Aviso:o estilo dos ícones de guia mudou drasticamente no
Android 2.0 em comparação com as versões anteriores. Para
oferecer suporte a todas as versões do Android, os desenvolvedores precisam:
1. Coloque ícones de guia do Android 2.0 e versões mais recentes nos diretórios
drawable-hdpi-v5, drawable-mdpi-v5 e drawable-ldpi-v5.
2 Colocar ícones de guia para versões anteriores nos
diretórios drawable-hdpi, drawable-mdpi e drawable-ldpi.
3 Defina android:targetSdkVersion como 5 ou mais em
<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 um drawable de lista de estados 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 à mostrada abaixo:
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 precisa referenciar os drawables de ícone selecionados
e não selecionados correspondentes. 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 o Android 2.0 ao Android 2.3 (API de nível 5 a 10).
Tamanho e posicionamento
Os ícones de guia precisam usar formas e formas simples, que precisam ser dimensionadas e posicionadas dentro do recurso final.
A Figura 1 ilustra várias maneiras de posicionar o ícone dentro do recurso. Dimensione os ícones menores que os limites reais do recurso.
Para indicar o tamanho recomendado para o ícone, cada exemplo na 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 de recursos completa para permitir tratamentos especiais para o ícone.
- A caixa laranja é a caixa delimitadora recomendada para o ícone real quando o conteúdo é quadrado. A caixa de ícones quadrados é menor do que a de outros ícones para estabelecer um peso visual consistente entre os dois tipos.
|
|
|
|
|
|
|
Figura 1. Posicionamento e dimensionamento do ícone de guia dentro dos limites do recurso do í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.
|
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.
|
|
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.
|
O que fazer e o que não fazer
Veja abaixo alguns exemplos do que fazer e não fazer ao criar ícones de guia para seu aplicativo.
Exemplos de ícones
Confira abaixo os ícones padrão de guia de alta densidade usados na Plataforma Android.
Aviso:como esses recursos podem mudar entre as versões da plataforma, não faça referência à cópia dos recursos do sistema. Para usar ícones ou outros recursos drawable internos, armazene uma cópia local desses ícones ou drawables nos recursos do aplicativo e faça referência à cópia local no código do aplicativo. Dessa forma, você pode manter o controle sobre a aparência dos seus ícones, mesmo que a cópia do sistema seja alterada. 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 o Android 1.6 (API de nível 4) e versões anteriores.
Estrutura
- Os ícones de guia não selecionados têm o mesmo gradiente de preenchimento e efeitos que os ícones de menu, mas sem brilho externo.
- Os ícones de guia selecionados se parecem com ícones de guia não selecionados, mas com uma sombra interna mais fraca, e têm o mesmo gradiente da parte frontal que os ícones de caixa de diálogo.
- Os ícones de guia têm um SafeFrame de 1 px que só deve ser sobreposto para a borda do anti-alias de uma forma redonda.
- 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.
|
Figura 3. SafeFrame e gradiente de preenchimento para ícones de guia não selecionados. O tamanho do ícone é 32 x 32. |
|
Figura 4. SafeFrame e gradiente de preenchimento para ícones de guia no estado 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 têm a mesma aparência dos ícones de guia selecionados, mas com uma sombra interna mais fraca e o mesmo gradiente da parte frontal que os ícones da caixa de diálogo.
|
Figura 5. Luz, efeitos e sombras para ícones de guia não selecionados.
|
Passo a passo
|
Ícone de guia selecionado
Os ícones de guia selecionados têm o mesmo gradiente de preenchimento e efeitos que o ícone de menu, mas sem brilho externo.
|
Figura 6. Luz, efeitos e sombras para os ícones de guia selecionados.
|
Paleta de cores
|
Passo a passo
|
