How to Use Android’s Layout Inspector to Debug UI Issues on a Physical Device

Why you need Layout Inspector

When an app looks broken on a real device – overlapping buttons, missing text, or incorrect dimensions – the visual symptoms are easy to see, but the underlying cause is often hidden in the view hierarchy. Android Studio’s Layout Inspector streams the exact view tree from a connected device, letting you see every widget’s size, position, and constraints in real time. This eliminates guesswork, speeds up UI fixes, and avoids the need for costly trial‑and‑error recompiles.

Before you start

• Device preparation: Use a device running Android 5.0 (API 21) or newer. The feature works best on Android 8.0+ because it can capture live updates.
• Charge level: Keep the phone above 50 % or connect it to a charger. Layout Inspector streams a lot of data and can drain the battery quickly.
• Wi‑Fi vs. USB: While Wi‑Fi debugging is possible, a wired USB connection is more reliable and avoids latency.
• Backup: No data is modified by Layout Inspector, but it’s good practice to have a recent backup of your app’s data, especially if you plan to test UI changes that affect storage.

Step 1 – Install Android Studio

If you already have Android Studio, verify that it’s up to date: Help > Check for Updates (macOS: Android Studio > Check for Updates).

Step 2 – Enable USB debugging on the device

Note: Some manufacturers (e.g., Samsung, Xiaomi) hide Developer options under a sub‑menu called Software information or Additional settings. The steps above are a generic guide; adapt the path as needed.

Step 3 – Verify ADB connection

Successful ADB communication is the foundation for Layout Inspector.

Step 4 – Open your project in Android Studio

If the device does not appear, click the small refresh icon next to the device dropdown, or restart Android Studio after re‑plugging the USB cable.

Step 5 – Run the app on the device

Having the app already running is required because Layout Inspector captures the live UI of the foreground activity.

Step 6 – Launch Layout Inspector

The 3‑D view lets you rotate the hierarchy, making it easy to spot overlapping elements. The tree view shows each view’s class, ID, dimensions, and layout parameters.

Step 7 – Analyze the view hierarchy

• Inspect dimensions: Click any node in the tree. The right‑hand panel displays layout_width, layout_height, margin, and padding. Mismatched sizes often cause clipping.
• Check constraints: For ConstraintLayout, the inspector shows each constraint line (e.g., app:layout_constraintStart_toStartOf). Missing or circular constraints can lead to unexpected placement.
• Visibility flags: The visibility property (VISIBLE, INVISIBLE, GONE) is displayed. Accidentally setting a view to GONE can make UI elements disappear.
• Theme attributes: If a view uses a theme attribute (e.g., ?attr/colorPrimary), the inspector resolves it to the actual color value, helping you debug dark‑mode issues.

When you spot a problem – say a button is too narrow – note the offending view’s ID (e.g., @+id/submitBtn) and the layout parameters that need adjustment.

Step 8 – Make live edits (optional)

Android Studio’s Layout Inspector includes a Live Edit mode (available from Android Studio 2020.3.1 onward). This lets you modify certain attributes on the fly without rebuilding the app.

Live Edit works only for layout attributes that can be changed at runtime; anything requiring code changes (e.g., dynamic visibility logic) still needs a rebuild.

Step 9 – Capture screenshots for documentation

When you need to share a UI bug with a teammate, the inspector can export a screenshot with the hierarchy overlay:

Troubleshooting common issues

Device not listed in Layout Inspector

• Check USB mode: Ensure the phone is set to “File Transfer (MTP)” rather than “Charging only”.
• Restart ADB: Run adb kill-server && adb start-server in a terminal, then reconnect the device.
• Update platform‑tools: An outdated adb version can cause incompatibility. In Android Studio, go to SDK Manager > SDK Tools and install the latest “Android SDK Platform‑Tools”.

Layout Inspector shows a blank screen

• Make sure the app’s activity is in the foreground; background activities cannot be inspected.
• On Android 12+, the system restricts UI capture for apps that use FLAG_SECURE. If the target app sets this flag, Layout Inspector will display a black screen. You’ll need to disable the flag in the app’s code or test with a different app.

Live Edit does not apply changes

• Live Edit requires the app to be built in debug mode with the android:debuggable="true" manifest flag. Verify your build variant.
• Some layout attributes (e.g., layout_constraintHorizontal_bias) are not mutable at runtime. Edit the XML instead.

Best‑practice checklist

• Always keep a backup of the original layout XML before making large changes.
• Use descriptive IDs (@+id/btnSubmit) – they appear in the inspector and reduce confusion.
• When fixing constraints, enable Show Layout Bounds on the device (Settings > Developer options > Show layout bounds) to see the effect of your changes in real time.
• Document each UI fix with an exported screenshot; this helps reviewers understand the before/after state.

Wrapping up

Android Studio’s Layout Inspector turns a mysterious UI glitch into a concrete set of layout parameters you can edit, test, and commit. By following the steps above you’ll be able to connect any Android phone, capture a live view hierarchy, diagnose overlapping views or missing constraints, and even experiment with live edits before touching code. This workflow saves time, reduces guesswork, and makes collaboration with designers and QA engineers smoother.

Now you have a repeatable process for every UI issue you encounter – no rooting, no third‑party apps, just the official tooling that Google provides.