Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16564] Android: BorderRadius property not supporting all units (dp,dip, pt, px)

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionDuplicate
Resolution Date2014-03-25T22:00:01.000+0000
Affected Version/sRelease 3.2.0, Release 3.2.1
Fix Version/s2014 Sprint 06, 2014 Sprint 06 SDK, Release 3.2.3, Release 3.3.0
ComponentsAndroid
Labelsqe-closed-3.3.0, qe-testadded, supportTeam
ReporterRupesh Sharma
AssigneeIngo Muschenetz
Created2014-03-06T11:47:20.000+0000
Updated2014-04-22T20:13:53.000+0000

Description

Description

Currently rendering of borderRadius with units is inconsistent across Android devices. On Android no units are supported. Please find the below sample code that renders 8 views that should be perfect circles but none are circles on Android.

Test Case

var win = Titanium.UI.createWindow({
	title : 'Border Radius Sample',
	backgroundColor : '#fff',
	layout : 'vertical'
});

var scrollView = Ti.UI.createScrollView({
	showVerticalScrollIndicator : true,
	layout : 'vertical',
	top : "25dip",
	height : Ti.UI.FILL
});

win.add(scrollView);

var view1 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label1 = Titanium.UI.createLabel({
	left : "40dip",
	text : "50:",
	color : "black"
});
var view11 = Ti.UI.createView({
	right : "40dip",
	width : "50",
	height : "50",
	borderRadius : "25",
	backgroundColor : "black"
});
view1.add(label1);
view1.add(view11);
//---------------------------------
var view2 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label2 = Titanium.UI.createLabel({
	left : "40dip",
	text : "50px",
	color : "black"
});
var view22 = Ti.UI.createView({
	right : "40dip",
	width : "50px",
	height : "50px",
	borderRadius : "25px",
	backgroundColor : "black"
});
view2.add(label2);
view2.add(view22);
//---------------------------------
var view3 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label3 = Titanium.UI.createLabel({
	left : "40dip",
	text : "50dip",
	color : "black"
});
var view33 = Ti.UI.createView({
	right : "40dip",
	width : "50dip",
	height : "50dip",
	borderRadius : "25dip",
	backgroundColor : "black"
});
view3.add(label3);
view3.add(view33);
//---------------------------------
var view4 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label4 = Titanium.UI.createLabel({
	left : "40dip",
	text : "50dp",
	color : "black"
});
var view44 = Ti.UI.createView({
	right : "40dip",
	width : "50dp",
	height : "50dp",
	borderRadius : "25dp",
	backgroundColor : "black"
});
view4.add(label4);
view4.add(view44);
//---------------------------------
var view5 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label5 = Titanium.UI.createLabel({
	left : "40dip",
	text : "8mm",
	color : "black"
});
var view55 = Ti.UI.createView({
	right : "40dip",
	width : "8mm",
	height : "8mm",
	borderRadius : "4mm",
	backgroundColor : "black"
});
view5.add(label5);
view5.add(view55);
//---------------------------------
var view6 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label6 = Titanium.UI.createLabel({
	left : "40dip",
	text : "1cm",
	color : "black"
});
var view66 = Ti.UI.createView({
	right : "40dip",
	width : "1cm",
	height : "1cm",
	borderRadius : "0.5cm",
	backgroundColor : "black"
});
view6.add(label6);
view6.add(view66);
//---------------------------------
var view7 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label7 = Titanium.UI.createLabel({
	left : "40dip",
	text : "50pt",
	color : "black"
});
var view77 = Ti.UI.createView({
	right : "40dip",
	width : "50pt",
	height : "50pt",
	borderRadius : "25pt",
	backgroundColor : "black"
});
view7.add(label7);
view7.add(view77);
//---------------------------------
var view8 = Ti.UI.createView({
	top : "5dip",
	width : Ti.UI.FILL,
	height : Ti.UI.SIZE
});
var label8 = Titanium.UI.createLabel({
	left : "40dip",
	text : "0.5in",
	color : "black"
});
var view88 = Ti.UI.createView({
	right : "40dip",
	width : "0.5in",
	height : "0.5in",
	borderRadius : "0.25in",
	backgroundColor : "black"
});
view8.add(label8);
view8.add(view88);

scrollView.add(view1);
scrollView.add(view2);
scrollView.add(view3);
scrollView.add(view4);
scrollView.add(view5);
scrollView.add(view6);
scrollView.add(view7);
scrollView.add(view8);

win.open();

In tiapp.xml set the following
<property name="ti.ui.defaultunit" type="string">dp</property>

Comments

  1. Ingo Muschenetz 2014-03-06

    Is this related or a duplicate of TIMOB-15099?
  2. Ingo Muschenetz 2014-03-10

    This may be a duplicate of the linked issue based on comments from [~hpham]
  3. Sunila 2014-03-11

    Yes, the fix for TIMOB-15099 should also fix this issue
  4. Olga Romero 2014-04-22

    Tested the above code and verified the fix with: Titanium SDK, build 3.3.0.v20140418162516 Node.JS Version: v0.10.13 NPM Version: 1.3.2 ├── acs@1.0.14 ├── alloy@1.3.1 ├── node-appc@0.2.0 ├── npm@1.3.2 ├── titanium@3.3.0-dev └── titanium-code-processor@1.1.1-beta1 npm -g ls titanium: /usr/local/lib └── titanium@3.3.0-dev (git://github.com/appcelerator/titanium.git#93414d143051df4578b7aa42670008e5ef02c422) XCode Version: 5.1.1 Device: Galaxy Nexus 4 Android version 4.4

JSON Source