Cómo compilar una IU con el editor de diseño

Puedes compilar diseños rápidamente arrastrando elementos de la IU al editor de diseño visual, en lugar de escribir el XML de diseño de forma manual. En ese editor, puedes obtener una vista previa de tu diseño en diferentes versiones y dispositivos Android, así como cambiarle el tamaño de forma dinámica para asegurarte de que se ajuste bien a los diferentes tamaños de pantalla.

El editor de diseño es especialmente útil cuando se compila un diseño con ConstraintLayout, un administrador de diseño que admite Android 2.3 (nivel de API 9) y versiones posteriores.

En esta página, se proporciona información general sobre el editor de diseño. Para obtener más información sobre los aspectos básicos de diseño, consulta Diseños.

Introducción al editor de diseño

El editor de diseño aparece cuando abres un archivo de diseño XML.

editor de diseño

Figura 1: Editor de diseño

  1. Palette: contiene varias vistas y grupos de vistas que puedes arrastrar al diseño.
  2. Component Tree: muestra la jerarquía de los componentes del diseño.
  3. Toolbar: haz clic en esos botones para configurar el diseño en el editor y cambiar atributos de diseño.
  4. Design editor: permite editar el diseño en la vista de diseño o de plano técnico, o en ambas.
  5. Attributes: Contiene controles para los atributos de las vistas seleccionadas.
  6. Modo de lectura: puedes ver el diseño en los modos Code ícono de modo de código, Design ícono del modo Design o Split ícono de modo de división. El modo Split muestra las ventanas Code y Design al mismo tiempo.
  7. Controles de zoom y desplazamiento lateral: ajusta el tamaño y la posición de la vista previa en el editor.

Cuando abras un archivo de diseño XML, se abrirá el editor de diseño de forma predeterminada (como se muestra en la Figura 1). Para editar el diseño XML en el editor de texto, haz clic en el botón Code ícono de modo de código, ubicado en la esquina superior derecha de la ventana. Ten en cuenta que las ventanas Palette, Component Tree y Attributes no están disponibles mientras editas el diseño en la vista Code.

Sugerencia: Puedes presionar Alt + Shift + Right/Left arrow (Control + Shift + Right/Left arrow en Mac) para alternar entre los editores de diseño y de texto.

Cómo cambiar la apariencia de la vista previa

Los botones de la fila superior del editor de diseño te permiten configurar la apariencia del diseño en el editor.

Figura 2: Botones de la barra de herramientas del editor de diseño con los que se configura la apariencia del diseño

Según los números de la Figura 2, los botones disponibles son los siguientes:

  1. Design y Blueprint: selecciona cómo deseas ver el diseño en el editor. Puedes elegir Design para obtener una vista previa del diseño, Blueprint para ver únicamente el contorno de cada vista o Design + Blueprint para ver ambas vistas en paralelo. También puedes presionar B para alternar entre esos tipos de vista.
  2. Orientación de la pantalla y variantes de diseño: selecciona entre la orientación de pantalla horizontal y vertical, o bien otros modos de pantalla para los que tu app proporciona diseños alternativos, como el modo nocturno. Este menú también incluye comandos para crear una nueva variante de diseño. También puedes presionar O para cambiar la orientación.

  3. Tipo y tamaño del dispositivo: selecciona el tipo de dispositivo (teléfono o tablet, Android TV o Wear OS) y la configuración de la pantalla (tamaño y densidad). Puedes seleccionar entre varios tipos de dispositivos configurados previamente y tus propias definiciones de AVD, o seleccionar Add Device Definition de la lista a fin de iniciar un nuevo AVD. Para cambiar el tamaño del dispositivo, arrastra la esquina inferior derecha del diseño. También puedes presionar D para desplazarte por la lista de dispositivos. Si pruebas tu diseño con estos dispositivos de referencia, te asegurarás de que tu app escale correctamente a los estados de diseño en dispositivos reales.

    Figura 3: El menú del selector de dispositivos con dispositivos de referencia

  4. Versión de la API: Selecciona la versión de Android en la que quieres obtener la vista previa del diseño.

  5. Tema de la app: elige el tema de la IU que quieras aplicar a la vista previa. Ten en cuenta que esta opción solo funciona para los estilos de diseño compatibles, por lo que varios temas de esta lista generarán un error.

  6. Idioma: selecciona el idioma en el que se mostrarán las strings de IU. En esta lista, solo se muestran los idiomas disponibles en tus recursos de strings. Si deseas editar las traducciones, haz clic en la opción Edit translations, ubicada en el menú desplegable. A fin de obtener más información para trabajar con traducciones, consulta Cómo localizar la IU con el editor de traducciones.

