Android studio legacy layout inspector

This page is deprecated.

The Layout Inspector in Android Studio allows you to inspect your app’s view hierarchy at runtime from within the Android Studio IDE. This is particularly useful when your layout is built at runtime rather than being defined entirely in an XML layout.

The Layout Inspector available in Android Studio 2.2 is an early release. It’s a work in progress that will supersede the Hierarchy Viewer tool once it is feature complete. For now, it provides a quick solution to inspect the view properties of your layout without leaving the IDE.

To open the Layout Inspector, first launch your app on a connected device or emulator. Then open Android Monitor window, select your device and app process, and then click Layout Inspector . You can also open it by clicking Tools > Android > Layout Inspector in the menu bar.

Layout Inspector currently provides just a snapshot of the layout at the time you open the tool. The left pane shows the view hierarchy as a list, the center pane shows a screenshot of the layout, and the right pane shows all the properties for the selected view.

Clicking a view in the hierarchy list highlights the same view in the screenshot, and vice versa.

If your layout includes overlapping views, then by default, only the view in front is clickable in the screenshot. To make the view behind clickable in the screenshot: Right-click the in-front view in the view hierarchy and uncheck Show in preview .

If you’re debugging your app or simply interacting with it, you must open a new instance of the Layout Inspector to grab a new snapshot showing the layout changes. Each snapshot is saved in a separate .li file at projec

Источник

Layout Inspector

Debugging UI hierarchies in Android Studio 4.0+

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.

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.

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.

Open Android Studio 4.0 and select New Project from File menu.
Select Bottom Navigation Activity, click Next and click Finish.
Replace contents of activity_main.xml and fragment_home.xml.
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.

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 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:

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:

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.

Источник

Layout Inspector in 2021

The article was updated on 17 February 2021. The original article was published on 6 August 2020.

Let’s explore this tool with the ability to do UI debugging and analysis of the User Interface for UI testing. The «Layout Inspector» is a part of Android Studio; this means that you cannot run it as a standalone application. You can run it via the «Tools / Layout Inspector» menu.

This tool allows us to analyze different applications; however, it depends on the permissions of the device or emulator. We can analyze any app if the device has root permissions; otherwise, we can only explore debug versions of applications (usually these are apps we are developing). An Android emulator without Google Play Services delivered with ROOT permissions; this means that we can explore any application on these emulators. However, we can only analyze debug versions of apps installed on any device or emulator without ROOT permissions.

Note: Layout Inspector from this tutorial is available in Android Studio 4.1.2 or higher.

Let’s run «Layout Inspector» and take a look at the User Interface of this tool. The first step is to «Select Process» ( ) to analyze the UI from the «Layout Inspector» window.

When a snapshot of the application’s UI is created, you will see the View Hierarchy, Layout Preview, and Attributes panels.

Layout Inspector

Live Update

A new version of the «Layout Inspector» has a «Live Update» feature, which helps us see real-time changes to the app’s active screen. If we change the screen on the device or emulator, it will be automatically updated in the «Layout Inspector» tool. This feature is enabled by default (), but you can easily turn it off in the main window of «Layout Inspector».

This feature speeds up the analysis of different screens because we don’t need to «ask» about the new snapshot manually. However, we have one important drawback at the current version of Android Studio (4.1.2):

There is no possibility to save a captured snapshot with/without «Live Updates» features.

Pixel Perfectness

The «Layout Inspector» is not only a tool to analyze the UI of the application. We can also use it for «Pixel Perfectness» because the «overlay» feature is available in the Layout Inspector.

So, let’s take a look at this feature. The «overlay» feature allows us to compare the actual screen of the application with the design image. The «Load Overlay» ( ) button is available in the menu of «Layout Inspector».

So, I implemented a simple login screen and created a bit of a different design of the screen in Figma, to show how it works. Let’s compare the following three images:

Layout Inspector — the «overlay» feature

