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

Overview

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

Maven Central

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

draftsman-base.png

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

Draftsman Setting Drawer

You can use this drawer to customise a few settings.

draftsman-drawer.png

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.

draftsman-text.png

View Inspection

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

draftsman-view.png

Margin and Padding

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

draftsman-padding.png

draftsman-margin.png

Nested Views

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

draftsman-nested-views.png

Grid Overlay

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

draftsman-grid.png

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.

draftsman-overlay.png

You might also like...
It's an Android library that allows you to use Layout as RadioButton or CheckBox.
It's an Android library that allows you to use Layout as RadioButton or CheckBox.

Android - CompoundLayout It's an Android library that allows you to use Layout as RadioButton or CheckBox. The librarie is Android 14+ compatible. Gra

A pull to refresh layout for android, the RecyclerRefreshLayout is based on the SwipeRefreshLayout. support all the views, highly customizable, code simplicity, etc.  really a practical RefreshLayout!
A pull to refresh layout for android, the RecyclerRefreshLayout is based on the SwipeRefreshLayout. support all the views, highly customizable, code simplicity, etc. really a practical RefreshLayout!

RecyclerRefreshLayout English | 中文版 RecyclerRefreshLayout based on the {@link android.support.v4.widget.SwipeRefreshLayout} The RecyclerRefreshLayout

Easy, flexible and powerful Swipe Layout for Android
Easy, flexible and powerful Swipe Layout for Android

SwipeRevealLayout A layout that you can swipe/slide to show another layout. Demo Overview Drag mode Drag mode normal: Drag mode same_level: Features F

[UNMAINTAINED]: AndroidMosaicLayout is android layout to display group of views as grid consists of different asymmetric patterns (90 different patterns).
[UNMAINTAINED]: AndroidMosaicLayout is android layout to display group of views as grid consists of different asymmetric patterns (90 different patterns).

AndroidMosaicLayout AndroidMosaicLayout is android layout to display group of views in more that 90 different patterns. What is AndroidMosaicLayout? I

Scalable Layout For Android
Scalable Layout For Android

ScalableLayout for Android. Class: com.ssomai.android.scalablelayout.ScalableLayout 한글버전 README.md: https://github.com/ssomai/ScalableLayout/blob/mast

Android implementation of FlowLayout. Layout arranges its children in multiple rows depending on their width.
Android implementation of FlowLayout. Layout arranges its children in multiple rows depending on their width.

FlowLayout FlowLayout is an opensource Android library that alows developers to easily integrate flow layout into their app. FlowLayout is an layout t

Circular layout for android
Circular layout for android

CircleLayout Circular layout for android. Installlation Add CircleLayout as Android Library to your project. How to add project as Android Library Usa

An Android layout for arranging children along a circle
An Android layout for arranging children along a circle

CircleLayout An Android layout for arranging children along a circle You can customize the following options: cl_centerView: Set a specific view ID to

Android - A layout that arranges its children in relation to a background image
Android - A layout that arranges its children in relation to a background image

ImageLayout A layout that arranges its children in relation to a background image. The layout of each child is specified in image coordinates (pixels)

Comments
  • Add alpha percentage info for the TextView color

    Add alpha percentage info for the TextView color

    Proposed Changes

    Add alpha percentage value information for the TextView color to make it clearer for the user whether the text has transparency or not.

    Screenshoot_91823278

    Issue Fixed

    Issue #6

    opened by ragvax 1
  • The possibility of misinterpretation of text color by users

    The possibility of misinterpretation of text color by users

    Problem Description: Displaying the colour of text without alpha value could lead users to misinterpret the original value of the colour. For example in the Draftsman demo app, the text "Hi Folks" has a different shade of black. It looks more grey than black. This is because the actual hex value of the text colour is #8A000000, where 8A represent the alpha value, which means this text has 54% of transparency.

    Proposed Solution: This could be improved by using the 8-digits #AARRBBGG hex format instead of the 6-digits #RRBBGG hex format. Or use something like #000000 54% with transparency as a percentage value. In this way, it would be clearer for users whether the text has transparency or not.

    opened by ragvax 0
  • Can this be added as debugImplementation?

    Can this be added as debugImplementation?

    Query / Feature Request : Can this be added as debugImplementation in project and only works in case of debug mode?

    Description : If we can add this library as debugImplementation like we add LeakCanary, it could be more useful and hassle-free to use in production apps since it doesn't require to remove the library from the source code. And if there could be another launcher activity from library which can have enable and disable button to inspect the views.

    enhancement 
    opened by nikhiljainlive 2
Releases(0.0.3)
Owner
Gojek
SuperApp from Southeast Asia
Gojek
GoolgePlusLayout is a custom layout that plays animation on the children views while scrolling as the layout in the Google Plus (android) main page

Google Plus Layout Google Plus Layout is a custom layout that support playing animation on child view(s) in a serialize manner like the the main

Ahmed Nammari 224 Nov 25, 2022
Responsive Layout Gird Configuration using Compose. An adaptive layout

ResponsiveGrid Responsive Grid is most followed layout system by the designer as it adapts to screen size and orientation, ensuring consistency across

null 4 Apr 12, 2022
A 3D Layout for Android,When you use it warp other view,it can became a 3D view,一秒让你的view拥有3D效果!

ThreeDLayout A 3D Layout,When you use it warp other view,it can became a 3D view 中文文档 preview USAGE 1.compile library allprojects { repositories {

androidwing 490 Oct 27, 2022
An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu

ResideLayout An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu. Can be used on Android 1.6(I haven't try it.)

Yang Hui 392 Oct 12, 2022
ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way

ConstraintLayout is a layout manager for Android which allows you to position and size widgets in a flexible way. It's available for both the Android view system and Jetpack Compose.

Android Jetpack 970 Jan 6, 2023
a custom pull-to-refresh layout which contains a interesting animation

This is a project with custom pull-to-refresh layout which contains a interesting animation. And the animation is inspired by https://dribbble.com/sho

ZhangLei 1.8k Dec 27, 2022
Linear Layout Manager which supports WRAP_CONTENT

Linear Layout Manager DEPRECATED RecyclerView supports WRAP_CONTENT starting from Android Support Library 23.2. More details here: http://android-deve

Sergey Solovyev 418 Nov 10, 2022
A very simple arc layout library for Android

ArcLayout A very simple arc layout library for Android. Try out the sample application on the Play Store. Usage (For a working implementation of this

ogaclejapan 1.4k Dec 26, 2022
Android layout that simulates physics using JBox2D

PhysicsLayout Android layout that simulates physics using JBox2D. Simply add views, enable physics, and watch them fall! See it in action with the sam

John Carlson 689 Dec 29, 2022
An Android demo of a foldable layout implementation. Engineered by Vincent Brison.

Foldable Layout This code is a showcase of a foldable animation I created for Worldline. The code is fully written with java APIs from the Android SDK

Worldline 599 Dec 23, 2022