Cómo crear un diseño nuevo

Para agregar un nuevo diseño a la app, primero tienes que crear un archivo de diseño en el directorio layout/ predeterminado del proyecto a fin de que se aplique a todas las opciones de configuración del dispositivo. Una vez que tengas un diseño predeterminado, podrás crear variantes de diseño para configuraciones de dispositivos específicos, como pantallas grandes.

Se puede crear un diseño nuevo de alguna de las diferentes maneras que se mencionan a continuación:

Usar el menú principal de Android Studio

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

Usar la vista Project

  1. Selecciona la vista Project en la ventana Project.
  2. Haz clic con el botón derecho en el directorio de diseño al que deseas agregar el diseño.
  3. En el menú contextual que aparece, haz clic en New > Layout Resource File.

Usar la vista de Android

  1. Selecciona la vista Android en la ventana Project.
  2. Haz clic con el botón derecho en la carpeta layout.
  3. En el menú contextual que aparece, selecciona New > Layout Resource File.

Cómo usar el administrador de recursos

  1. En Resource Manager, selecciona la pestaña Layout.
  2. Haz clic en el botón + y, luego, en Layout Resource File.

Cómo usar variantes de diseño para optimizar las diferentes pantallas

Una variante de diseño es una versión alternativa de un diseño existente que se optimizó para un tamaño de pantalla o una orientación determinados.

Cómo usar una variante de diseño sugerida

Android Studio incluye variantes de diseño comunes que puedes usar en tu proyecto. Para usar una variante de diseño sugerida, haz lo siguiente:

  1. Abre el archivo de diseño original y haz clic en el ícono Design ícono del modo Design ubicado en la esquina superior derecha de la ventana.
  2. Haz clic en el botón Orientation for Preview (botón de orientación para vista previa) de la barra de herramientas.
  3. En la lista desplegable, selecciona una variante sugerida, como Create Landscape Variant.

Cómo crear tu propia variante de diseño

Si quieres crear tu propia variante de diseño, haz lo siguiente:

  1. Abre el archivo de diseño original y haz clic en el ícono Design (ícono del modo Design) ubicado en la esquina superior derecha de la ventana.
  2. Haz clic en el botón Orientation for Preview botón de orientación para vista previa de la barra de herramientas.
  3. En la lista desplegable, selecciona Create Other….
  4. En el cuadro de diálogo que aparece, define los calificadores de recursos para la variante. Selecciona un calificador de la lista Available qualifiers y, luego, haz clic en el botón Add botón para agregar calificador. Repite ese paso para agregar otros calificadores según sea necesario.
  5. Una vez que hayas agregado todos los calificadores, haz clic en OK.

Si tienes muchas variantes del mismo diseño, puedes alternarlas. Para ello, haz clic en Layout Variants botón de variantes de diseño y elige una de la lista que aparece.

Descubre cómo crear diseños para diferentes pantallas en Cómo brindar compatibilidad con diferentes tamaños de pantalla.

Cómo convertir una vista o un diseño

Puedes convertir un tipo de vista a otro, así como un tipo de diseño a otro.

  1. Haz clic en el botón Design en la esquina superior derecha de la ventana del editor.
  2. En Component Tree, haz clic con el botón derecho en la vista o el diseño y, luego, selecciona Convert view….
  3. En el diálogo que aparece, elige el nuevo tipo de vista o diseño y, luego, haz clic en Apply.

Cómo convertir un diseño a ConstraintLayout

