Register now for Android Dev Summit 2019!

Compilar una IU con un editor de diseño

En el editor de diseño, puedes compilar diseños rápidamente arrastrando elementos de IU a un editor de diseño visual en lugar de escribir el XML de diseño manualmente. El editor de diseño puede revisar tu diseño en diferentes dispositivos y versiones de Android, y puedes cambiar este diseño de manera dinámica 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 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 aspectos básicos de diseño, consulta Diseños. 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 de diseño

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

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

  1. Palette: lista de vistas y grupos de vistas que puedes arrastrar hasta tu diseño.
  2. Component Tree: muestra la jerarquía de vistas para tu diseño.
  3. Barra de herramientas: botones para configurar la apariencia de tu diseño en el editor y cambiar algunos atributos de diseño.
  4. Ajuste de diseño: diseño en la vista Design o Blueprint, o en ambas.
  5. Attributes: controles para los atributos de la vista seleccionada.

Figura 1: 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. En el editor de texto, puedes ver Palette, Component Tree y el editor de diseño haciendo clic en Preview, del lado derecho de la ventana. Sin embargo, la ventana Attributes no se encuentra disponible en el editor de texto.

Sugerencia: Puedes pasar del editor de diseño al de texto presionando Alt + Shift + flecha derecha o izquierda (Control + Shift + flecha izquierda o derecha en Mac).

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 el aspecto 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 2: Botones de la barra de herramientas del editor que configuran la apariencia del diseño.

