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ño, 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: El Inspector de diseño
Cómo seleccionar 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.
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:
Para alternar entre los conjuntos de configuración disponibles, selecciona una de las siguientes opciones del menú desplegable en la parte superior de la ventana de Validación de diseño:
- Pixel Devices
- Custom
- Color Blind
- Font Sizes
Dispositivos Pixel
Obtén una vista previa de cómo aparece tu diseño en los dispositivos Pixel:
Figura 4: Vistas previas de los dispositivos Pixel en la herramienta Validación de diseño
Custom
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 5: 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 6: Vistas previas de simulación de daltonismo en la herramienta 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 7: Vistas previas de los tamaños de fuente variables en la herramienta Validación de diseño