{"id":20217347,"url":"https://github.com/gojek/draftsman","last_synced_at":"2025-07-20T00:32:17.531Z","repository":{"id":42066902,"uuid":"457289341","full_name":"gojek/draftsman","owner":"gojek","description":"Draftsman is an on device layout inspector which can be embedded in your android app.","archived":false,"fork":false,"pushed_at":"2023-03-20T19:08:46.000Z","size":627,"stargazers_count":255,"open_issues_count":2,"forks_count":16,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-10T02:54:01.083Z","etag":null,"topics":["android","kotlin-android","ux-ui"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gojek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-09T09:22:58.000Z","updated_at":"2024-12-04T11:04:01.000Z","dependencies_parsed_at":"2024-11-14T12:32:25.888Z","dependency_job_id":null,"html_url":"https://github.com/gojek/draftsman","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gojek/draftsman","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gojek%2Fdraftsman","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gojek%2Fdraftsman/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gojek%2Fdraftsman/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gojek%2Fdraftsman/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gojek","download_url":"https://codeload.github.com/gojek/draftsman/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gojek%2Fdraftsman/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266048557,"owners_count":23868741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","kotlin-android","ux-ui"],"created_at":"2024-11-14T06:33:37.757Z","updated_at":"2025-07-20T00:32:17.501Z","avatar_url":"https://github.com/gojek.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./draftsman/art/logo.svg\" width=150 height=150/\u003e\n\u003cbr\u003e\n\u003ch1\u003eDraftsman\u003c/h1\u003e\n\u003c/div\u003e\n\nDraftsman 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.\n\nDraftsman aims to combine capabilities of different Android tools such as `Show Layout Bounds` and Android Studio's layout inspector.\n\nThe 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.\n\n## Features\n\n* Width \u0026 Height Info for any view\n\n* Class name for any view\n\n* Margin and Padding visualization\n\n* Dimension values in both Pixel(Px) and dp/sp\n\n* TextView color and size information \n\n* Overlay a grid\n\n* Overlay a image to compare UI\n\nCheck usage guide at bottom for more details.\n\n## Integration\n[![Maven Central](https://img.shields.io/maven-central/v/com.gojek.draftsman/draftsman.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.gojek.draftsman%22%20AND%20a:%22draftsman%22)\n\nAdd following code to your build.gradle\n\n```groovy\nrepositories {\n  mavenCentral()\n}\n\ndependencies {\n  implementation \"com.gojek.draftsman:draftsman:x.y.z\"\n}\n```\n\nTo enable Draftsman in an activity\n\n```kotlin\nDraftsman.install(activity)\n```\n\nTo exit from Draftsman, there is an exit button in information window. And if you want do it programmatically, you can call\n\n```kotlin\nDraftsman.uninstall(activity)\n```\n\n## Usage Guide\n\nThis section will help you understand what information Draftsman can capture from a view.\n\nThis is our base view\n\n![draftsman-base.png](/draftsman/art/draftsman-base.png)\n\n**When Draftsman is enabled**\n\nThis is how our view looks like once Draftsman is enabled. Inspectable views are highlighted and a arrow appears on right to open drawer.\n\n![draftsman-enabled.png](/draftsman/art/draftsman-enabled.png)\n\n**Draftsman Setting Drawer**\n\nYou can use this drawer to customise a few settings.\n\n![draftsman-drawer.png](/draftsman/art/draftsman-drawer.png)\n\n**TextView Inspection**\n\nOn 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.\n\nInspection details overlay can be closed using cross icon and Draftsman can be closed by pressing Exit button.\n\n![draftsman-text.png](/draftsman/art/draftsman-text.png)\n\n**View Inspection**\n\nAny arbitrary view can be inspected as well allowing us to inspect height, width and class name\n\n![draftsman-view.png](/draftsman/art/draftsman-view.png)\n\n**Margin and Padding**\n\nTapping around views highlights margins and paddings if available. Padding is shown with green background and margin with red line.\n\n![draftsman-padding.png](/draftsman/art/draftsman-padding.png)\n\n![draftsman-margin.png](/draftsman/art/draftsman-margin.png)\n\n**Nested Views**\n\nIf there are multiple views stacked within same bounds, Draftsman will prompt you to select the view to be inspected\n\n![draftsman-nested-views.png](/draftsman/art/draftsman-nested-views.png)\n\n**Grid Overlay**\n\nYou can also add a size configurable grid overlay on your screen from setting drawer.\n\n![draftsman-grid.png](/draftsman/art/draftsman-grid.png)\n\n**Image Overlay**\n\nYou 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.\n\nNote: Storage read permission should be provided for this to work.\n\n![draftsman-overlay.png](/draftsman/art/draftsman-overlay.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgojek%2Fdraftsman","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgojek%2Fdraftsman","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgojek%2Fdraftsman/lists"}