Skip to content

Most visited

Recently visited

navigation

Diseña temas de apps con Theme Editor

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

  • 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 XML de estilos abierto, como styles.xml, haz clic en Open editor cerca de la parte superior derecha de la ventana del archivo.
  • En el menú Tools, haz clic en Android > 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 apps o un botón con relieve, cuando les aplicas el tema actual. En el lado derecho del editor se muestra el nombre del tema actual previsualizado, el módulo en el que se define el tema y la configuración de los recursos del tema, 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 temas existentes y administrar los colores que los componen.

    Creación de nuevos temas

    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 tema principal del cual el tema heredará los recursos iniciales.

    Cambio del 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 ver cómo se verán los cambios, haz clic en Preview.
    5. Para aplicar los cambios, haz clic en Refactor.

    Cambio de recursos de color

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

    1. Haz clic en el cuadrado de color junto al nombre del recurso que desees cambiar. Aparecerá el diálogo Resources, en el que se muestran una lista de colores, a la izquierda, y la configuración e información del color del recurso actualmente seleccionado a la derecha.
    2. Sigue uno de estos pasos para configurar un color para el recurso de tema:
      • Selecciona un color de la paleta material de la lista de colores.
      • Selecciona un color definido en tu proyecto en la lista de colores y, de manera opcional, modifica el valor, la opacidad y el nombre del color, según tus preferencias.
      • Define un nuevo color en tu proyecto; para ello, haz clic en New Resource > New color Value en el menú desplegable de la parte inferior izquierda del diálogo Resources, y especifica el valor, la opacidad y el nombre del color.
    3. Si creaste o modificaste un color de proyecto personalizado, puedes asegurarte de que el color coincida con el de la paleta de material más cercana; para ello, haz clic en CLOSEST MATERIAL COLOR junto a Custom color. Android Studio cambia los valores de color y opacidad del color seleccionado para producir el color de material más parecido, y reemplaza Custom color por el nombre del color de la paleta de material.

    Visualización de listas de estado y colores

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

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

    Configuraciones específicas de los dispositivos

    Puedes elegir configuraciones específicas de los dispositivos para que tu app las admita. Para ello, sigue estos pasos:

    1. Haz clic en el triángulo junto a Device Configuration, cerca de la parte inferior del diálogo Resources. Se abrirá la sección Device Configuration, en la que se mostrarán el conjunto de orígenes, el nombre del archivo XML que contiene el recurso y una lista de directorios específicos de configuración en la que deberá disponerse el archivo.
    2. Si es necesario, cambia el nombre del archivo XML.
    3. 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 en forma predeterminada.

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

  • This site uses cookies to store your preferences for site-specific language and display options.

    Get the latest Android developer news and tips that will help you find success on Google Play.

    * Required Fields

    Hooray!

    Browse this site in ?

    You requested a page in , but your language preference for this site is .

    Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

    This class requires API level or higher

    This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

    For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

    Take a short survey?
    Help us improve the Android developer experience.
    (Sep 2017 survey)