El Inspector de diseño de Android Studio te permite comparar el diseño de tu app con modelos de diseño, acceder a una vista ampliada o 3D de tu app y examinar los detalles de su diseño en el tiempo de ejecución, lo cual, en especial, resulta útil cuando tu diseño se compila durante el tiempo de ejecución, en lugar de en XML, y se comporta de manera inesperada.
La Validación de diseño te permite obtener una vista previa simultánea de los diseños en diferentes dispositivos y configuraciones de pantalla, incluidos idiomas del usuario o tamaños de fuente variables, lo que facilita realizar pruebas de una variedad de problemas habituales de diseño.
Cómo abrir el Inspector de diseño
Para abrir el inspector de diseños, haz lo siguiente:
- Ejecuta tu app en un emulador o dispositivo conectado.
- Haz clic en Tools > Layout Inspector.
Como se muestra en la figura 1, el Inspector de diseño presenta lo siguiente:
- Árbol de componentes: es la jerarquía de las vistas del diseño.
- Pantalla de diseño: representa el diseño de la app como aparece en tu dispositivo o emulador, con los límites de diseño para cada vista.
- Barra de herramientas del Inspector de diseño: son las herramientas para el Inspector de diseño.
- Atributos: son los atributos de diseño para la vista seleccionada.
Figura 1: Inspector de diseño
Selecciona una vista
Para seleccionar una vista, haz clic en ella, en el árbol de componentes o en la pantalla de diseño. Todos los atributos de diseño de la vista seleccionada aparecen en el panel Atributos.
Si tu diseño incluye vistas superpuestas, para seleccionar una vista que no se encuentre al frente, puedes hacer clic en ella, en el árbol de componentes o rotar el diseño y hacer clic en la vista deseada.
Cómo aislar una vista
Para trabajar con diseños complejos, puedes aislar vistas individuales de manera que solo un subconjunto del diseño se muestre en el árbol de componentes y se procese en la pantalla de diseño.
Para aislar una vista, haz clic con el botón derecho en la vista, en el árbol de componentes y selecciona Show Only Subtree o Show Only Parents.
Para volver a la vista completa, haz clic con el botón derecho en la vista y selecciona Show All.
Cómo ocultar bordes de diseño y ver etiquetas
Para ocultar el cuadro de límite o ver las etiquetas de un elemento de diseño, haz clic en View Options 
, en la parte superior de la pantalla de diseño, y activa o desactiva Show Borders o Show View Label.
Cómo comparar el diseño de la app con una superposición de imágenes de referencia
Para comparar el diseño de tu app con una imagen de referencia, como un modelo de IU, puedes cargar una superposición de imágenes de mapa de bits en el Inspector de diseño.
- Para cargar una superposición, haz clic en Load Overlay
, en la parte superior del Inspector de diseño. Se escalará la superposición para que se adapte al diseño. - Para ajustar la transparencia de la superposición, usa el control deslizante Overlay Alpha.
- Para quitar la superposición, haz clic en Clear Overlay
.
Inspector de diseño en vivo
El Inspector de diseño en vivo proporciona estadísticas completas y en tiempo real sobre la IU de tu app mientras se implementa en un dispositivo o emulador que ejecuta la API nivel 29 o superior.
Para habilitar el Inspector de diseño en vivo, ve a File > Settings > Experimental y marca la casilla junto a Enable Live Layout Inspector. Luego, haz clic en la casilla de verificación junto a Live updates sobre la pantalla de diseño.
El Inspector de diseño en vivo incluye una jerarquía de diseño dinámico, que actualiza el árbol de componentes y la pantalla de diseño como vistas en el cambio de dispositivo.
Además, la pila de resolución de valores de propiedad te permite investigar dónde se origina un valor de propiedad de recurso en el código fuente y navegar a su ubicación siguiendo los hipervínculos en el panel de propiedades.
Figura 2: Valores de propiedad en el panel Atributos con hipervínculos a las definiciones de propiedades.
Por último, la pantalla de diseño incluye una visualización 3D avanzada de la jerarquía de vistas de tu app en el tiempo de ejecución. Para usar esta función, en la ventana del Inspector de diseños en vivo, simplemente haz clic en el diseño y, para rotarlo, arrastra el mouse. Para expandir o contraer las capas del diseño, usa el control deslizante Layer Spacing.
Figura 3: Vista 3D rotada de un diseño.
Validación de diseño
La Validación de diseño es una herramienta visual que te permite obtener una vista previa simultánea de los diseños en dispositivos y configuraciones de pantalla diferentes, lo que puede ayudar a detectar problemas en tus diseños al comienzo del proceso. Para acceder a esta función, haz clic en la pestaña Layout Validation, en la esquina superior derecha de la ventana del IDE:
Figura 4: Pestaña de Validación de diseño
Para alternar entre los conjuntos de configuración disponibles, selecciona una de las siguientes opciones del menú desplegable Reference Devices en la parte superior de la ventana de Validación de diseño:
- Dispositivos de referencia
- Personalizado
- Color Blind
- Font Sizes
Figura 5: Opción Reference Devices del menú desplegable
Reference Devices
Los dispositivos de referencia son un conjunto de dispositivos que recomendamos para hacer pruebas. Incluyen interfaces de teléfonos, dispositivos plegable, tablets y computadoras de escritorio. Debes obtener una vista previa de cómo aparece tu diseño en este conjunto de dispositivos de referencia:
Figura 6: Vistas previas de los dispositivos de referencia en la herramienta Validación de diseño
Personalizado
Para personalizar la configuración de la pantalla de la vista previa, elige entre una variedad de configuraciones, como el idioma, el dispositivo o la orientación de la pantalla:
Figura 7: Cómo configurar una pantalla personalizada en la herramienta Validación de diseño
Color Blind
Para que tu app sea más accesible para los usuarios con daltonismo, valida tu diseño con simulaciones de tipos frecuentes de esta afección:
Figura 8: Vistas previas de simulación de daltonismo en la herramienta de Validación de diseño
Font Sizes
Prueba tus diseños con fuentes más grandes para validar tus diseños en varios tamaños de fuente y mejorar la accesibilidad de tu app para los usuarios con discapacidad visual:
Figura 9: Vistas previas de los tamaños de fuente variables en la herramienta Validación de diseño
Captura instantáneas de jerarquía de diseño
El Inspector de diseño te permite guardar instantáneas de la jerarquía de diseño de tu app en ejecución para que puedas compartirlas fácilmente con otras personas o consultarlas más adelante.
Las instantáneas capturan los datos que normalmente verías cuando usas el Inspector de diseño, lo que incluye una renderización 3D detallada del diseño; el árbol de componentes de la vista, de Compose o de un diseño híbrido; y atributos detallados de cada componente de la IU. Para guardar una instantánea, haz lo siguiente:
- Abre el Inspector de diseño.
- El Inspector de diseño debería conectarse al proceso de tu app automáticamente. De lo contrario, selecciona el proceso de la app en el menú desplegable.
- Cuando quieras capturar una instantánea, haz clic en Export snapshot
en la barra de herramientas del Inspector de diseño. - En el cuadro de diálogo del sistema que aparece, especifica el nombre con el que quieres guardar la instantánea y su ubicación. Asegúrate de guardar el archivo con una extensión
*.li.
Luego, para cargar una instantánea del Inspector de diseño, selecciona File > Open en la barra de menú principal y abre un archivo *.li.
Figura 10: Instantánea del Inspector de diseño para la app de ejemplo de Sunflower
Inspecciona la semántica de Compose
En Compose, Semantics describe la IU de una manera alternativa que pueden comprender los servicios de accesibilidad y el framework de prueba. Puedes usar el Inspector de diseño para inspeccionar información semántica en los diseños de Compose.
Figura 11: Información semántica que se muestra con el Inspector de diseño
Cuando selecciones un nodo de Compose, usa la ventana Attributes para verificar si declara información semántica directamente, si combina las semánticas de sus elementos secundarios, o si realiza ambas. Para identificar en menos tiempo qué nodos incluyen semántica, ya sea declarada o combinada, selecciona el menú desplegable View options en la ventana Component Tree y selecciona Highlight Semantics Layers. Esto destaca solo los nodos del árbol que incluyen semántica, y puedes usar el teclado para navegar entre ellos con rapidez.