Skip to content

Most visited

Recently visited

navigation

Compilar una IU con un editor de diseño

En el editor de diseño de Android Studio, puedes compilar diseños rápidamente arrastrando widgets a un editor de diseño visual en lugar de escribir el XML de diseño manualmente. El editor puede revisar tu diseño en diferentes dispositivos y versiones de Android, y puedes cambiar este diseño de modo dinámico para asegurarte de que funcione bien en diferentes tamaños de pantalla. El editor de diseño tiene una capacidad especial cuando se compila un diseño nuevo con ConstraintLayout, un administrador de diseño que se ofrece en una biblioteca de compatibilidad y admite Android 2.3 (nivel de API 9) y versiones posteriores.

En esta página se proporciona información general sobre la interfaz y las funciones del editor de diseño. Para obtener más información sobre cómo crear un diseño con ConstraintLayout, consulta Crear una IU receptiva con ConstraintLayout.

Introducción al editor

El editor de diseño aparece cuando abres un archivo de diseño XML. Según los números de la figura 1, las regiones del editor son las siguientes:

  1. Palette: proporciona una lista de widgets y diseños que puedes arrastrar a tu diseño en el editor.
  2. Component Tree: muestra la jerarquía de vistas para tu diseño. Haz clic en un elemento para verlo seleccionado en el editor.
  3. Barra de herramientas: proporciona botones para configurar la apariencia del diseño en el editor y modificar las propiedades del diseño.
  4. Sección de ajuste de diseño: muestra tu diseño en una combinación de las vistas de diseño y plano técnico.
  5. Properties: proporciona controles de propiedad para la vista seleccionada.

Figura 1: Visualización de la sección de ajuste de diseño del editor de diseño.

Cuando abres un archivo de diseño XML, el editor de diseño se abre de forma predeterminada (como se muestra en la figura 1). Si, en cambio, deseas editar XML en el editor de texto, haz clic en la pestaña Text de la parte inferior de la ventana. Mientras te encuentres en el editor de texto, también podrás ver los editores Palette, el árbol de componentes y la sección de ajuste de diseño (como se muestra en la figura 2) haciendo clic en Preview del lado derecho de la ventana. Sin embargo, la ventana Properties no se encuentra disponible en el editor de texto.

Sugerencia: Puedes pasar de la sección de ajuste diseño al editor de texto presionando Control+Shift+flecha derecha/izquierda.

Figura 2: Editor de texto con la ventana Preview abierta.

Cambiar la apariencia de la vista previa

Los botones de la fila superior de la sección de ajuste de diseño te permiten configurar la apariencia de tu diseño en el editor. Esta barra de herramientas también se encuentra disponible en la ventana Preview del editor de texto.

Figura 3: Botones de la barra de herramientas del editor de diseño que configuran la apariencia del diseño.

Conforme a los números de la figura 3, los botones disponibles son los siguientes:

  1. Diseño y plano técnico: selecciona la forma en que te gustaría ver tu diseño en el editor. En la vista de diseño se muestra una vista previa de color de tu diseño, mientras que en la de plano técnico solo se muestran los contornos de cada vista. También puedes ver las vistas de diseño y plano técnico una junto a la otra.

    Sugerencia: Puedes activar o desactivar estas vistas presionando B.

  2. Orientación de la pantalla: aplica rotación al dispositivo entre los modos horizontal y vertical.
  3. Tipo y tamaño del dispositivo: selecciona el tipo de dispositivo (teléfono o tablet, Android TV, o Android Wear) y la configuración de pantalla (tamaño y densidad). Puedes seleccionar varios tipos de dispositivos previamente configurados y tus propias definiciones AVD o comenzar un nuevo AVD seleccionando Add Device Definition en la lista.

    Sugerencia: Puedes cambiar el tamaño del dispositivo arrastrando la esquina inferior derecha del diseño.

  4. Versión de API: selecciona la versión de Android con la cual desees obtener una vista previa de tu diseño.
  5. Tema de la app: selecciona el tema de la IU que aplicarás a la vista previa. Nota: Esto solo funciona con estilos de diseño admitidos; por ello, muchos temas de esta lista pueden producir errores.
  6. Idioma: selecciona el idioma que mostrará en tus strings de IU. En esta lista se muestran solo los idiomas disponibles en tus recursos de string. Si deseas editar tus traducciones, haz clic en Editar traducciones en el menú desplegable (consulta Localizar la IU con Translations Editor).
  7. Variantes de diseño: Realiza un cambio a uno de los diseños alternativos para este archivo o crea uno nuevo (consulta Crear una variante de diseño, a continuación).

Nota: Estas configuraciones no tienen efecto en el código o manifiesto de tu app (a menos que optes por agregar un archivo de diseño nuevo desde Variantes de diseño); solo afectan la vista previa del diseño.

Crear un diseño nuevo

Cuando agregues un diseño nuevo para tu app, comienza creando un archivo de diseño en el directorio layout/ predeterminado de tu proyecto para que se pueda aplicar a todas las configuraciones de dispositivo. Una vez que tengas un diseño predeterminado, podrás crear variaciones de ese diseño para configuraciones específicas de dispositivo (como para las pantallas extragrandes), si es lo que deseas hacer, ve directamente a crear una variante de diseño.

Hay varias maneras de crear un diseño nuevo, según la vista de tu ventana Project, pero es posible acceder al siguiente procedimiento desde cualquier vista:

  1. En la ventana Project, haz clic en el módulo (como app) en el que desees agregar un diseño.
  2. En el menú principal, selecciona File > New > XML > Layout XML File.
  3. En el diálogo que aparece, ingresa un nombre para el archivo, la etiqueta de diseño de raíz y el conjunto de orígenes al que pertenece el diseño. Luego haz clic en Finish.

