Debugging UI issues can be tricky.
Android Studio 4.0 comes with an updated Layout Inspector
that lets you debug your Android app UI
in way that's similar to Chrome Dev tools.
I'm Murat Yener, a developer advocate in Android DevRel
and today I'll be talking about the new Layout Inspector.
The Layout Inspector works with your device or the Android emulator
and displays the current view hierarchy.
This helps pinpoint issues and discover the root causes.
Unlike the previous version, the updated Layout Inspector
can show the view hierarchy in a 3D perspective
which lets you visually see how views are laid out.
With this, you can inspect the view hierarchy in layers.
It also shows all the view's attributes
including those inherited from its parents.
Let's see how the latest version of Layout Inspector works.
To open the Layout Inspector, click View
and select Layout Inspector under the Tool Windows menu.
The Layout Inspector only displays the UI hierarchy
from a running process.
This means you need to connect to a debuggable running app
on a device or on an emulator.
To start using the Layout Inspector
connect to a device or start an Android emulator instance
and click Run to start the app.
When your app runs, click on Select Process.
Select your running device
and select your running app from the list.
After you select your app process
the Layout Inspector creates a snapshot of the current UI hierarchy.
If you select the Live updates option
the snapshot is dynamically updated
as you interact with the app on the device.
This version of the Layout Inspector resembles the previous version
but offers much more capability.
To start with, the Layout Inspector can display the UI hierarchy in two ways.
In the usual 2D outline format
or in the 3D view called rotation mode.
Clicking the Rotation button switches
between the 2D and 3D view of the UI hierarchy.
While you are in rotation mode
you can rotate the image of the UI hierarchy.
Rotation helps you see how views are laid out.
Note that rotation is only available on devices API level 29 and about.
You can also select the view
and right-click to display only its children.
Similarly, you can display the parents of a selected view.
The pane on the right displays all the declared and inherited attributes
of the selected view.
You can navigate to the layout's corresponding XML file
by clicking the link below any declared property.
Like the rotation feature
this only works on devices running the API level 29 or higher.
With the Layout Inspector, you can also load a new design
and compare it to your current UI.
To load a design, click Load Overlay and select the design.
After the image loads
you can change the alpha value of the overlay
to see the difference between the current layout and the design.
Now that we've seen the new features of Layout Inspector
let's see how it can help solve app issues.
Here we have a simple sample app
which consists of a fragment with some static content of text
and an image.
If you want to try along while you watch
you can find the code snippets linked below.
When we're on the app, we'll see a cute Android.
But there is something missing.
The bottom navigation tabs.
Looking at the layout file
I can verify the bottom navigation view is present.
But some of it does not appear on the screen.
This looks like a good opportunity to try out the Layout Inspector.
Let's run the app and inspect this issue.
Switching to rotation view after connecting to the app process
reveals that there are problems with the app UI.
What we see first is that the toolbar is laid out
inside the linear layout, which is followed by the navigation host.
Below that, you'll see the navigation tabs
at the very bottom.
It looks like the bottom bar is pushed off the screen.
Maybe the size of the navigation host is wrong.
Let's try setting the navigation host's height to wrap_content.
Switching back to Layout Inspector
you can see that the linear layout has the correct size
but the bottom navigation tabs are not placed at the correct position.
There are different ways to fix this.
We can add layout weights to the navigation host
and the bottom navigation tabs
or we can switch to using constrained layout
instead of linear layout.
Let's set layout weights for a quick fix and see the result.
Voila!
Now when we run the app, everything is in the right place.
Layout Inspector can help you debug UI issues and save time.
Try out the new features of the Layout Inspector
and let us know what you think.
We are always looking to hear what you like
as well as the issues you have
or features you would like to see.
See you next time.