Illustration of a magnifying glass on a computer screen.

Layout Inspector

Debugging UI hierarchies in Android Studio 4.0+

Murat Yener
Mar 31, 2020 · 5 min read

Debugging UI issues can be tricky. Android Studio 4.0 comes with an updated Layout Inspector that lets you debug your Android app UI (user interface) in a way that’s similar to Chrome dev tools. You can read along or if you prefer you can watch the video.

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 the Layout Inspector works. To open the Layout Inspector click View and select Layout Inspector under the Tool Windows menu. This opens the Layout Inspector window.

Open the Layout Inspector from the View menu
Open the Layout Inspector from the View menu

The Layout Inspector only displays a UI hierarchy from a running process. This means you need to connect to a debuggable running app on a device or on an emulator. There are two ways to do this:

  • If you don’t have a running process, connect to a device or start an Android Emulator instance and click run to start the app.
  • If you have a running app process, click on select process, select your running device, and select your running app from the list under the selected running device.

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 two ways: in the usual 2D outline format, or in a 3D view called rotation mode.

Click rotation button to switch to rotation (3D) mode
Click rotation button to switch to rotation (3D) mode

Clicking the rotation button switches between the 2D and 3D view of the UI hierarchy. Clicking the rotation button switches between the two modes. When 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 above.

You can also select a 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 of 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 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 a 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.

Layout Inspector in Action

So far, we’ve seen how the Layout Inspector works, Now 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 reading the post, follow the steps below first.

  1. Open Android Studio 4.0 and select New Project from File menu.
  2. Select Bottom Navigation Activity, click Next and click Finish.
  3. Replace contents of activity_main.xml and fragment_home.xml.
  4. Replace contents of HomeFragment.kt.

When you run the app, you’ll see a cute android — but there is something missing: the bottom navigation tabs. Looking at the layout file, we can verify that the bottom navigation view is present, but somehow it does not appear on the screen.

The bottom navigation tabs are not displayed
The bottom navigation tabs are not displayed

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.

Inspecting the app in rotation reveals that the navigation tabs are pushed out of screen
Inspecting the app in rotation reveals that the navigation tabs are pushed out of screen

What we see first is that the toolbar is laid out inside the LinearLayout, which is followed by the navigation host. Below that, you 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. 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:

The navigation tabs are not in the right place
The navigation tabs are not in the right place

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 constraint layout instead of linear layout but switching layouts is beyond the scope of this post. So let’s add layout weights:

And here is the result:

The navigation bar is displayed in the right location
The navigation bar is displayed in the right location

Voila! Now when we run the app, everything is in the right place.

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 issues you have or features that you would like to see.

Android Developers

The official Android Developers publication on Medium

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store