[TIMOB-18964] Android: Update Alert Dialogs to use Material

[ashcoding]

Jira: https://jira.appcelerator.org/browse/TIMOB-18964

Testing includes Progress Indicator as part of the code that handles that is changed.
Please test this on an Android version below 5.0 (before Lollipop). This will allow Alert Dialogs to have the material design look in versions below Lollipop.

Test Code:

Ti.UI.backgroundColor = 'white';

var win = Ti.UI.createWindow({
  backgroundColor: 'blue'
});

var button = Ti.UI.createButton({
  title: 'Show Progress Dialog',
  top: 10
});

var buttonAlert = Ti.UI.createButton({
  title: 'Show Alert Dialog',
  top: 110
});

var buttonAlert2 = Ti.UI.createButton({
  title: 'Show Alert Dialog 2',
  top: 210
});

var progressIndicator = Ti.UI.Android.createProgressIndicator({
  message: 'Loading...',
  location: Ti.UI.Android.PROGRESS_INDICATOR_DIALOG,
  type: Ti.UI.Android.PROGRESS_INDICATOR_DETERMINANT,
  cancelable: true,
  min: 0,
  max: 10
});

button.addEventListener('click', function (e) {
  progressIndicator.show();
  var value = 0;
  setInterval(function(){
    if (value > 10) {
        return;
    }
    progressIndicator.value = value;
    value ++;
  }, 200);
  // do some work that takes 3 seconds
  // ie. replace the following setTimeout block with your code
  setTimeout(function(){
    progressIndicator.hide();
  }, 3000);
});

buttonAlert.addEventListener('click', function (e) {
  var dialog = Ti.UI.createAlertDialog({
    message: 'This is a message',
    ok: 'Okay',
    title: 'This is a title'
  });
  dialog.show();
});

buttonAlert2.addEventListener('click', function (e) {
    alert('Alert call 2');
});


win.add(button);
win.add(buttonAlert);
win.add(buttonAlert2);
win.open();

[hieupham007]

This is the dialog I see. It looks plain by default.

[ashcoding]

That's how it looks like. If you were to try the normal SDK (without this change) and use an Alert Dialog on an Android 5.0+, you would get the same as that screenshot. What this does is make anything below Android 5.0 look the same as Lollipop.

The idea of this is to make the Alert Dialog consistent with Lollipop throughout all versions of Android.

What do you think?

Or would a better idea be to have that available as a parameter/field/flag called material to turn this on?

  var dialog = Ti.UI.createAlertDialog({
    message: 'This is a message',
    ok: 'Okay',
    title: 'This is a title',
    material: true
  });

[hieupham007]

Consistency is good. Though I think we could modify the default material theme to produce better looking dialogs.

[ashcoding]

Currently based on this spec, http://www.google.com/design/spec/components/dialogs.html#, Alert Dialogs are simple looking. I currently think it is okay right now but what would you suggest to make it look better?

[hieupham007]

Ok, that's fine for now