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.