Creating checkbox using titanium alloy

Question

I am new in Titanium alloy and I would like to change my project from titanium default template to alloy. Below is the code for creating a text box in default template. I would like to change this to alloy template.

    var checkbox = Ti.UI.createSwitch({
   id:'checkbox',
   style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
});

score 5 · Answer 1 · answered May 15 '13 at 14:33

5

Not hard at all! Try this inside your Alloy XML view markup:

checkbox.xml

<Alloy>
    <Switch id="checkbox"/>
</Alloy>

Now we can use the style file to set attributes based on the id.

checkbox.tss

"#checkbox[platform=android]" : {
    style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX
}

This will set the style to checkbox, also note that I set this to only happen for android. Alternatively, if we wanted every switch to be of the checkbox style we could set this inside app.tss:

"Switch" : {
    style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX
}

answered May 15 '13 at 14:33

Josiah Hester

6,065
1
24
37

this is very helpful information,please share something about associating some text of lable with checkbox, how can I have two separate view element associated? – samarth May 22 '13 at 18:04
Hello, Can you please tell how to change default green color to something else. Right know it looks its not changeable to other – Roshan Jha Apr 24 '14 at 10:47

score 1 · Answer 2 · answered Jun 18 '13 at 10:36

You can create the check box like this.

var checkbox = Ti.UI.createSwitch({
  style: Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
  textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
  title:'Notice Me',
  value:true,
  width: 300,
  left: 18
});
win.add(checkbox);

checkbox.addEventListener('change',function(e){
  //function
  Ti.API.info('Switch value: ' + checkbox.value);
});

Creating checkbox using titanium alloy

2 Answers2