9.2. Sunflower

Veamos a continuación cómo podemos utilizar la herramienta Layout Inspector. Hagamos la prueba en una aplicación completa con una interfaz compleja, como, por
ejemplo, Sunflower, de Google, que podemos encontrar en GitHub.

1. Descargamos el proyecto o lo clonamos desde el repositorio, y lo abrimos en Android Studio.
2. Compilamos y lanzamos la aplicación a un emulador o dispositivo.
3. Navega por la aplicación para tener una idea de cómo funciona.
4. Vuelve a Android Studio, y haz clic en la opción de menú Tools > Layout Inspector. Puede que aparezca el diálogo Choose Process; si es así, selecciona el proceso de la app que desees inspeccionar y haz clic en OK.
5. Es posible que no se muestre el diálogo si Sunflower es la única aplicación depurable arrancada en ese momento en el emulador o terminal.
6. Verás una pantalla como la que mostramos a continuación:

Podemos observar los diferentes paneles del Layout Inspector:

1. Component Tree o árbol de vistas: muestra la lista jerárquica de vistas y componentes gráficos que componen el layout.
2. Layout Display o visor de pantalla: renderiza el layout tal como se ve en la pantalla del terminal o emulador, señalando además los límites de cada componente. Es una especie de captura de pantalla de lo que muestra el dispositivo en un momento dado.
3. Layout Inspector toolbar o barra de herramientas del inspector: presenta algunas herramientas disponibles para analizar el layout.
4. Attributes o tabla de propiedades: muestra las propiedades gráficas del componente seleccionado actualmente.

Puedes seleccionar cualquier componente gráfico haciendo clic sobre él, tanto en el árbol de vistas como en el visor de pantalla. En ese momento se mostrarán los atributos de la vista en la tabla de propiedades. Si quisieras seleccionar una vista que esté bajo otro componente, podrías hacer clic sobre ella en el árbol de vistas, o rotando el layout en el visor de pantalla y haciendo luego clic sobre la vista. La rotación permite una visión 3D de la superposición de las vistas una encima de otra, lo que puede resultar muy útil para depurar y diseñar la interfaz gráfica: