Options Dialog Button UI change Titanium Appcelerator

Question

am using 3.1.3.GA SDK, Alloys and 4.2 Android Emulator and am using option dialog to show my options to the users and I need to change its selector button from this type to as our design/theme. How to achieve it.

score 1 · Accepted Answer · answered Oct 08 '13 at 14:06

You have to create it by your own, a first look it would be a Window with 0.7 opacity, a view that contains the the black and two white views (preferably horizontal ) each of them contains a label and another view or button for your custom confirmation, you can also use border width and border color for the light gray details. i have created something similar: http://postimg.org/image/6ygh7wi6p/

Here is the code:

            var mainWindow = Titanium.UI.createWindow({
              modal: true,
              navBarHidden : true,
              backgroundImage:"/global/bg-opacity.png_preview_70x50.png"
            });


            var alertView = Ti.UI.createView({
                width: 300,
                height: 500,
                borderColor : Alloy.CFG.colors.SILVER,
                borderWidth : 1,
                backgroundColor:"black",
            });

            var titleLabel = Ti.UI.createLabel({
                top: 10,
                height : 40,
                left:10,
                color : "white",
                font : Alloy.CFG.fonts.DEFAULT_22_BOLD,
                text: "BACK-UP CARE MOBILE"
            });

            var testWrapper = Ti.UI.createScrollView({
                top:55,
                widht:Ti.UI.FILL,
                height:385,
                borderColor : "#181818",
                borderWidth : 1
            });

            alertView.add(testWrapper);

            var textLabel = Ti.UI.createLabel({
                top : 10,
                bottom: 10,
                left : 20,
                right : 20,
                textAlign: "left",
                height : Ti.UI.SIZE,
                font : Alloy.CFG.fonts.DEFAULT_17,
                color : "white",
                text : App.localize("FIRST_RUN_MESSAGE")
            });

            testWrapper.add(textLabel);

            var buttonsWrapper = Ti.UI.createView({
                top:440,
                height:60,
                widht:Ti.UI.FILL,
                backgroundColor:"#848684"
            });

            alertView.add(buttonsWrapper);

            var continueBtn = Ti.UI.createButton({
                title: 'Continue',
                top: 5,
                width: 140,
                height: 50,
                left:155
            });

            buttonsWrapper.add(continueBtn);

            var createProfileBtn = Ti.UI.createButton({
                title: 'Create Profile',
                top: 5,
                width: 140,
                height: 50,
                left:5
            });

            buttonsWrapper.add(createProfileBtn);

            mainWindow.addEventListener("android:back", function(){

            });

Hope it helps.

Thank you Mayito. Opening a modal window and placing things is also a good and simple idea but is it possible to achieve with default [OptionDialog](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.OptionDialog) from titanium. — Guts, Oct 08 '13 at 14:45
Can we edit theme of OptionDialog to place a checkbox instead of radio button and color scheme of our desire. Or is it a bad idea?.. Am pretty new to appcel community. I thought playing with their own tools may reduce errors,So that mayito. — Guts, Oct 08 '13 at 14:48
Hello @Guts from the UI perspective the AlertDialog cannot be modified since they are "native" alert dialogs, from each of every platform, (this also happens with Ti.UI.pikers)the only properties that you can add or change are the ones described in the documentation: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.AlertDialog you can add buttons but you can't change the UI, hope this link helps. — Mario Galván, Oct 08 '13 at 15:28
Thank you Mayito. I understand But in native android, we can change the themes like Halo-light, halo-dark, etc.. Is it possible like that to change it in Titanium. If we use Halo-light, Android will produce alerts without radio boxes. So asked. — Guts, Oct 09 '13 at 06:06
Yeah ok. I got how to change themes in [this](http://stackoverflow.com/questions/9681648/how-to-use-holo-light-theme-and-fall-back-to-light-on-pre-honeycomb-devices) thread and I require only three options and thats static so I can use OptionsDialog itself and for further big dialogs I can go with your idea for sure. Thank you Mayiyo. — Guts, Oct 09 '13 at 06:14

score 0 · Answer 2 · answered Jan 08 '15 at 09:38

function createAlert(_args) {
//283x170
var alert = Ti.UI.createView({
    width:283,
    height:170,
    visible:false,
    backgroundImage:'/images/alert.png'
});

var label = Ti.UI.createLabel({
    text:'This is a custom alert box.\n\nAre you sure that you really want to do that?',
    width:263,
    height:100,
    top:10,
    textAlign:'center',
    color:'#fff',
    font:{
        fontWeight:'bold',
        fontSize:16
    }
});
alert.add(label);

var cancel = Ti.UI.createButton({
    width:127,
    height:42,
    bottom:10,
    left:10,
    title:'Wait a tick ...',
    backgroundImage:'/images/cancel.png'
});
cancel.addEventListener('click', function(e) {
    alert.hide();
});
alert.add(cancel);

var ok = Ti.UI.createButton({
    width:127,
    height:42,
    bottom:10,
    right:10,
    title:'Lets do it!',
    backgroundImage:'/images/ok.png'
});
ok.addEventListener('click', function(e) {
    alert.hide();
});
alert.add(ok);

return alert;

}

Options Dialog Button UI change Titanium Appcelerator

2 Answers2