Según los números de la figura 2, 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, selecciona la vista Design (una versión preliminar real de tu diseño), la vista Blueprint (solo se muestran los contornos de cada vista) o Design + Blueprint para que se muestren una junto a la otra.

    Sugerencia: Presiona B para alternar estas vistas.

  2. Variantes de orientación y variantes de la pantalla: Selecciona entre la orientación de pantalla horizontal o vertical u otros modos de pantalla para los cuales tu app proporcione diseños alternativos, como el modo nocturno. Este menú también contiene comandos para crear una variante de diseño nueva.
  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 varios tipos de dispositivos previamente configurados y tus propias definiciones de AVD, o iniciar 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. (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 se mostrará en tus strings de IU. En esta lista se muestran solo los idiomas disponibles en tus recursos de strings. Si deseas editar tus traducciones, haz clic en Editar traducciones en el menú desplegable (consulta Localizar la IU con Translations Editor).

Nota: Estas configuraciones no tienen efecto en el código ni en el manifiesto de tu app (a menos que optes por agregar un archivo de diseño nuevo desde Layout Variants); 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 dispositivos. Una vez que tengas un diseño predeterminado, podrás crear variaciones de diseño para configuraciones de dispositivos especificas (como pantallas extragrandes).

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.

A continuación, se muestran otras formas de iniciar un archivo de diseño nuevo (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 secundario donde desees agregar el diseño y luego haz clic en New > Layout resource file.
  • Si seleccionaste la vista Android en la ventana Project: haz clic con el botón secundario en la carpeta layout y luego selecciona New > Layout resource file.

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 el editor (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 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, de a 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 fácilmente desde la lista que aparece haciendo 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 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 el Component Tree, haz clic con el botón secundario en la vista o el diseño y luego con el primario en Convert view.
  3. En el diálogo que aparece, elige el tipo nuevo de vista o diseño y luego haz clic en Apply.

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 ningún grupo de vistas anidado.

Para obtener un mejor rendimiento en términos de diseño, debes convertir los diseños anteriores 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 de la parte inferior de la ventana del editor.
  2. En la ventana Component Tree, haz clic con el botón secundario en el diseño y luego con el primario en Convert layout a ConstraintLayout.

El comando para convertir específicamente un diseño en ConstraintLayout es más inteligente respecto de la inferencia de restricciones y la preservación del diseño que el comando simple Convert view descrito en la sección previa.

Para obtener más información sobre cómo crear un diseño con ConstraintLayout, consulta Crear 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 del Palette o comienza a escribir el nombre del elemento cuando la ventana Palette esté activa.

Puedes encontrar elementos usados con frecuencia en la categoría Common de Palette. Para agregar un elemento a esta categoría, haz clic con el botón secundario en una vista o un grupo de vistas de Palette y luego con el primario en Favorite, en el menú contextual.

Abrir la documentación desde Palette

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

Si deseas abrir la documentación de Material Guidelines para una vista o un grupo de vistas, haz clic con el botón secundario en el elemento de IU de Palette y selecciona Material Guidelines en el menú contextual. Si no existe una entrada específica para el elemento, este comando abre la página principal de la documentación de pautas de Material Design.

Agregar vistas a tu diseño

Para comenzar a compilar tu diseño, simplemente arrastra las vistas y los grupos de vistas de Palette al editor de diseño. Cuando ubicas una vista en el diseño, el editor muestra información sobre la relación de la vista con el resto del diseño.

Si usas ConstraintLayout, puedes crear restricciones automáticamente usando las características Infer Constraints y Autoconnect.

Editar atributos de vista

Figura 3: Ventana Attributes.

En lugar de editar tus atributos de vista en XML, puedes hacerlo desde la ventana Attributes (del lado derecho del editor de diseño). Esta ventana se encuentra disponible solo cuando el editor de diseño está abierto. Por ello, asegúrate de haber seleccionado la pestaña Design en la parte inferior de la ventana.

Cuando seleccionas una vista haciendo clic sobre esta en Component Tree o en el editor de diseño, en la ventana Attributes se muestra lo siguiente, tal como se indica en la figura 3:

  1. Inspector de vistas con controles para el estilo de ancho y alto, márgenes y restricciones (disponible solo para vistas en un ConstraintLayout). Para obtener más información, consulta Crear una IU receptiva con ConstraintLayout.
  2. Una lista de atributos comunes para la vista seleccionada. Para ver todos los atributos disponibles, haz clic en View all attributes en la parte superior de la ventana.
  3. Atributos favoritos que has seleccionado. Para agregar atributos, haz clic en View all attributes y, luego, en la estrella que aparece cuando desplazas tu mouse sobre el lado izquierdo del nombre de un atributo.

Para buscar un atributo de vista específico, haz clic en View all attributes y, luego, en Search , en la parte superior de la ventana.

Cómo agregar datos de muestra a tu vista

Debido a que muchos diseños de Android dependen de datos de tiempo de ejecución, puede resultar difícil obtener el aspecto y la sensación de un diseño mientras diseñas tu app. En Android Studio 3.2 y versiones posteriores, puedes agregar datos de vista previa a un elemento TextView, ImageView o RecyclerView desde Layout Editor.

Cuando desplaces el ratón por una vista, el botón de atributos de tiempo de diseño aparecerá debajo de la vista en la ventana Design. Haz clic en este botón para mostrar la ventana Design-time View Attributes, como se muestra en la figura 4.

Figura 4. Ventana Design-time View Attributes

En un TextView, puedes elegir entre diferentes categorías de textos de muestra. Cuando usas textos de muestra, Android Studio propaga el atributo de text del 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.

Figura 5. Un TextView con datos de muestra

En un elemento ImageView, puedes elegir entre diferentes imágenes de muestra. Cuando eliges una imagen de muestra, Android Studio propaga el atributo tools:src de ImageView (o tools:srcCompat si usas Support Library).

Figura 6. Un elemento ImageView con datos de muestra

En un RecyclerView, puedes elegir entre un conjunto de plantillas que contienen imágenes y textos de muestra. Cuando se usan estas plantilas, 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 RecyclerView para mostrar correctamente los datos de muestra.

Figura 7. Un RecyclerView con datos de muestra

Cómo ver errores y advertencias de diseño

Si se detectan problemas en tu diseño, se indican en el árbol de componentes con un ícono 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 Mostrar advertencias y errores ( o ), en la barra de herramientas.

En esta ventana, también puedes habilitar Show issues on the preview, que agrega un ícono de error o advertencia a cada vista correspondiente en la vista previa (solo en la vista de diseño, no en la de plano técnico).

Descargar fuentes y aplicarlas al texto

Cuando usas Android 8.0 (nivel de API 26) o la biblioteca de compatibilidad de Android 26.0.0, o versiones posteriores, puedes seleccionar cientos de fuentes siguiendo estos pasos:

  1. En el editor de diseño, haz clic en la pestaña Design para ver tu diseño en él.
  2. Haz clic en una vista de texto.
  3. En la ventana Attributes, expande textAppearance y luego haz clic para expandir la casilla fontFamily.
  4. Desplázate hasta 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 navegando hasta la lista o ingresando texto en la barra de búsqueda de la parte superior. Si seleccionas una indicada 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 para empaquetar el archivo de fuentes TTF en tu APK. (Las fuentes indicadas en Android se proporcionan en el sistema de Android, de modo que no es necesario descargarlas ni agruparlas en tu APK).
  6. Haz clic en OK.