fix(android): textfield padding

[hansemannn]

cc @m1ga, you can push into the branch :)

[m1ga]

Added the dpi fix!

Still have to test the other borderStyles but this fix will already work for your app when you just set padding: { left: 20 } for both platforms in your profile page.

[hansemannn]

Yep, thats great! Still, we will likely have to wait for the 12.0.0 release, since many devs like us used the workaround with different padding for now, so those apps would break in silence. No issue though for the next major, as it can be listed as one of the behavioral / breaking changes.

[m1ga]

add the option to use tv.padding = undefined to reset to the default values again.

Example

const win = Ti.UI.createWindow({});
const vLeft = Ti.UI.createView({top: 0, layout:"vertical", height: Ti.UI.SIZE,left:0,width: "45%"});
const vRight = Ti.UI.createView({top: 0, layout:"vertical", height: Ti.UI.SIZE,right:0,width: "45%"});
const lbl = Ti.UI.createLabel({bottom: 50});
const btn1 = Ti.UI.createButton({title:"padding", bottom: 0, left:0});
const btn2 = Ti.UI.createButton({title:"text", bottom: 0, right:0});
const btn3 = Ti.UI.createButton({title:"height", bottom: 0});

var objs = [];
var padding = 0;
var hasText = false;
btn1.addEventListener("click",function(){
	for(var i=0;i<objs.length;++i){
		if (padding == 0) objs[i].padding = {top:10,left:10,right:10,bottom:10}
		if (padding == 1) objs[i].padding = {top:0,left:10,right:10,bottom:0}
		if (padding == 2) objs[i].padding = {top:10,left:0,right:0,bottom:10}
		if (padding == 3) objs[i].padding = {top:0,left:0,right:0,bottom:0}
		if (padding == 4) objs[i].padding = undefined;
	}
	lbl.text = objs[0].padding;
	padding++;
	if (padding>=5) {padding = 0;}
})

btn2.addEventListener("click",function(){
	for(var i=0;i<objs.length;++i){
		if (hasText){objs[i].value = "";} else {objs[i].value = "test value";}
	}
	hasText = !hasText;
})
btn3.addEventListener("click",function(){
	for(var i=0;i<objs.length;++i){
		objs[i].height = (objs[i].height==40)?Ti.UI.SIZE:40;
	}
})

function addTf(options, view){
	var tf = Ti.UI.createTextField({ returnKeyType:Titanium.UI.RETURNKEY_DONE, hintText:"test", width: "90%", bottom: 10});
	tf.applyProperties(options);
	objs.push(tf);
	view.add(tf);
}

addTf({}, vLeft);
addTf({borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL}, vLeft);
addTf({borderStyle : Titanium.UI.INPUT_BORDERSTYLE_LINE}, vLeft);
addTf({borderStyle : Titanium.UI.INPUT_BORDERSTYLE_NONE}, vLeft);
addTf({borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED}, vLeft);
addTf({borderStyle : Titanium.UI.INPUT_BORDERSTYLE_UNDERLINED}, vLeft);
addTf({borderStyle : Titanium.UI.INPUT_BORDERSTYLE_FILLED}, vLeft);

addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED}, vRight);
addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED,borderStyle : Titanium.UI.INPUT_BORDERSTYLE_BEZEL}, vRight);
addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED,borderStyle : Titanium.UI.INPUT_BORDERSTYLE_LINE}, vRight);
addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED,borderStyle : Titanium.UI.INPUT_BORDERSTYLE_NONE}, vRight);
addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED,borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED}, vRight);
addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED,borderStyle : Titanium.UI.INPUT_BORDERSTYLE_UNDERLINED}, vRight);
addTf({hintType: Titanium.UI.HINT_TYPE_ANIMATED,borderStyle : Titanium.UI.INPUT_BORDERSTYLE_FILLED}, vRight);
lbl.text = objs[0].padding;
win.add([vLeft,vRight,btn1,btn2,lbl,btn3]);
win.open();

This is comparing this PR (left) and 11.0.0.GA (right) with height: Ti.UI.SIZE and padding 0 for all corners:

current GA doesn't remove the padding, with this PR you to have more control of the output of the Textfield and it will use Ti.UI.SIZE correctly.

Fixed height (padding 0): new vs old

so it's possible to lower the height of the Textfields now.

Still doing some more tests 😉

[hansemannn]

@m1ga Can you approve the changes? Then I can merge it

[m1ga]

it's my old PR #13279 so I'm not sure if I should approve it 😄 It was reverted because of a logicalDensityFactor issue. We can revert this and I'll make a new PR we can test more. issue. This is fixed.

It's still working fine:

• if you don't use any padding it will look the same
• if you use padding you might have to adjust it in your app as it will now work "correctly" (images in fix(android): textfield padding #13279)

[m1ga]

LGTM (biased as I did the change 😄 )

[hansemannn]

I know, but we need the formal approval for a PR merge :)