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.

enter image description here

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.

enter image description here

score 1 · Answer 1 · answered Oct 01 '14 at 11:58

    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();
    }
});

Very nice little checkbox. Thanks. Will probably be more useful as a module/class, then it can be slightly more easily packaged and used as lib in any project. But amazed this is not the accepted answer. — Sam Redway, Apr 22 '15 at 15:16

score 0 · Answer 2 · answered Sep 22 '14 at 14:43

0

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,

answered Sep 22 '14 at 14:43

MRT

1,610
15
41

Just a clarification. I believe the reason that Titanium Alloy doesn't have it, is because the IOS development tools don't natively support it either. Titanium is mapping functionality to the native capabilities. – Martin Sep 22 '14 at 16:27
@Martin radio button is on iOS called Switch button which is supported by Titanium. – 0101 Sep 23 '14 at 17:01

Martin · Accepted Answer · 2014-09-29T15:46:55.147

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

edited Sep 29 '14 at 15:46

answered Sep 25 '14 at 15:06

Martin

1,914
1
12
14

I tried that but the radio button UI is not showing. Please sow me one example – Vinod Sep 27 '14 at 15:40
This is all the code I have in my test project I used. Includes all the files I created and some instructions on taking files from the original classic project. Expect to see a Get Value button that reads the 3 fields on a white screen. These fields do not have labels, just the radio buttons. You'll have to look at the radio button library to see if it handles labels. – Martin Sep 29 '14 at 15:49
I tried your code with vertical view. Now the radio buttons are showing. but the option labels are not showing and also when I tried to add multiple radio button question I'm getting issue with styles – Vinod Oct 06 '14 at 12:43
I have updated my question please suggest me some answer – Vinod Oct 06 '14 at 12:44
Though I accepted your answer the labels are not showing to me. Please help me that I need to display the options one, two and three . Please help me out. – Vinod Oct 31 '14 at 10:02
updated as new question in following link please suggest the solution, http://stackoverflow.com/questions/26672482/issue-with-displaying-the-radio-button-label-in-tianium – Vinod Oct 31 '14 at 10:31
no, its not showing radio buttons in alloy, can you please help it more – Kimmi Dhingra Jan 14 '15 at 06:50

How to create radio button in Titanium Alloy?

3 Answers3