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"
}