Para obtener un rendimiento del diseño mejorado, deberías convertir los diseños antiguos a ConstraintLayout. ConstraintLayout usa un sistema de diseño basado en restricciones que te permite compilar la mayoría de los diseños sin grupos de vistas anidadas.

Para convertir un diseño existente a ConstraintLayout, sigue estos pasos:

  1. Abre un diseño existente en Android Studio y haz clic en el botón Design que se encuentra en la esquina superior derecha de la ventana del editor.
  2. En Component Tree, haz clic con el botón derecho en el diseño y, luego, en Convert your-layout-type to ConstraintLayout.

Para obtener más información sobre ConstraintLayout, consulta Cómo crear una IU responsiva con ConstraintLayout.

Cómo buscar elementos en Palette

Para buscar una vista o un grupo de vistas por nombre en Palette, haz clic en el botón Search botón para buscar en palette, en la parte superior de Palette. También puedes escribir el nombre del elemento cuando la ventana Palette está activa.

Puedes ver los elementos de uso frecuente en la categoría Common, en Palette. Para agregar un elemento a esta categoría, haz clic con el botón derecho en una vista o un grupo de vistas en Palette y, luego, haz clic en la opción Favorite del menú contextual.

Cómo abrir documentación desde Palette

Si quieres abrir la documentación de referencia para desarrolladores de Android correspondiente a una vista o un grupo de vistas, selecciona el elemento de la IU en Palette y presiona Shift + F1.

Si quieres abrir la documentación de lineamientos sobre el material correspondiente a una vista o un grupo de vistas, haz clic con el botón derecho en el elemento de la IU ubicado en Palette y selecciona la opción Material Guidelines del menú contextual. Si no existe una entrada específica para el elemento, este comando abrirá la página principal de la documentación de lineamientos sobre el material.

Cómo agregar vistas al diseño

Para comenzar a crear tu diseño, solo tienes que arrastrar vistas o grupos de vistas desde Palette al editor de diseño. Cuando colocas una vista en el diseño, el editor muestra información sobre la relación de esta con el resto del diseño.

Si usas ConstraintLayout, puedes crear restricciones automáticamente por medio de las funciones Infer Constraints y Autoconnect.

Cómo editar atributos de vista

Figura 4: Ventana Attributes

Puedes editar los atributos de vista desde la ventana Attributes que se encuentra en el lado derecho del editor de diseño. Esa ventana está disponible solo cuando el editor de diseño está abierto, por lo que debes asegurarte de usar el modo Design o Split para ver el diseño.

Cuando seleccionas una vista, ya sea haciendo clic en la vista en Component Tree o en el editor de diseño, la ventana Attributes muestra lo siguiente, como se indica en la figura 4:

  1. La sección Declared Attributes enumera los atributos especificados en el archivo de diseño. Para agregar un atributo, haz clic en el botón Add botón para agregar atributo ubicado en la parte superior derecha de la sección.
  2. La sección Layout contiene controles para ajustar el ancho y la altura de la vista. Si la vista está en ConstraintLayout, esta sección también muestra el sesgo de restricciones y enumera las restricciones que usa la vista. Si quieres obtener más información para trabajar con ConstraintLayout, consulta Cómo crear una IU responsiva con ConstraintLayout.
  3. La sección Common Attributes enumera los atributos comunes para la vista seleccionada. Para ver todos los atributos disponibles, expande la sección All Attributes que se encuentra en la parte inferior de la ventana.
  4. Haz clic en el botón Search para buscar un atributo de vista específico.
  5. Los íconos que aparecen a la derecha de cada valor de atributo indican si los valores de los atributos son referencias de recursos. El indicador se ve lleno ícono de indicador de sólido cuando el valor es una referencia de recurso y vacío ícono indicador de vacío cuando el valor es hard-coded. Ese indicador te ayuda a reconocer los valores hard-coded de un vistazo. Si haces clic en el indicador en cualquier estado, se abre la ventana de diálogo Resources, en la que puedes seleccionar una referencia de recurso para el atributo correspondiente.

  6. Los atributos con errores aparecen destacados en color rojo. Un error puede indicar una entrada no válida en un atributo que define el diseño, como se muestra en la imagen resaltada en rojo de la Figura 3.

    Las advertencias se destacan en color anaranjado. Pueden aparecer advertencias si usas un valor hard-coded cuando, en su lugar, se espera una referencia de recurso, por ejemplo.

