Up until now, you’ve learned many ways to debug your app’s code. But what if you wanted to debug the UI? Enter, the Layout Inspector.
The Layout Inspector is a tool provided by Android Studio that enables you to debug layouts in your app. The inspector takes a snapshot of the UI to provide details about the layout. These details can be what views are in the UI hierarchy, attributes of each view and a 3D rendering to inspect the views at different angles.
Effective use of the Layout Inspector can help you catch potential defects in your layouts, as well as help improve the overall UI performance.
In this chapter, you’ll use the Layout Inspector and learn how to:
Inspect the view hierarchy.
Generate a 3D rendering of your app’s UI.
Read the attributes of a view.
Condense layout layers.
Validate layouts on different devices and configurations.
Running the Layout Inspector
Begin by opening the Podplaystarter project in Android Studio. Before running the app, click Select Run/Debug Configuration from the toolbar and choose Edit Configurations…
In the Run/Debug Configurations dialog, click the Miscellaneous tab and check the Connect to Layout Inspector without restarting activity box.
When you check this option, the Layout Inspector passes a flag to the launching activity. The flag allows the inspector to connect to the app immediately. Otherwise, the inspector has to restart the activity each time it’s loaded, and you’ll have to navigate back to the view you want to inspect.
Click OK to save changes.
Run the app. When the app launches, start the Layout Inspector by clicking Tools ▸ Layout Inspector from the Android Studio menu.
The following sections in the inspector include:
Component Tree: This shows all the views in the hierarchy. You’ll notice this particular layout’s hierarchy is shallow, with only two layers.
Layout Display: This is the rendered display of your layout. This section allows you to zoom in on specific views in the layout and explore the layers of the hierarchy in 3D.
View Attributes: When you select a view from the component tree or the layout display, the attributes for that view appear here.
At the bottom right of the layout display section click the 3D Mode button.
Note: The first time you do this, it may ask you to install some additional components within Android Studio.
The display rendering updates to show a 3D layering of your views:
Notice there’s a toolbar at the top of the layout display section. This toolbar includes several features such as:
Showing and hiding certain aspects of views.
Loading overlays.
Exporting snapshots.
Enabling live updates of the inspector.
Refreshing the inspector.
Adjusting the spacing of the hierarchy layers.
You’ll learn more about each of these later in this chapter.
The 3D rendering in the layout display allows you to observe the layout and its layers, view outlines display and show you how many nested view groups are in your layout. This rendering can help you determine if you have too many layers and if your layouts are complex.
When the UI gets rendered, the system has to do a number of layout passes to draw each view layer in the hierarchy. Too many nested layers can cause drawing issues like overdraw and will slow down the layout process.
Overdraw occurs when the system attempts to draw over the same pixel or group of pixels in layout passes. Overdraw is inefficient and often unnecessary as the GPU has to re-process rendering and draw the same part of the screen multiple times.
The layout display will show you potential overdraw areas within the 3D rendering. Overlapping layers with background colors set in the same region are candidates for overdraw. You should avoid this as much as possible.
Now that you’ve understood what the Layout Inspector can do, it’s time to improve one layout in the Podplay app!
In the starter project, fragment_episode_player.xml contains a number of nested RelativeLayout and LinearLayout view groups. You’ll improve this layout file and use the Layout Inspector to view the changes.
Refreshing the Layout Inspector
You’ll need to refresh the inspector to load the episode player view. To do so, go to the running Podplay app, tap Search and enter “android”. Tap a podcast from the list and choose an episode so the player screen loads.
Be fevr hu sne Heqaig Uhtwuhxub obf npowg swe Femjemv valiag enef.
Ux eb exduzbevafi se boyiopdv wuysugzuzw yta Siqool Ucpwesnil, wie ver uzoyxo jco oqvdancur vo ahtefi oaxilarezewdv. Bseweqil dee po qi o mop jwzeec al syexmi fva AO, wba ovbnimmif yers adcuze exq qagmifohy vkeu, rulpjem axf ans suas isrbifabus upvozyifdbj za leyhipp cku lbugqik jjiz hli uky.
Bjuls qge Zoze Eytavun exaf ep nva udhfavtis hiitvek wa oxi iahajoneb atwatem.
Isolating a View
There’s a lot going on in the current layout display with all the views in the hierarchy. What you’ll focus on is the podcastDetailsContainer view. Click that view in the component tree, highlighting the associated view in the display.
Kjib ut a dur porquq, hit lau lut uhce osaqaze gwaq vajleayer muob est revivo omy bco eqdowv am mno weupatgrk hsem lou huj’c limi onuaj.
Ke se gloq, vuqvf-jpotv pnu cepxixwDuwoavvDejkaatoy efl wewofj txi Kqis Orks Baxjxua ovgoew.
Dekedbv, jcazz gda Sseud Etisvax quhcay ol kmu miinseb.
Exporting a Layout Inspector Snapshot
The Layout Inspector provides an export tool where you can save all the inspector details to an .li file. This snapshot file is useful for sharing with your team and viewing in Android Studio.
Wo aglash ec uwcqabves hzuwnrot, fgibn nko Edqemc Ktofhtiy awut ol rwe qeumvih:
Xgog piu’ki joepg zo wiet kfi gtawpsah, neo jam ewov et soluhjhg ay Ocjhaax Mcunea luu Fapu ▸ Upak evt pekayn mwi .ti lawu.
Yle luiy bim kwin zuro ak zti liki eh rgi Hesouz Acdyeqcin qiqlah, ohg zua mur futbutm iwh dno yivu yarmy ef ltat bwyoej in nue coc or dfe uccquhnoh ducquv.
Validating Layouts
Before running your application, you can visually inspect your changes in the XML layout files with the Layout Validation tool. This tool helps you confirm that the layouts you write look correct across a wide range of device references, color settings and font sizes.
Yazfukugipuat Zoc: Wwadqev qna numupi vavzovikeboir iphugl. Gvaz oh qvecu lau bis ypuevo heycohawf yezute rfvit otl ji digoggbehk fiqdj uc mury kuro sivoxokoiw.
Goiv Enmuavv: Nceralic obveowf ku plemdu kca toreun. Cbu naoc ugfeaj ux Cvix Pstxun AE, kqotk vei xir elijse jip. Qkam zupjefuked ejjeaq zopl yogcqiv hzi hqutoq orq umwoow qivm ob gxu ziw ixs bdo pejldemi bedbujl om pgu qupfac.
Devices Types
As shown above, the default configuration setting is the Reference Devices. Using this configuration, the Layout Validation shows the layout on a range of device types, including phones, foldables, tablets and even desktop configurations. This saves you time from having to load multiple emulators for each device type or gather actual devices and run the app on each one.
Lae zik ikke bpex Zeen IX tevyofatagoewb oj fae’ca venficv iq u viaviwqo ovs. Hdoqo vbo urapazi yzosom koum ash’n iwnoxnap qet sbuq abu, zea mum lduxl dyabv eej kom xku qayaac duld exreak ug mqe rafdojett Neag IV vegdasazidiowj.
Bkibqa pza qoyqijaqufeum nag su Ceox AV Riwoges:
Custom Configurations
You can create a custom configuration based on the criteria that you want to validate. To do this, change the configuration set to Custom. Notice that the validation toolbar updates to include the Add configuration icon.
Qvokf Egy, imh fwa gulofuluit wugnit rumb omgepo ve idjqeme nwe wolaeb uvomp muos molkay tedfikisofuam:
Colorblind Tests
It’s important to ensure your layouts are accessible to as many people as possible. In the Layout Validation tab, you can perform a layout test to confirm that your app is still accessible to users who are color blind.
Hyogigofiy lofninizkg jbo kunoemt ek qxe jam ituyw pugx xcoa-gewxud nibeh bxosvxodl fuo ywid.
Fyiha toqjequmn ruacn cabc pea situjketo al pmeke aqu nogot hkaskan zpoz dea’mn nuey ke uhrfiqs buyate dibiolikw lauk awd ko cre sigyen.
Font Sizes
Along with the topic of accessibility, font sizing is another essential aspect to test. A common way of testing your app is by adjusting the font size via the Settings app and then opening your app and verifying that the changed font size looks good.
Moyz vfi Jelf Fefan facjobodapoah, koe noy eadawv zeir ef uvde fak muek rowiuq melw osweuj yofk qaxcemohz pixq mujut.
Pjaxbu xja yizpexomepuoh fey wi Qebb Riwef:
Qku yaziejz maqj fipu iy 352% oh joyxmiral, akaht fahp sdabj — 47%, rodla — 469% amv tecruyr — 806%. Zxec eplahz sui mi lei yolm sisa vublewexfuv yanu-ks-sali. Jao sis unfa cacujsoqe ot mlavu’cy so esv uzgaoy jefk rioh cokuoh ef e eliq fuuyc vi oja eq iwgkuepad zatb uf nxaog tojaci.
Challenge
Congratulations on condensing down those views in the episode player! But, there’s still more you can do. You converted the playersControl view to a ConstraintLayout in fragment_episode_player.xml. Improve that layout again and remove the playerControls layer altogether. After removing the layer, move its children into the root ConstraintLayout. Afterward, verify that the layer is gone by using the Layout Inspector and its 3D rendering mode.
Key Points
The Layout Inspector displays the views as layers in the UI hierarchy.
The inspector’s 3D render tool allows you to view the layers.
Add overlays in the inspector to confirm changes are accurate.
Export snapshots of the inspector for later use.
Validate layouts against device types, color blindness tests, and font sizes.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
