El Inspector de diseño de Android Studio te permite depurar el diseño de tu app mostrando una jerarquía de vistas en la que puedes inspeccionar las propiedades de cada vista. Con el Inspector de diseño, puedes comparar el diseño de tu app con modelos de diseños, mostrar una vista ampliada o en 3D de la app y examinar los detalles de su diseño en el tiempo de ejecución. Esto resulta útil, en especial, cuando tu diseño se compila durante el tiempo de ejecución, en lugar de hacerlo por completo en XML y el diseño se comporta de forma inesperada.
Comenzar
Para iniciar el Inspector de diseño, ejecuta tu app, ve a la ventana Running Devices y haz clic en Toggle Layout Inspector 
.
Si alternas entre varios dispositivos o proyectos, el Inspector de diseño se conectará automáticamente a los procesos depurables que se ejecutan en primer plano en el dispositivo conectado.
A continuación, te mostramos cómo realizar algunas tareas comunes:
- Para ver la jerarquía e inspeccionar las propiedades de cada vista, usa las ventanas de herramientas Component Tree y Attributes. Es posible que el Inspector de diseño requiera que reinicies la actividad para acceder a los atributos. Para obtener más información, consulta Cómo evitar que se reinicie la actividad.
- Para seleccionar vistas con un solo clic directamente en las vistas o hacer doble clic en las vistas para navegar al código, habilita Toggle Deep Inspect
. - Para interactuar con la app, inhabilita Toggle Deep Inspect .
- Para inspeccionar los dispositivos físicos, habilita la duplicación de dispositivos.
- Para habilitar las actualizaciones en tiempo real mientras actualizas la IU de tu app, comprueba que Ediciones en vivo esté habilitada.
- Para usar el modo 3D, toma una instantánea del Inspector de diseño
y, luego, haz clic en Modo 3D 
.
Cómo seleccionar o aislar una vista
Una vista suele mostrar un elemento que el usuario puede ver y con el que puede interactuar. Component Tree muestra la jerarquía de tu app en tiempo real con cada componente de la vista, lo que te ayuda a depurar el diseño, ya que puedes visualizar los elementos dentro de la app y los valores asociados a ellos.
Para seleccionar una vista, haz clic en ella, en Component Tree o Layout Display. Todos los atributos de diseño de la vista seleccionada aparecen en el panel Attributes.
Si tu diseño incluye vistas superpuestas, puedes ver todas las vistas de una región haciendo clic con el botón derecho en el modo Deep Inspect . Para seleccionar una vista que no está al frente, haz clic en ella en Component Tree o rota el diseño.
Para trabajar con diseños complejos, puedes aislar vistas individuales de manera que solo un subconjunto del diseño se muestre en Component Tree y se procese en Layout Display. Para aislar una vista, toma una instantánea , haz clic con el botón derecho en la vista en Component Tree y selecciona Show Only Subtree o Show Only Parent. Para regresar a la vista completa, haz clic con el botón derecho en la vista y selecciona Mostrar todo. Debes tomar una instantánea antes de aislar una vista.
Cómo ocultar bordes de diseño y ver etiquetas
Para ocultar el cuadro delimitador o ver las etiquetas de un elemento de diseño, haz clic en View Options 
, en la parte superior de Layout Display, y activa o desactiva Show Borders o Show View Label.
Cómo capturar 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 con otras personas o consultarlas más tarde.
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 clic en Snapshot Export/Import
y, luego, Export Snapshot.
Para cargar una instantánea del Inspector de diseño guardada anteriormente, haz clic en Import Snapshot.
Modo 3D
Layout Display 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, toma una instantánea , haz clic en el botón de modo 3D en la ventana del Inspector de instantáneas y arrastra el mouse para rotarla.
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, selecciona la opción Load Overlay
en la barra de herramientas del Inspector de diseño. La superposición se ajusta para adaptarse 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.
Cómo inspeccionar Compose
El Inspector de diseño te permite inspeccionar un diseño de Compose dentro de la app en ejecución en un emulador o dispositivo físico. Puedes usar el Inspector de diseño para verificar con qué frecuencia se recompone o se omite un elemento componible, lo que puede ayudar a identificar problemas con tu app. Por ejemplo, algunos errores de codificación podrían hacer que la IU se recomponga en exceso, lo que puede causar un rendimiento deficiente. Algunos errores de codificación pueden evitar que se recomponga la IU y, por lo tanto, evitar que los cambios de la IU se muestren en la pantalla.
Más información sobre el Inspector de diseño para Compose
Cómo evitar que se reinicie la actividad
El Inspector de diseño requiere uno de los siguientes parámetros de configuración global para funcionar de manera correcta. Si no especificas una configuración global, el Inspector de diseño la configurará automáticamente.
adb shell settings put global debug_view_attributes_application_package <processname>Esta opción genera información adicional para la inspección del proceso especificado.
adb shell settings put global debug_view_attributes 1Esta opción genera información adicional para la inspección de todos los procesos del dispositivo.
Si cambias una configuración global, es posible que se reinicie la actividad. Para evitar que se reinicie una actividad, puedes cambiar la configuración en Android Studio o las Opciones para desarrolladores en la configuración del dispositivo.
Para habilitar la actualización automática en Android Studio, abre Run/Debug Configurations. Para ello, selecciona Run > Edit Configurations en el menú. Luego, navega a la pestaña Miscellaneous y marca el cuadro Connect to Layout Inspector without restarting activity en Layout Inspector Options.
Como alternativa, habilita las opciones para desarrolladores de tu dispositivo y, luego, activa Habilitar inspección de atributos de vista en la configuración para desarrolladores del dispositivo.
Inspector de diseño independiente
Para obtener un rendimiento óptimo, te recomendamos que uses el Inspector de diseño en su modo incorporado predeterminado. Si deseas eliminar la incorporación del Inspector de diseño, ve a File (Android Studio en macOS)> Settings > Tools > Layout Inspector y desmarca la casilla de verificación Enable Embed Layout Inspector.
En el modo independiente, habilita las actualizaciones en tiempo real haciendo clic en la opción Live Updates
de la barra de herramientas del Inspector de diseño.