The Android Developer Challenge is back! Submit your idea before December 2.

Cómo compilar una IU con Layout Editor

En Layout Editor, 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.

Layout Editor es especialmente útil para compilar un nuevo diseño con ConstraintLayout, un administrador de diseño disponible en una biblioteca de compatibilidad que admite Android 2.3 (nivel de API 9) y versiones posteriores.

En esta página, se proporciona información general sobre Layout Editor. Para obtener más información sobre los aspectos básicos de diseño, consulta Diseños. Para obtener más información sobre cómo compilar un diseño con ConstraintLayout, consulta Cómo crear una IU receptiva con ConstraintLayout.

Introducción al Layout Editor

Layout Editor aparece cuando abres un archivo de diseño XML.

Según los números de la figura 1, las secciones del editor son las siguientes:

  1. Palette: Es la lista de vistas y grupos de vistas que puedes arrastrar a tu diseño.
  2. Component Tree: Corresponde a la jerarquía de vistas para tu diseño.
  3. Toolbar: Tiene los botones para configurar la apariencia de tu diseño en el editor y cambiar algunos atributos de diseño.
  4. Design editor: Corresponde al diseño en la vista Design o Blueprint, o ambas.
  5. Attributes: Contiene controles para los atributos de las vistas seleccionadas.

Figura 1: Layout 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 XML de diseño en el editor de texto, haz clic en la pestaña Text en la parte inferior de la ventana. En el editor de texto, también puedes ver las pestañas Palette, Component Tree y el editor de diseño si haces clic en Preview en el lado derecho de la ventana. Sin embargo, la ventana Attributes no está disponible desde el editor de texto.

Sugerencia: Para alternar entre los editores de texto y diseño, presiona Alt + Shift + Flecha hacia la derecha o izquierda (Control + Shift + Flecha hacia la derecha o izquierda en Mac).

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 de tu diseño en la herramienta. Esta barra de herramientas también está disponible en la ventana Preview del editor de texto.

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 quieres ver tu diseño en el editor; puedes elegir la vista Design (que es una vista previa real de tu diseño), la vista Blueprint (que solo marca el contorno de cada vista), o bien ver ambas vistas (Design + Blueprint) una al lado de la otra.

    Sugerencia: Presiona la tecla B para alternar entre las vistas.

  2. Orientación de pantalla y variantes de diseño: Selecciona entre la orientación de pantalla vertical y horizontal, o bien otros modos de pantallas para los que tu app incluye diseños alternativos, como el modo nocturno. Este menú también contiene comandos para crear una nueva variante de diseño.
  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 elegir entre varios tipos de dispositivos configurados previamente y tus propias definiciones de AVD, o bien seleccionar Add Device Definition en la lista para iniciar un nuevo AVD.

    Sugerencia: Para cambiar el tamaño del dispositivo, arrastra la esquina superior derecha del diseño.

  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. (Esta opción solo funciona para los estilos de diseños admitidos; por lo tanto, 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 (consulta Cómo localizar la IU con Translations Editor).

Nota: Estas opciones de configuración no afectan el manifiesto ni el código de tu app (a menos que decidas agregar un nuevo archivo de diseño desde Layout Variants). Solo modifican la vista previa del diseño.

Cómo crear un nuevo diseño

Para agregar un nuevo diseño a tu app, primero debes crear un archivo de diseño en el directorio layout/ predeterminado de tu 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 muy grandes).

Existen diferentes maneras de crear un nuevo diseño en función de tu vista de la ventana Project, pero el siguiente procedimiento se puede realizar desde cualquier vista:

  1. En la ventana Project, haz clic en el módulo (por ejemplo: app) en el que quieras 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 raíz y el conjunto de fuentes al que pertenece el diseño. Luego, haz clic en Finish.

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

  • Si seleccionaste la vista Project en la ventana Project, abre el directorio res del módulo de tu app, haz clic con el botón derecho en el directorio de diseño en el que quieres agregar este diseño y, luego, selecciona New > Layout resource file.
  • Si seleccionaste la vista Android en la ventana Project, haz clic con el botón derecho en la carpeta layout y, luego, selecciona New > Layout resource file.

Cómo crear una variante de diseño

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

  1. Abre el archivo de diseño original y asegúrate de que estás viendo el editor de diseño (haz clic en la pestaña Design en la parte inferior de la ventana).
  2. Haz clic en Orientation for Preview  en la barra de herramientas. En la lista desplegable, puedes hacer clic en la variante sugerida, como Create Landscape Variant y listo, o bien puedes hacer clic en Create Other y continuar con el siguiente paso.
  3. En el diálogo que aparece, solo tienes que definir los calificadores del recurso para el nombre del directorio. Puedes escribirlos en Directory name o seleccionarlos de la lista Available qualifiers, de a uno por vez y, luego, hacer clic en Add .
  4. Una vez que agregues todos los calificadores, haz clic en OK.

