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.

Answer 1

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.

Answer 2

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;

}