Android app which displays design image with grid lines to facilitate the tedious design implementation process
Java Python
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
appium
art add app screenshot Mar 12, 2015
gradle/wrapper first commit Jan 21, 2015
.gitignore enable travis ci integration adn add appium test Mar 30, 2015
.gitmodules
.travis.yml
LICENSE
README.md add a travis badge and fix travis build error Mar 31, 2015
build.gradle updated android-util lib and applied saucelabs-gradle-plugin to run s… Apr 6, 2015
gradle.properties features complete other than color pref Mar 8, 2015
gradlew first commit Jan 21, 2015
gradlew.bat
requirements.txt add a travis badge and fix travis build error Mar 31, 2015
settings.gradle add color picker preference Mar 8, 2015

README.md

DesignOverlay - for developers and designers

Build Status Sauce Test Status Android Arsenal

DesignOverlay is an android app which displays a design image with grid lines to facilitate the tedious layout process. The grid is especially useful to align to baseline grids as described in Android Design Guidelines.

Download from Google Play

Android app on Google Play

Requirements

API Level 14 (ICS) and above.

Why is this useful?

Designers

Just share pixel-perfect design images with a developer, no longer need to create a redline document which specifies layout parameters of every UI element.

Note: Developers probably also need font styling information to implement your design since font style is hard to guess based on just images.

Developers

With the design images shared by a designer, you can easily tweak the layout parameters using design image and grid overlay this app provides and verify design implementation. During that process, I highly recommend using Mirror Plugin for Android Studio provided by jimulabs to even facilitate the process.

How to use

  • Start the app and enable the switch on the top right.
  • Select an image to overlay.
  • Go to your app and see if the layout matches with the design image.

app screenshot

Live Demo

These are just examples of how the overlay will look over an Etsy app. (I'm using Etsy as an example since it's a great app.)

screenshot1 screenshot2

Available settings

  • Show/Hide of Image/Grid
  • Image to overlay
  • Image transparency
  • Grid size in dp (default is 4dp)
  • Grid line color and transparency
  • Fullscreen mode (if enabled, it will draw overlay from the top of the screen -> draws over status bar)

How to build

git submodule update --init
./gradlew assembleDebug

Contributors

Atsushi Ienaka - application icons and play store images

License

Copyright 2015 Manabu Shimobe

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.