Native Layout Inspection with Android Emulators and Devices

Story

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.

How

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

settingsOption

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.

layoutBounds

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.

Result

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

Screenshot_1520049791

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s