Native Layout Inspection with Android Emulators and Devices


So you have an awesome layout in your app and some of your view components aren’t aligned correctly or seem to have weird margins. We’ve all been there, and while this tip is not going to let you fix that really quick. It will help you to visualize how the layout has been drawn using the native views. This is applicable to any UI built on Android, including: NativeScript, ReactNative, Xamarin, etc. Anything that renders native UI.

Tip: This works on all Android devices and emulators.


Open the emulator and navigate to the settings on the device. Then navigate to System.


You’ll need to make sure you have Developer mode enabled. If you do not have Developer mode enabled, then the typical approach is to open the System -- About device under the Settings and tap Build Version (or something at the bottom) a bunch of times, usually 7, this will enable Developer mode on the device.

Once you have Developer mode enabled on the device/emulator, go to the Developer menu. Scroll down until you see Show layout bounds as an option.


Enable it and viola! You now can see margins, boundaries, etc. for your entire layout. This works at the OS level so it can be distracting but very useful if you see something not lining up correctly when you think it should. You’ll be able to see that it has margin on it and then you know to track it down and fix the problem.


Once enabled, you’ll see the following inspection lines on all layouts.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s