https://github.com/gojek/draftsman
Draftsman is an on device layout inspector which can be embedded in your android app.
https://github.com/gojek/draftsman
android kotlin-android ux-ui
Last synced: 16 days ago
JSON representation
Draftsman is an on device layout inspector which can be embedded in your android app.
- Host: GitHub
- URL: https://github.com/gojek/draftsman
- Owner: gojek
- License: apache-2.0
- Created: 2022-02-09T09:22:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-20T19:08:46.000Z (about 2 years ago)
- Last Synced: 2025-04-03T00:04:22.503Z (23 days ago)
- Topics: android, kotlin-android, ux-ui
- Language: Kotlin
- Homepage:
- Size: 612 KB
- Stars: 255
- Watchers: 5
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
[](https://search.maven.org/search?q=g:%22com.gojek.draftsman%22%20AND%20a:%22draftsman%22)
Add following code to your build.gradle
```groovy
repositories {
mavenCentral()
}
dependencies {
implementation "com.gojek.draftsman:draftsman:x.y.z"
}
```
To enable Draftsman in an activity
```kotlin
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
```kotlin
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.
