Cómo diseñar temas de apps con Theme Editor

Advertencia: A partir de la versión 3.3, Theme Editor ya no se incluye con Android Studio.

Android Studio incluye un asistente visual llamado Theme Editor, que te ayudará a hacer lo siguiente:

  • Crear y modificar temas para tu app
  • Realizar ajustes en temas para diferentes clasificadores de recursos
  • Visualizar el efecto de los cambios de color en elementos comunes de la IU

En esta página, se presentan las tareas principales que puedes hacer con Theme Editor y se describe la manera de llevarlas a cabo.

Conceptos básicos de Theme Editor

En esta sección, se describe la manera de acceder a Theme Editor y se muestra su disposición.

Acceso a Theme Editor

Existen dos formas de abrir Theme Editor:

  • Desde un archivo en formato XML de estilos abiertos, como styles.xml, haz clic en Open editor cerca de la parte superior derecha de la ventana del archivo.
  • En el menú Tools, selecciona Theme Editor.

Navegación de Theme Editor

La pantalla principal de Theme Editor se divide en dos secciones. En la parte izquierda del editor, se muestra el aspecto de los elementos específicos de la IU, como la barra de la app o un botón con relieve, cuando les aplicas el tema actual. En el lado derecho, se muestra el nombre del tema actual de la vista previa, el módulo en el que se define el tema y la configuración de sus recursos, como Theme parent y colorPrimary. Puedes cambiar estas configuraciones de recursos para modificar los temas de diseño.

Temas y colores

Theme Editor te permite crear nuevos temas, modificar los existentes y administrar los colores que los componen.

Cómo crear temas nuevos

Para crear un tema, sigue estos pasos:

  1. Abre el menú desplegable Theme cerca de la parte superior derecha de Theme Editor.
  2. Haz clic en Create New Theme.
  3. En el diálogo New Theme, ingresa un nombre del nuevo tema.
  4. En la lista Parent theme name, haz clic en el superior del cual el tema heredará los recursos iniciales.

Cómo cambiar el nombre de los temas

Para renombrar un tema, sigue estos pasos:

  1. Abre el menú desplegable Theme cerca de la parte superior derecha de Theme Editor.
  2. Haz clic en Rename theme-name.
  3. En el diálogo Rename, ingresa un nuevo nombre del tema.
  4. Opcional: Para consultar cómo se verán los cambios, haz clic en Preview.
  5. Para aplicar los cambios, haz clic en Refactor.

Cómo cambiar los recursos de color

Para cambiar un recurso de color existente, como colorPrimary, sigue estos pasos:

  1. En Theme Editor, haz clic en el cuadrado de color junto al nombre del recurso que desees cambiar. Aparecerá el diálogo Resources, en el que se muestra una lista de grupos de colores, a la izquierda, y la configuración e información del color del recurso actualmente seleccionado a la derecha.
  2. A fin de definir un color para el recurso del tema, selecciona un color en el panel izquierdo o define un color nuevo, como se describe a continuación.

Cómo seleccionar un color

Los colores se muestran en una lista, en la columna izquierda del diálogo Resources y se organizan en los siguientes grupos.

  • Project: Estos son los colores dentro de tu proyecto. Algunos se pueden editar porque forman parte de las fuentes de tu proyecto, mientras que para otros esto no es posible porque pertenecen a las bibliotecas que incluiste en él.
  • android: Estos son recursos de color que pertenecen al espacio de nombres de Android. Forman parte del marco de trabajo de Android y no se pueden editar.
  • Theme Attributes: Estos son atributos del tema seleccionado actualmente. Hacen referencia al tema y pueden cambiar según el que hayas seleccionado. Los atributos del tema no se pueden editar desde el diálogo Resources.

