Define and render UI specs on top of your Android UI

https://github.com/lucasr/dspec

dspec

A simple way to define and render UI specs on top of your Android UI.

Usage

Enclose the target UI with a DesignSpecFrameLayout, usually the root of your view hierarchy. Get the associated DesignSpec instance with getDesignSpec and then you can:

• Toggle baseline grid visibility with setBaselineGridVisible(boolean).
• Change baseline grid cell width with setBaselineGridCellSize(int).
• Change baseline grid color with setBaselineGridColor(int).
• Toggle keylines visibility with setKeylinesVisible(boolean).
• Change keylines color with setKeylinesColor(int).
• Add keylines with addKeyline(int, From).
• Toggle spacing markers visibility with setSpacingsVisible(boolean).
• Change spacing markers color with setSpacingsColor(int).
• Add spacing marker with addSpacing(int, int, From).

You can also specify the design spec in a raw JSON resource like:

{
    "baselineGridVisible": true,
    "baselineGridCellSize": 8,
    "keylines": [
        { "offset": 16,
          "from": "LEFT" },
        { "offset": 72,
          "from": "LEFT" },
        { "offset": 16,
          "from": "RIGHT" }
    ],
    "spacings": [
        { "offset": 0,
          "size": 16,
          "from": "LEFT" },
        { "offset": 56,
          "size": 16,
          "from": "LEFT" },
        { "offset": 0,
          "size": 16,
          "from": "RIGHT" }
    ]
}

Because DesignSpec is a Drawable, you can simply add it to a ViewOverlay if you're running your app on API level >= 18:

DesignSpec designSpec = DesignSpec.fromResource(someView, R.raw.some_spec);
someView.getOverlay().add(designSpec);