ba6ba / draftsman

Draftsman is an on device layout inspector which can be embedded in your android app.

Draftsman

Draftsman is an on-device layout inspector for Android apps. It allows you to view various properties of rendered Android Views such as width, height, class name, paddings, margins etc.

Draftsman aims to combine capabilities of different Android tools such as Show Layout Bounds and Android Studio's layout inspector.

The primary objective of Draftsman is to provide information around rendered views directly from your app which is easily accessible to devs, designers, PMs or any one who has installed the app. No need to use any external tool or rely on debug variant of your app.

Features

• Width & Height Info for any view

• Class name for any view

• Margin and Padding visualization

• Dimension values in both Pixel(Px) and dp/sp

• TextView color and size information

• Overlay a grid

• Overlay a image to compare UI

Check usage guide at bottom for more details.

Integration

Add following code to your build.gradle

repositories {
  mavenCentral()
}

dependencies {
  implementation "com.gojek.draftsman:draftsman:x.y.z"
}

To enable Draftsman in an activity

Draftsman.install(activity)

To exit from Draftsman, there is an exit button in information window. And if you want do it programmatically, you can call

Draftsman.uninstall(activity)

Usage Guide

This section will help you understand what information Draftsman can capture from a view.

This is our base view

When Draftsman is enabled

This is how our view looks like once Draftsman is enabled. Inspectable views are highlighted and a arrow appears on right to open drawer.

Draftsman Setting Drawer

You can use this drawer to customise a few settings.

TextView Inspection

On tapping of first text "Hi Folks" we can observe this overlay. It provides information on height, width, textsize and textcolor. Dimensions can be observed in dp or px.

Inspection details overlay can be closed using cross icon and Draftsman can be closed by pressing Exit button.

View Inspection

Any arbitrary view can be inspected as well allowing us to inspect height, width and class name

Margin and Padding

Tapping around views highlights margins and paddings if available. Padding is shown with green background and margin with red line.

Nested Views

If there are multiple views stacked within same bounds, Draftsman will prompt you to select the view to be inspected

Grid Overlay

You can also add a size configurable grid overlay on your screen from setting drawer.

Image Overlay

You can also overlay a screenshot on top of existing screen to check for UI differences. A slider on bottom can be used to fade out overlay image.

Note: Storage read permission should be provided for this to work.