Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

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

En el editor de diseño, puedes compilar diseños rápidamente si arrastras elementos de IU al editor de diseño visual, en lugar de escribir el XML de diseño manualmente. En este puedes obtener una vista previa de tu diseño en diferentes versiones y dispositivos Android y, además, te permite cambiar el tamaño del diseño de forma dinámica para asegurarte de que se ajuste correctamente a los diferentes tamaños de pantalla.

El editor de diseño tiene una capacidad especial cuando se compila un diseño con ConstraintLayout, un administrador de diseño compatible con Android 2.3 (API nivel 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 Layouts.

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 estos botones para configurar el diseño en el editor y cambiar atributos de diseño.
  4. Design editor: Te 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. View mode: Puedes ver el diseño en los modos de 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: Controla el tamaño y la posición de la vista previa en el editor.

Al abrir un archivo de diseño XML, se abre el editor de diseño de manera 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 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 cambiar 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 de Layout Editor 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 estos 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 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 en la lista para iniciar un nuevo AVD. Para cambiar el tamaño del dispositivo, arrastra la esquina superior derecha del diseño. También puedes presionar D para desplazarte por la lista de dispositivos.
  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: Selecciona el tema de la IU que quieras aplicar a la vista previa. Ten en cuenta que esta opción únicamente 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 Edit translations en el menú desplegable. Para obtener más información sobre cómo trabajar con traducciones, consulta Cómo localizar la IU con Translations Editor.

Cómo crear un nuevo diseño

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, por ejemplo, para 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 en el 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 fuentes 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.

Usar Resource Manager

  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 en la esquina superior derecha de la ventana.
  2. Haz clic en Orientation for Preview (botón de orientación para vista previa) en 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) en la esquina superior derecha de la ventana.
  2. Haz clic en Orientation for Preview botón de orientación para vista previa en 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 este 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.

Para obtener más información sobre cómo crear diseños para diferentes pantallas, consulta 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 y puedes convertir un diseño en otro tipo de diseño.

  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 en ConstraintLayout

Para obtener un rendimiento del diseño optimizado, 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 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 compilar una IU receptiva 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 la paleta. 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 la ventana 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 Favorite en el 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 los lineamientos sobre el material de una vista o un grupo de vistas, haz clic con el botón derecho en el elemento de la IU en Palette y selecciona Material Guidelines en el 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 a tu 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 3: Ventana Attributes

Puedes editar los atributos de vista desde la ventana Atributtes, que se encuentra en el lado derecho del editor de diseño. Esta 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 3:

  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 Agregar botón para agregar atributo en la parte superior derecha de la sección.
  2. La sección Layout contiene controles para 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. Para obtener más información sobre cómo trabajar con ConstraintLayout, consulta Cómo compilar una IU receptiva 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 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 está codificado. Este indicador te ayuda a reconocer de inmediato los valores codificados. Si haces clic en el indicador en cualquier estado, se abre la ventana de diálogo Resources, en la que puedes seleccionar una referencia del 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 al usar un valor codificado donde se espera una referencia a un 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 4.

ventana de atributos de vista de tiempo de diseño

Figura 4: 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 5: 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 6: Una ImageView con datos de muestra

En una RecyclerView, puedes elegir entre un conjunto de plantillas que tiene imágenes y textos de ejemplo. Cuando se usan estas 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 7: 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 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) en la barra de herramientas.

Cómo descargar fuentes y aplicarlas al texto

Si usas Android 8.0 (API nivel 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 el diseño.
  2. Haz clic en la vista de texto.
  3. En la ventana Attributes, expande textAppeance 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, selecciona 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 en 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.