It's not uncommon for a design to call for bottom-anchored content, such as buttons, snackbars, drawers, etc. Such content should be grid-aligned internally, but its grid should originate at the bottom of the screen and may not align with the top-anchored grid.

This change adds an option to split the grid at a given point on the screen. There will then be two grids, one originating at TOP and one at BOTTOM. If the grids do not align, a "gutter" will be left between them to indicate the odd space. The gutter will always be narrower than the baseline grid size.

The problem with using onDraw() in a ViewGroup is that this method actually draws _underneath_ the child view contents. This is an acceptable scenario for a basic layout with lots of transparency, but as soon as your view hierarchy starts including any significant amount of background images or colors, the grid becomes completely invisible.

To properly draw _over_ the content in a ViewGroup, override dispatchDraw() and call your custom code after super. A nice side-effect of this is that you no longer has to disable the drawing optimization in ViewGroup either.

What about Drawable adapter to design spec? I see following use case for it.

public class DesignSpecDrawable extends Drawable {
    private final DesignSpec mDesignSpec;

    public DesignSpecDrawable(DesignSpec designSpec) {
        mDesignSpec = designSpec;
    }

    @Override
    public void draw(Canvas canvas) {
        if (mDesignSpec != null) {
            mDesignSpec.draw(canvas);
        }
    }

    /* ... */
}

setContentView(R.layout.main_activity);
/* Resolve views here */

View decorView = getWindow().getDecorView();
mDesignSpec = DesignSpec.fromResource(decorView, R.raw.main_activity_spec);
DesignSpecDrawable drawable = new DesignSpecDrawable(mDesignSpec);
decorView.getOverlay().add(drawable); 

The main advantage that is dspec now controlled from the code. It means we can now easily make it conditional, like:

if (BuildConfig.USE_DSPEC) {
  // ...
}

So it can be stripped from production builds with ease.

However, there is one problem ViewOverlays are only available since API 18 (JB 4.3). Although, we can still use it below this API level by setting it as background, or ImageView or so on, which is not so convient.

Adding support for basic calculations in the size and offset fields would improve readablilty:

{
    "keylines": [
        {
            "offset": 56,
            "from": "TOP"
        }, {
            "offset": 56 + 24,
            "from": "TOP"
        }, {
            "offset": 56 + (2 * 24),
            "from": "TOP"
        }
    ]
}

It's be great to have percentage values supported in the offset and size fields.

For example:

{
"keylines": [
    {
        "offset": 50%,
        "from": "LEFT"
    }, {
        "offset": 50%,
        "from": "TOP"
    },
}