Cómo definir un color nuevo

    Figura 1: Editor de color

  1. En el menú desplegable de la parte superior derecha del diálogo Resources, haz clic en Add new resource > New color Value. El diálogo Resources muestra un panel derecho editable con un campo Name en blanco en el que puedes escribir un nombre para el color personalizado.
  2. Crea el color personalizado de la siguiente manera. Los pasos corresponden a las leyendas de la figura 1.
    1. Asígnale un nombre al valor del nuevo color en el campo Name vacío. No se admiten espacios ni caracteres especiales en el nombre, aunque sí puedes usar guiones bajos y números.
    2. Escala de color, campo Custom color y cuentagotas:
      • En la escala de color, haz clic en el que desees. El color se muestra en el campo Custom color.
      • Puedes usar el cuentagotas ubicado a la izquierda del campo Custom color para seleccionar un color. Haz clic en el cuentagotas  y, luego, selecciona cualquier elemento visible en la pantalla de la computadora. El color del campo Custom color cambiará al que hayas seleccionado.
    3. Justo debajo de Custom color, usa los campos editables y el menú desplegable de la izquierda para especificar un color RGB, HSB o ARGB mediante valores numéricos. En el extremo derecho, se muestra el equivalente HEX del color en el campo editable.
    4. Para definir el tono y la opacidad del color, mueve los controles deslizantes debajo de la escala.
    5. Selecciona uno de los cuadrados de color predefinidos disponibles. El color se mostrará en el campo Custom Color y el nombre cambiará al del color que hayas seleccionado.
  3. Haz clic en OK para guardar la configuración. Se cerrará el diálogo Resources y te llevará de regreso a Theme Editor.

Cómo modificar un color

Puedes modificar cualquier color editable. Si un color es editable, podrás editar los campos de color, tono, opacidad, nombre y configuración del dispositivo. Consulta Select Color si quieres saber por qué algunos campos específicos son editables y otros no.

  1. Ajusta la configuración.
  2. Haz clic en OK.

Cómo hacer que coincida el color de material

Si definiste o modificaste un color de proyecto personalizado, puedes asegurarte de que coincida con el color de la paleta de Material más cercano. Para ello, haz clic en la opción CLOSEST MATERIAL COLOR ubicada junto a Custom color. Android Studio cambia los valores y la opacidad del color seleccionado a fin de producir el color de Material más parecido y reemplaza Custom color por el nombre del color de la paleta de Material.

Nota: La función CLOSEST MATERIAL COLOR aparecerá solo cuando que el color no sea uno de Material.

Cómo visualizar listas de estado y colores

Theme Editor te permite obtener una vista previa de los colores asociados con diferentes estados. Para ello, abre el diálogo Resources haciendo clic en el cuadrado de configuración del color junto al nombre de un recurso de la lista de estado editable. En el diálogo Resources, se muestra una lista de estados, como Selected, y el valor de color asociado con estos. Haz clic en el color de un estado para seleccionar un valor diferente.

A fin de controlar los estados de manera más íntegra, puedes ver y editar directamente sus propiedades en el archivo en formato XML que los define. Para obtener más información, consulta la documentación de la clase ColorStateList.

Configuraciones específicas de los dispositivos

Cuando un color es editable, puedes elegir configuraciones específicas de los dispositivos a fin de que las admita tu app. Para ello, sigue estos pasos:

  1. Abre el diálogo Resources. Si deseas obtener más información para abrir el diálogo Resources, consulta Cómo cambiar los recursos de color.
  2. Selecciona un color de Project y, luego, en la parte inferior del panel derecho, haz clic para expandir Device Configuration. De esta manera, podrás ver el nombre y conjunto de orígenes del archivo en formato XML que contiene el recurso y una lista de directorios específicos de la configuración en los que puedes ubicar ese archivo.
  3. Si es necesario, cambia el nombre del archivo XML.
  4. Marca las casillas junto a los directorios correspondientes a las configuraciones específicas de los dispositivos que desees admitir. Las configuraciones para las que no especifiques ningún directorio usarán el directorio values de manera predeterminada.

Para obtener más información sobre la relación entre las configuraciones y los nombres de directorio, consulta Compatibilidad con varias pantallas. Para obtener más información sobre los nombres de directorios admitidos, consulta Cómo proveer recursos.