Cuando tengas muchas variantes del mismo diseño, podrás alternar entre estas fácilmente en 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 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 en otro y un tipo de diseño (grupo de vistas) en otro.

  1. Haz clic en la pestaña Design en la parte inferior 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

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. Este se compiló desde el principio junto con el Layout Editor, por lo que puedes acceder a todas las funciones desde el editor de diseño de modo que nunca tengas que editar el XML manualmente. Y lo mejor de todo es que el sistema de diseño basado en restricciones te permite compilar la mayoría de los diseños sin grupos de vistas anidadas.

Para obtener un rendimiento del diseño optimizado, deberías convertir los diseños antiguos a ConstraintLayout.

Para convertir un diseño existente a ConstraintLayout, haz lo siguiente:

  1. Abre tu diseño existente en Android Studio y haz clic en la pestaña Design en la parte inferior de la ventana del editor.
  2. En la ventana Component Tree, haz clic con el botón derecho en el diseño y, luego, selecciona Convert layout to ConstraintLayout.

El comando para convertir específicamente un diseño a ConstraintLayout es más inteligente al momento de inferir las restricciones y conservar el diseño que el comando simple Convert view que se describe en la sección anterior.

Para obtener más información sobre cómo compilar un diseño con 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  en la parte superior de la paleta o escribe 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 selecciona 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 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 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 compilar tu diseño, solo tienes que arrastrar vistas o grupos de vistas desde Palette al editor de diseño. A medida que 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

En lugar de editar los atributos de vista en el XML, puedes hacerlo desde la ventana Attributes (del lado derecho de Layout Editor). Esta ventana solo está disponible cuando el editor de diseño está abierto, por lo que debes asegurarte de haber seleccionado la pestaña Design en la parte inferior de la ventana.

Al seleccionar una vista (ya sea cuando haces clic en ella en Component Tree o en el editor de diseño), en la ventana Attributes, se muestra lo siguiente, como se indica en la figura 3:

  1. La sección Declared Attributes, en la que se enumeran los atributos especificados en el archivo de diseño. Para agregar un atributo, haz clic en Add  en la parte superior derecha de la sección.
  2. El inspector de vistas, que incluye controles para el estilo de altura/ancho. En el caso de las vistas en un ConstraintLayout, esta sección también muestra el sesgo de restricciones y las restricciones que usa la vista. Para obtener más información, consulta Cómo compilar una IU receptiva con ConstraintLayout.
  3. Una lista que incluye 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. El botón de búsqueda. Haz clic en él para buscar un atributo de vista específico.
  5. El indicador que aparece del lado derecho de cada valor de atributo es sólido  cuando el valor es una referencia del recurso y vacío  cuando no lo es. De esta manera, podrás reconocer los valores hard-coded de un vistazo. Al hacer clic en este indicador en cualquier estado, se abre la ventana del diálogo Resources, en la que puedes seleccionar una referencia del recurso para el atributo correspondiente.
  6. Los atributos con errores o advertencias aparecen destacados. Los errores se muestran en color rojo y las advertencias, en naranja. Un ejemplo de error es una entrada no válida en un atributo que define el diseño (como se ve en la imagen). Un ejemplo de advertencia es el uso de un valor hard-coded cuando se espera una referencia del recurso (como se ve en la imagen).

Cómo agregar datos de ejemplo en 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 Layout Editor.

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.

Figura 4: Ventana Design-time View Attributes

En una TextView, puedes elegir entre diferentes categorías de texto de ejemplo. Cuando usas un texto de ejemplo, Android Studio completa el atributo text de la TextView con los datos de ejemplo elegidos. Ten en cuenta que podrás elegir el ejemplo de texto por medio de la ventana Design-time View Attributes únicamente si el atributo text está vacío.

Figura 5: Una TextView con datos de ejemplo

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

Figura 6: Una ImageView con datos de ejemplo

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

Figura 7: Una RecyclerView con datos de ejemplo

Cómo mostrar errores y advertencias de diseño

Si se detectan problemas en tu diseño, se indicarán en Component Tree con un signo de exclamación ( o ) junto a la vista correspondiente. Para ver la información de los errores, haz clic en el ícono.

Para ver todos los problemas conocidos en una ventana debajo del editor, haz clic en Show Warnings and Errors ( o ) en la barra de herramientas.

En esta ventana, también puedes habilitar la opción Show issues on the preview, que agrega un ícono de alerta o error a cada vista correspondiente en la vista previa (solo en la vista "Design", no en la vista "Blueprint").

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 Layout Editor, haz clic en la pestaña Design para ver tu diseño.
  2. Haz clic en la vista de texto.
  3. En la ventana Attributes, expande textAppearance y, luego, haz clic en 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 que aparece en Downloadable, puedes hacer clic en Create downloadable font para cargar la fuente en el tiempo de ejecución (como una fuente descargable) o en Add font to project a fin de empaquetar el archivo de fuente TTF en tu APK (el sistema Android proporciona las fuentes que se enumeran en Android, por lo tanto no es necesario descargarlas ni empaquetarlas en tu APK).
  6. Haz clic en OK.