Issue with displaying the radio button label in tianium? - titanium

Question

I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.
My code:
View:
<Alloy>
<Window class="container">
<View id="radiopicker" ></View>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"red",
layout: 'vertical'
}
"#radiopicker":
{
width: '90%',
top: '25dp'
}
Controller:
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
Screenshot:
The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.

Answer 1

I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:
https://github.com/yozef/TiRadioButtonGroup

Answer 2

I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
//Create a view to hold your labels
var labelsView = Ti.UI.createView({
height:150,
left: "30" //Or whereever you want to place it
layout:'vertical'
});
//Create the labels
var label1 = Ti.UI.createLabel({
text: "One",
height: "34",
width: Titanium.UI.SIZE
});
var label2 = Ti.UI.createLabel({
text: "Two",
height: "34",
width: Titanium.UI.SIZE
});
var label3 = Ti.UI.createLabel({
text: "Three",
height: "34",
width: Titanium.UI.SIZE
});
//Attach the labels to your view and your view to your radioPicker view
labelsView.add(label1);
labelsView.add(label2);
labelsView.add(label3);
$.radiopicker.add(labelsView);
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();

Answer 3

I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.
You can change either the window backgroundColor or label color.
For change windowBackground color :
at abc.tss file
".container": {
backgroundColor:"red", // any color you want
layout: 'vertical'
}
For change Label color :
at tiRadioButton.js file
var radioItemLabel = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: arg.radioItemsValue[i],
font: {}, // Can add your own font styles
color:'#FFFFFF', //Label color
top:isVertical?null:5, // 5 padding between RadioBtn & Label
left:!isVertical?null:5, // 5 padding between RadioBtn & Label
id:i,
});
//**In color field you can change the label color **