How to create radio button in Titanium Alloy?

Question

How can we create a radio button and multi select button in Titanium Alloy framework? Are there any XML tags to create the same?

I tried adding code from your ref and from following link https://github.com/Lukic/TiRadioButtonGroup/blob/master/Resources/app.js Now I'm able to get the radio button. But there is an issue with formatting. Now I am getting radio button as shown in screen shot.

But there I am not able to see any label names as options in my screen shot. Also I tried multiple radio buttons but I get issues with styles. I need the the similar to follwing screenshot. How can I do that.

Answer 1

This code creates a radio button group. You could use it in your Alloy project, though it is not an Alloy Widget. This link has a fully working classic example.

https://github.com/yozef/TiRadioButtonGroup

Since it is not an Alloy widget, I believe you need to do all of this through the index.js file.

Inside your project's app folder. Copy the radioButtonActive.png and radioButton.png to assets/iphone and assets/android.

In your index.xml file, I usually do something like:

 <Alloy>
    <Window class="container">
        <View id="radioView" />
    </Window>
</Alloy>

index.js

var radioButton = require('tiRadioButton');

var radioGroup = radioButton.createGroup({
    groupId:1,
    width:119,
    height:34,
    layout:'horizontal',
    radioItemsValue:['One', 'Two', 'Three'],
    radioItemsPadding:10,
    radioItemsBackgroundSelectedImage:'radioButtonActive.png',
    radioItemsBackgroundImage:'radioButton.png',
    radioItemsWidth:33,
    radioItemsHeight:34
});

var headline3 = Ti.UI.createLabel({
    text:'Layout: vertical',
    color:'#fff',
    font:{fontSize:20,fontWeight:'Bold'},
    shadowColor:'#000',
    shadowOffset:{x:1,y:1},
    top:10,
    textAlign:'center'
});     

var button = Ti.UI.createButton({
    title:'Get value' 
});

button.addEventListener('singletap', function(e) {
    alert("Horizontal radioGroup selectedIdx: " + radioGroup.selectedValue);
});

$.radioView.add(radioGroup);
$.radioView.add(button);
$.index.open();

index.tss

".container": {
    backgroundColor:"white"
},
"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

Answer 2

    Although titanium does not support the check box,radio button you could always fake the functionality here is custom check box and radio button for you

    var checkbox = Ti.UI.createButton({
    title: '',
    top: 10,
    right: 10,
    width: 30,
    height: 30,
    borderColor: '#666',
    borderWidth: 2,
    borderRadius: 3,
    backgroundColor: '#aaa',
    backgroundImage: 'none',
    color: '#fff',
    font:{fontSize: 25, fontWeight: 'bold'},
    value: false //value is a custom property in this casehere.
});

//Attach some simple on/off actions
checkbox.on = function() {
    this.backgroundColor = '#007690';
    this.title='\u2713';
    this.value = true;
};

checkbox.off = function() {
    this.backgroundColor = '#aaa';
    this.title='';
    this.value = false;
};

checkbox.addEventListener('click', function(e) {
    if(false == e.source.value) {
        e.source.on();
    } else {
        e.source.off();
    }
});

Answer 3

No,In Titanium Alloy framework we have not any Object like Radio Button. For this we have need to create a Function for handle like Radio Button.

for example,
we can take 4 buttons and set Image like Radio button Image(non Selected).

When we click on any one button then change button it button image with Select Radio Button. and update all remain button image with Non-selected images. Logically.

Thanks,