Los íconos de pestaña son elementos gráficos que se usan para representar pestañas específicas en una interfaz con varias pestañas. Cada ícono de pestaña tiene dos estados: no seleccionado y seleccionado.
Como se describe en Cómo proporcionar conjuntos de íconos específicos de densidad, debes crear conjuntos de íconos separados para pantallas de baja, media y alta densidad. Esto garantiza que tus íconos se muestren correctamente en todos los dispositivos en los que se puede instalar tu aplicación. Consulta las Sugerencias para diseñadores para obtener sugerencias sobre cómo trabajar con varios conjuntos de íconos.
La imagen final debe exportarse como un archivo PNG transparente. No incluyas un color de fondo.
Las plantillas para crear íconos en Adobe Photoshop están disponibles en el Paquete de plantillas de íconos.
Advertencia: El estilo de los íconos de pestaña cambió mucho en Android 2.0 en comparación con las versiones anteriores. A fin de ofrecer compatibilidad con todas las versiones de Android, los desarrolladores deben hacer lo siguiente:
1. Coloca los íconos de pestaña para Android 2.0 y versiones posteriores en los directorios drawable-hdpi-v5, drawable-mdpi-v5 y drawable-ldpi-v5.
2. Coloca los íconos de pestaña de las versiones anteriores en los directorios drawable-hdpi, drawable-mdpi y drawable-ldpi.
3. Establece android:targetSdkVersion en 5 o un valor superior en <uses-sdk> del manifiesto de la aplicación.
Esto informará al sistema que debe renderizar las pestañas con el estilo nuevo.
Cómo proporcionar íconos para dos estados de pestaña
Los íconos de pestaña deben tener dos estados: no seleccionado y seleccionado. Para proporcionar íconos con varios estados, los desarrolladores deben crear un elemento de diseño de lista de estados para cada ícono, que es un archivo en formato XML que enumera qué imagen usar para los diferentes estados de la IU.
Por ejemplo, para un widget de pestaña con pestañas llamadas "Amigos" y "Compañeros de trabajo", puedes usar una estructura de directorio similar a la siguiente:
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/...
...
El contenido de los archivos en formato XML indicados anteriormente debe hacer referencia a los elementos de diseño de íconos seleccionados y no seleccionados correspondientes. Por ejemplo, a continuación, se muestra el 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>
Android 2.0 a Android 2.3
En los siguientes lineamientos, se describe cómo diseñar íconos de pestañas para Android 2.0 a Android 2.3 (niveles de API 5 a 10).
Tamaño y posicionamiento
Los íconos de pestaña deben usar formas simples y se deben ajustar y posicionar dentro del recurso final.
En la Figura 1, se ilustran varias maneras de posicionar el ícono dentro del recurso. El tamaño de los íconos debe ser más pequeño que los límites reales del recurso.
A fin de indicar el tamaño recomendado para el ícono, cada ejemplo de la figura 1 incluye tres rectángulos guía diferentes:
- El recuadro rojo es el cuadro de límite del elemento completo.
- El recuadro azul es el cuadro de límite recomendado para el ícono en sí. El cuadro del ícono es más pequeño que el cuadro del elemento completo para permitir tratamientos de íconos especiales.
- El cuadro naranja es el cuadro de límite recomendado para el ícono real cuando el contenido es cuadrado. El cuadro de los íconos cuadrados es más pequeño que el de otros íconos para establecer un peso visual coherente en los dos tipos.
|
|
|
|
|
|
|
Figura 1: Tamaño y posicionamiento del ícono de pestaña dentro de los límites del elemento de ícono |
Estilo, colores y efectos
Los íconos de pestaña son planos, tienen efecto mate y se muestran de frente.
Los íconos de pestaña deben tener dos estados: no seleccionado y seleccionado.
|
Figura 2: Estilo y efectos para los íconos de pestaña no seleccionados Nota: Todas las dimensiones de píxeles son para media densidad y se deben ajustar adecuadamente para otras densidades.
|
|
Figura 3: Estilo y efectos para los íconos de pestaña seleccionados Nota: Todas las dimensiones de píxeles son para media densidad y se deben ajustar adecuadamente para otras densidades.
|
Sugerencias y precauciones
A continuación, se incluyen algunos ejemplos de lo que se debe y no se debe tener en cuenta cuando crees íconos de pestaña para tu aplicación.
Íconos de ejemplo
A continuación, se muestran los íconos de pestaña estándar de alta densidad que se usan en la plataforma de Android.
Advertencia: Debido a que estos recursos pueden cambiar entre las versiones de la plataforma, no debes hacer referencia a la copia de los recursos del sistema. Si deseas usar íconos u otros recursos de elementos de diseño internos, debes almacenar una copia local de esos íconos o elementos de diseño en los recursos de tu aplicación y, luego, hacer referencia a la copia local del código de la aplicación. De esa manera, puedes mantener el control sobre la apariencia de tus íconos, incluso si cambia la copia del sistema. Ten en cuenta que la siguiente cuadrícula no se completa.
Android 1.6 y versiones anteriores
En los siguientes lineamientos, se describe cómo diseñar íconos de pestaña para Android 1.6 (nivel de API 4) y versiones anteriores.
Estructura
- Los íconos de pestaña no seleccionados tienen el mismo gradiente de relleno y los mismos efectos que los íconos de menú, pero sin resplandor externo.
- Los íconos de pestaña seleccionados tienen el mismo aspecto que los íconos de pestaña no seleccionados, pero con una sombra interior más tenue y tienen el mismo gradiente en la parte frontal que los íconos de diálogo.
- Los íconos de pestaña tienen un SafeFrame de 1 px que solo debe superponerse para el borde del suavizado de una forma redonda.
- Todas las dimensiones especificadas en esta página se basan en un tamaño de mesa de trabajo de 32 x 32 píxeles. Mantén 1 px de relleno alrededor del cuadro de límite dentro de la plantilla de Photoshop.
|
Figura 3: SafeFrame y gradiente de relleno para los íconos de pestaña no seleccionados. El tamaño del ícono es de 32 x 32 |
|
Figura 4: SafeFrame y gradiente de relleno para los íconos de pestaña en el estado seleccionado. El tamaño del ícono es de 32 x 32 |
Ícono de pestaña no seleccionado
Luz, efectos y sombras
Los íconos de pestaña no seleccionados se ven como los íconos de pestaña seleccionados, pero con una sombra interior más tenue y el mismo gradiente en la parte frontal que los íconos de diálogo.
|
Figura 5: Luz, efectos y sombras para los íconos de pestaña no seleccionados
|
Paso a paso
|
Ícono de pestaña seleccionado
Los íconos de pestaña seleccionados tienen el mismo gradiente de relleno y los mismos efectos que el ícono de menú, pero sin resplandor externo.
|
Figura 6: Luz, efectos y sombras para los íconos de pestaña seleccionados
|
Paleta de colores
|
Paso a paso
|
