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
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.