As you can see, when we take a look at the overlay, then all the Views in the screen should be arranged differently. When we load the overlay to the «Layout Inspector» we can also change the «Overlay Alpha» property, which is based near the «Load Overlay» button.

However, the current implementation of this tool has an issue:

There is no possibility to change the position of overlay; this can be a problem if your design image has no «Status Bar» or if your phone uses a different screen ratio.
There is no possibility to resize overlay image.

3D Visualization

In addition to all these features, we have the «3D Visualization» feature of Layout Inspector. It helps us to have a different representation of the layout for the application. We can see how many nested Views we have and how complex our UI is.

Layout Inspector — the «3D Visualization» feature

To activate the «3D visualization» mode, we use the «Rotate View» button ( ) at the bottom of the Inspector window.

Work with Resources

Resources are an essential part of any Android application because we use many margins, strings, drawables, etc. Often they are part of the «res»; folder, and we want to reuse the applications’ resources.

Analyzing Images

The Layout Inspector provides information about different types of drawables in the application.

Vector graphics (SVG)	Type: VectorDrawable
Raster images (PNG)	Type: BitmapDrawable fragment_coffee_drinks.xml:35
Image from a remote data source (in case of Picasso library)	Type: PicassoDrawable

As you can see, the current version of «Layout Inspector» works better than the previous one with raster image formats, like png. It can be helpful when you write UI tests or debug the UI of the application and you find any problem with a specific image.

Analyzing Strings

Let’s take a look at the situation with text attributes for different UI components because here, the situation is a bit more complicated than we have with images. Any string in the application can be used as a part of resources of the application (usually strings.xml file) or string with other data sources (hard-coded value in layout, code, or value from a specific file, like JSON). The «Layout Inspector» tool always provided access to a string representation of value, like «Login», «Espresso», etc. However, when we use Espresso based framework for testing, we can use the resources of the application ( R.string.action_login ) because it simplifies the migration of tests to different languages. So, we have access to the additional «text» information when we use strings from resources ( strings.xml ), and analyzed components don’t have internal components. Let’s analyze «View Hierarchy» for MaterialButton and TextInputLayout.

MaterialButton vs TextInputLayout

As you can see, the structure of the TextInputLayout is much more complicated than the structure of the MaterialButton. The «Layout Inspector» in the case of «Resource Id» works much better with components without an internal nested structure, because in the case of the MaterialButton we have access to additional information about «text» with link to strings.xml file, but in case of TextInputLayout, we have only access to the string value.

Analyzing Colors

The «Layout Inspector» has access to attributes that work with colors for different Views. When devs used colors from resources, we can have a link to resources and color in the following format ( #FFFFFF ). We can easily get access to the following properties which have links to resources:

Analyzing Margins and Paddings

We have access to margin and padding attributes using Layout Inspector; we have access to values in «dp» (Density-independent pixels). It can simplify debugging of UI of the application and verification app by QA engineers.

Sub-trees

The «Layout Inspector» allows us to interact with ViewTree and hide or show sub-trees; it can be helpful when we want to analyze only part of the UI. We can interact with View Tree via the «Component Tree» or «Live Preview» sections of Layout Inspector.

Layout Inspector — the «sub-tree» feature

Missing Features

Unfortunately, we did lose a few features, like saving snapshots of screens of the application. A new version of «Layout Inspector» is already a great iteration of the previous solution, but I want to mention a few possible improvements that right now are missing:

Configuration of attributes (We don’t have the possibility to create our own list of attributes; this will be helpful for collecting data for UI tests);
Copy attribute values (We cannot copy attribute values, but it was possible in the previous version of Layout Inspector, and it’s possible in UIAutomatorViewer);
Snapshots of the screen (We cannot create a snapshot of the screen without the «Live Updates» feature).

Summary

The current version of the «Layout Inspector» has many improvements, especially for working with resources. It can be helpful for debugging the UI of the application or collecting information before or during writing UI tests. In addition to it, we can do «Pixel Perfectness» with Android Studio without additional tools. It can be helpful for developers and QA engineers.

Источник