Skip to content

Instantly share code, notes, and snippets.

@FokkeZB
Created May 10, 2013 11:45
Show Gist options
  • Save FokkeZB/5553910 to your computer and use it in GitHub Desktop.
Save FokkeZB/5553910 to your computer and use it in GitHub Desktop.
Label shadows for Titanium Android
var createLabel = require('shadow');
var win = Ti.UI.createWindow({
backgroundColor: '#F00'
});
var label = createLabel({
text: 'Text with shadow',
color: '#0F0',
shadowColor: '#00F',
shadowOffset: {
x: 0,
y: 1
}
}));
win.add(label);
win.open();
var _ = require((typeof ENV_TEST === 'boolean') ? 'alloy' : 'underscore')._,
ios = (Ti.Platform.name === 'iPhone OS');
function createLabel(args) {
if (ios || !args.shadowColor) {
return Ti.UI.createLabel(args);
}
var shadowOffset = _.defaults(args.shadowOffset || {}, {
x: 0,
y: -1
});
var shadowColor = args.shadowColor;
delete args.shadowOffset;
delete args.shadowColor;
var shadow = Ti.UI.createLabel(_.extend({}, args, {
color: shadowColor,
}));
shadow.add(Ti.UI.createLabel(_.extend({}, args, {
top: -shadowOffset.y,
left: -shadowOffset.x
})));
return shadow;
}
if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = createLabel;
}
exports.createLabel = createLabel;
}

Supporting text shadow for Labels on Android has been a request ever since Titanium 1.7.x. It's now scheduled for 3.2.x, but it probably has been for every version since :)

This small workaround works for 80% of what I need: just a tiny small shadow 1 pixel up or down.

However, you must know that:

  • It returns a Label in a Label, which is not officially supported.
  • Any further calls to properties or methods will be on the outer (shadow) label only.
  • If you use {x:1} as offset, in reality the text will be positioned {left:-1} relative to the shadow.
  • Because of the former note this workaround will doo only for small offsets.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment