Quick aside on how Layout Inspector works

Layout Inspector captures view information from an Android application screen by issue a command through ADB to tell the root view to dump its view tree and all properties of itself and child views.

The view properties are grouped into categories:

Categories of view properties with the events category expanded.

Code can be found under the tools/base repo of the Android codebase in the layoutinspector module.

For features of Layout Inspector please read the documentation.

Native Android

Reddit is fun (download the .li file here)

Let’s start with looking at an normal Android app to get similar with Layout Inspector.

The basic structure of an Android Window

The View tree on the left shows the view hierarchy. The root view is always a DecorView which hold the window’s background drawables. You can find more info in Romain Guy’s blog post.

The DecorView’s children is a LinearLayout that contains the FrameLayout which houses the UI of the application.

You can also see the navigationBarBackground and statusBarBackground which are the bottom and top bars respectively.

React Native

OpenSports (download the .li file here)

Layout Inspector view of the Open Sports app made with React Native.

React Native allows developers to write declarative JavaScript in the form of JSX which the framework turns display calls that gets passed to the UI thread on Android to render.

Every view in React Native seems to have an unique resource id associated with it. The UI elements are all React implementations that inherit from the Android base class. Example ReactTextView extends Android’s TextView class.

Flutter

Hamilton App (download the .li file here)

All content is rendered using FlutterView

The only view under content is FlutterView which uses SurfaceView to do its drawing. So Layout Inspector doesn’t see any view details as Flutter does its own rendering that does not reuse Android view elements.

This is what the app UI looks like for the view tree captured above:

The Hamilton app, written using Flutter.

Unity

Zynga Poker (download the .li file here)

UnityPlayer which also uses a SurfaceView for rendering

Similar to Flutter, we see the same usage of SurfaceView to do all the drawing in Unity.

A view in the Zynga Poker app.

Litho

Facebook’s Litho Sample (download the .li file here)

Litho implementation of Android view elements

Litho is a declarative UI framework by Facebook for Android. Internally it uses LithoView elements to render the UI and moves measure/layout steps onto the background thread for asynchronous layout.

Litho View components are Android views so Layout Inspector is able to capture view information.

Update: The above statement is not fully correctly. Litho will use both Views and Drawables. The ComponentHost nodes in the tree above are Drawables and layout is still done using Yoga (FB’s open source Flexbox library). Thanks to jensdors on reddit for the clarification.

Screen cap of the Litho app.

Xamarin

Xamarain Demo App (download the .li file here)

Normal Android View elements

Xamarin is a cross platform app solution by Microsoft using .Net. Surprisingly even through it uses shared code across all three platforms, the Android app actually uses a lot of Android views. It looks like Xamarin internally will translate the .Net code to render using native elements on each platform.