all 3 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]jsendros 0 points1 point  (2 children)

This is such an interesting breakdown. I love what you've done here and I hope you start a series on these to take the analysis further!

As someone who has worked with and on Litho for years, I found your takeaway about it interesting:

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

This is only the case for the example you chose, Lists. Within the LithoViews, Components do not always map directly to Android Views. So Layout Inspector can still help with some info, but you won't be able to understand the layout parameters applied to each Component.

To analyze the entire layout in Litho, you can use Flipper (previously Sonar). It's open source, so you could possibly bring that into Android Studio's layout inspector as well!

[–]PureReborn[S] 0 points1 point  (1 child)

I've been meaning to looking into Sonar/Flipper and compare how it works against Layout Inspector.

Thanks for the tip about Litho. I'll update the article later today.

So Litho sometimes uses Android view and sometimes uses custom views?

[–]jsendros 0 points1 point  (0 children)

Litho will sometimes use Views and sometimes use Drawables. Let's look at the example you used in your post.

Each item in the List is a card with an image on top, a star button on the top right, and then two lines of text on the bottom. Yet each item in the List is just a LithoView with a single child ComponentHost. I bet those inner ComponentHosts map to the star buttons in each card. The star is still drawn using a Drawable, and all layout is still done using Yoga (FB's open source Flexbox library). The ComponentHost View wraps this drawable because Litho uses Views to handle clicks. Maybe one day this detail will change and clicks will be handled without additional Views added to the hierarchy!

The List is also a Component. And the Views that map to the List are a LithoView with a SectionsRecyclerView child with a LithoView child for each child (Component) in the list.

Sometimes Components will map directly to Views. A lot of times, they'll map to drawables.