Now where the hell is this piece of code?

Figure your way around the code-base in minutes instead of hours using Layout Inspector.

Trying to find code using comments be like..

Imagine you’re an intern and it is your first day on the codebase and your senior shows the below image and says..

Hey , change the edges of the individual RecyclerView list items so that they have no corner radius and hide the subtitle.

Now you know exactly what to do . You just have to find the place where the listitem xml is and remove its card corner radius. For the subtitle you just have to change the visibility of the subtitle to gone.

But once you open the code it’s in 20 modules and thousands lines of code. So

How do you find the peace of code?

You have to ask your seniors or painstakingly search the project or with string hints from the screen ( for example the “Search” text on the button in the present case .

What if i told you there is a better way…

Enter Layout Inspector

From the docs

The Layout Inspector in Android Studio allows you to compare your app layout with design mockups, display a magnified or 3D view of your app, and examine details of its layout at runtime.

Run your app on the emulator or physical device . Go to the bottom right of the screen and click on Layout Inspector or go to Tools>Layout Inspector

On clicking the Layout Inspector you are given an extensive view. (Point to note is it takes a bit of time and is very resource intensive so your activity on your emulator / physical device will refresh.)

You are shown an extensive window with a live preview of your layout. On the top left your project name( recipeproject) would be shown. If you’re not getting your layout on the screen this is the first place to check make sure your project name is selected.

Now lets take the condition where you wanna disappear the subtitle. You can see the id of the subtitle here (et_foodAuthor). Now it’s just a matter of Ctrl+Shift+F and search the id and take it from there.

… And they lived happily ever after …:D

But wait…..

Actual layouts are rarely this simple. There are multiple nested ViewGroups and layouts spanning the whole screen for overlays. So what can we do in these conditions .

Layout Inspector gives us some pretty handy tricks. You can select the view on the component tree and select either Hide Sub tree/ Show only Sub tree to isolate the view in the Layout Inspector.

And there you have it. The magic wand to find your way in the most spaghetti code

I’m new to writing blogs so a clap would be… Tasty!!!