Cómo agregar datos de ejemplo a la vista

Como muchos diseños de Android dependen de datos de tiempo de ejecución, puede resultar difícil visualizar la apariencia y el estilo de un diseño mientras creas tu app. En Android Studio 3.2 y versiones posteriores, puedes agregar datos de vista previa de ejemplo en una TextView, ImageView o RecyclerView desde el editor de diseño.

Puedes hacer clic con el botón derecho en uno de estos tipos de vistas y elegir la opción Set Sample Data para abrir la ventana Design-time View Attributes, como se muestra en la Figura 5.

ventana de atributos de vista de tiempo de diseño

Figura 5: Ventana Design-time View Attributes

En una TextView, puedes elegir entre diferentes categorías de texto de ejemplo. Cuando usas textos de muestra, Android Studio propaga el atributo de text de la TextView con los datos de muestra que hayas elegido. Ten en cuenta que puedes elegir textos de muestra mediante la ventana Design-time View Attributes únicamente si el atributo text aparece vacío.

vista de texto con datos de muestra

Figura 6: Una TextView con datos de muestra

En una ImageView, puedes seleccionar entre las diferentes imágenes de ejemplo. Cuando eliges una imagen de muestra, Android Studio propaga el atributo tools:src de ImageView (o tools:srcCompat si usas la biblioteca de compatibilidad).

Vista de imágenes con datos de muestra

Figura 7: Una ImageView con datos de muestra

En una RecyclerView, puedes elegir entre un conjunto de plantillas que tienen imágenes y textos de ejemplo. Cuando se usan esas plantillas, Android Studio agrega un archivo a tu directorio res/layout, recycler_view_item.xml, que contiene el diseño de los datos de muestra. Android Studio también agrega metadatos a la RecyclerView para que los datos de ejemplo se muestren correctamente.

vista de reciclador con datos de muestra

Figura 8: Una RecyclerView con datos de muestra

Cómo mostrar errores y advertencias de diseño

El editor de diseño notifica sobre cualquier problema de diseño junto a la vista correspondiente en Component Tree con un signo de exclamación en un círculo rojo ícono de signo de exclamación en un círculo rojo que indica un error de diseño para errores o un signo de exclamación en un triángulo anaranjado ícono de signo de exclamación en un triángulo anaranjado que indica una advertencia de diseño para las advertencias. Haz clic en el ícono para ver más detalles.

Para ver todos los problemas conocidos en una ventana debajo del editor, haz clic en la opción Show Warnings and Errors (ícono de signo de exclamación en un círculo rojo que indica un error de diseño o ícono de signo de exclamación en un triángulo anaranjado que indica una advertencia de diseño) de la barra de herramientas.

Cómo descargar fuentes y aplicarlas al texto

Si usas Android 8.0 (nivel de API 26), o bien la biblioteca de compatibilidad de Android 26.0.0 o una versión posterior, puedes seleccionar entre cientos de fuentes, de la siguiente manera:

  1. En el editor de diseño, haz clic en el botón Design ícono del modo Design para ver tu diseño.
  2. Haz clic en la vista de texto.
  3. En la ventana Attributes, expande textAppearance y, luego, el cuadro fontFamily.
  4. Desplázate hacia la parte inferior de la lista y haz clic en More Fonts para abrir el diálogo Resources.
  5. En el diálogo Resources, elige una fuente de la lista o escribe el nombre en la barra de búsqueda en la parte superior. Si seleccionas una fuente en Downloadable, puedes hacer clic en Create downloadable font para cargarla durante el tiempo de ejecución como una fuente descargable o en Add font to project para empaquetar el archivo de fuentes TTF en tu APK. Ten en cuenta que las fuentes indicadas en Android se proporcionan en el sistema de Android, por lo que no es necesario descargarlas ni agruparlas en tu APK.
  6. Haz clic en OK para finalizar.