Question

I am developing my android app in Titanium. For certain views(e.g Ti.UI.View) I was trying to give a border by specifying properties like borderColor and borderWidth. But what I see is that the whole view gets a background color which is same as the border color. Is this a bug in Titanium? or is there anything wrong I am doing. Following is the snippet of my code.

var view = Ti.UI.createView({
  width: 200,
  height: 200,
  borderColor: '#c00',
  borderWidth: 1
});

win.add(view);

For this what I get is a red box of 200x200px. Kindly let me know if there is a way to rectify this.

Answer 1

You can fix this by specifying an explicit background color:

var view = Ti.UI.createView({
  width: 200,
  height: 200,
  backgroundColor: 'blue',
  borderColor: '#c00',
  borderWidth: 1
});

If you want a transparent box with a red background, simply specify backgroundColor: transparent.

On iOS, your example produces the results you expect–that is, the background color defaults to transparent. On Android, a view with a border color and no background color defaults to using the border color as the background color.

Is this a bug in Titanium? The default behavior here differs between Android and iOS, so I’d say it is.