Figura 4: Diálogo para agregar un archivo de diseño XML nuevo.

A continuación se muestran otras formas de iniciar un archivo de diseño nuevo (aunque los diálogos que aparecen son diferentes):

Crear una variante de diseño

Si ya tienes un diseño y deseas crear una versión alternativa a fin de optimizar el diseño para diferentes tamaños y orientaciones de pantalla, sigue estos pasos:

  1. Abre tu archivo de diseño original y asegúrate de ver la sección de ajuste de diseño (haz clic en la pestaña Design en la parte inferior de la ventana).
  2. Haz clic en Variantes de diseño en la barra de herramientas. En la lista despegable, bastará con hacer clic en una variante sugerida como Create Landscape Variant; también podrás hacer clic en Create other y continuar con el paso siguiente.
  3. En el diálogo que aparecerá, solo tendrás que definir los calificadores de recursos para el nombre del directorio. Puedes escribirlo en Directory name o seleccionarlo en la lista Available qualifiers, uno por vez, y hacer clic en Add.
  4. Una vez que agregues todos tus calificadores, haz clic en OK.

Cuando tengas diferentes variaciones del mismo diseño, podrás cambiarlas con facilidad desde la lista que aparece al hacer clic en Layout Variants.

Para obtener más información sobre cómo crear diseños para diferentes pantallas, consulta Compatibilidad con diferentes tamaños de pantalla.

Convertir un diseño en ConstraintLayout

ConstraintLayout es un grupo de vistas disponible en la biblioteca de diseño de restricciones, que se incluye en Android Studio 2.2 y versiones posteriores. Se compiló desde el principio con el editor de diseño, de modo que es posible acceder a todos los elementos desde la sección de ajuste de diseño y no es necesario editar el XML manualmente. Lo mejor de todo es que su sistema de diseño basado en restricciones te permite compilar la mayoría de los diseños sin anidar grupos de vistas.

Para obtener un mejor rendimiento en términos de diseño, debes convertir diseños anteriores en ConstraintLayout. Android Studio tiene un convertidor compilado que te ayuda a hacerlo:

  1. Abre tu diseño existente en Android Studio y haz clic en la pestaña Design de la parte inferior de la ventana del editor.
  2. En la ventana Árbol de componentes, haz clic con el botón secundario en el diseño y luego con el primario en Convert layout a ConstraintLayout.

Para obtener más información sobre cómo crear un diseño con ConstraintLayout, consulta Crear una IU receptiva con ConstraintLayout.

Agregar vistas a tu diseño

Para compilar un diseño para tu app debes comprender los aspectos básicos de diseño, pero Android Studio quita varias de las complejidades del trabajo directo con los archivos XML. El editor de diseño te ayuda a realizar muchas tareas arrastrando widgets hacia la sección de ajuste de diseño y optimizando atributos de diseño en la ventana Properties .

Para comenzar a compilar tu diseño, simplemente arrastra las vistas del subpanel Palette a la sección de ajuste de diseño. Cuando dispones una vista en el diseño, el editor indica la relación de esta con el resto del diseño conforme al tipo de diseño en el cual la dispongas.

Por ejemplo, en el video 1 se muestra la forma en que el arrastre de una TextView a un ConstraintLayout genera las restricciones abajo e izquierda alineada en el TextView de arriba (con la opción Autoconnect habilitada).

Video 1:El editor de diseño puede agregar restricciones para tu vista cuando la arrastras a la sección de ajuste de edición.

Cuando se arrastran vistas a otro diseño que no sea ConstraintLayout, la sección de ajuste de diseño responde de manera diferente, según corresponda para las propiedades de diseño disponibles para ese diseño.

Los errores que se detecten en tu diseño se cuentan en la barra de herramientas. Para verlos, haz clic en Show Warnings and Errors .

La apariencia en la sección de ajuste de diseño es solo para la vista previa. Aunque editar tu diseño en la sección de ajuste de diseño te darte muchos resultados en la búsqueda de aspectos precisos, debes ejecutar tu app en un emulador o dispositivo real para verificar los resultados.

Para obtener más información sobre la forma en que las API de vista de Android funcionan para compilar un diseño, consulta la sección de aspectos básicos de diseño. Para hallar una guía de uso de ConstraintLayout, consulta Compilar una IU receptiva con ConstraintLayout.

Editar las propiedades de la vista

Figura 5: Ventana Properties.

En lugar de editar las propiedades de tu vista en XML, puedes hacerlo desde la ventana Properties (del lado derecho del editor de diseño). Esta ventana se encuentra disponible solo cuando la sección de ajuste de diseño está abierta. Por ello, asegúrate de haber seleccionado la pestaña Design en la parte inferior de la ventana.

Selecciona una vista en el editor si deseas ver y editar propiedades comunes para esa vista. Si necesitas ingresar más propiedades para la vista, haz clic en View all properties .

Cuando la vista seleccionada es un campo secundario de ConstraintLayout, la ventana de propiedades incluye un inspector de ventanas en la parte superior con varios controles, como se muestra en la figura 7. Si deseas obtener más información sobre los controles de propiedades para vistas en un ConstraintLayout, consulta Compilar una IU receptiva con diseño con restricciones.

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 one-minute survey?
Help us improve Android tools and documentation.