ti background gradient

TiOverLay.js

// https://github.com/sspinc/OverlayTest

// Whip up a basic UI ...
Titanium.UI.setBackgroundColor('#fff');
var nav = Titanium.UI.createTabGroup();


var window = Ti.UI.createWindow({ title: 'Web View Test', tabBarHidden: true, navBarHidden: true, backgroundColor: '#c0c0c0' });
var mainTab = Titanium.UI.createTab({
    icon: 'KS_nav_views.png',
    window: window
});

var label = Ti.UI.createLabel({
  width: 'auto',
  height: 'auto',
  text: 'Tnis is some extra cool overlay test.',
  top: 50,
  textAlign: 'center',
  font: {
    fontFamily: 'Arial',
    fontSize: 12
  },
  color: '#444',
  shadowColor: "#fff",
  shadowOffset: {
    x: 1,
    y: 1
  }
});

var view = Ti.UI.createView({
  width: '100%',
  height: '100%',
  backgroundGradient: {
    type: 'linear',
    colors: ['#f0f0f0', '#a0a0a0'],
    startPoint: { x: 0, y: 0 },
    endPoint: { x: '100%', y: '100%' },
    backFillStart:false
  }
});
view.add(label);

var overlay = Ti.UI.createView({
  width: '100%',
  height: '160px',
  backgroundGradient: {
    type: 'linear',
    colors: ['#101010', '#0a0a0a'],
    startPoint: { x: '180', y: '' },
    endPoint: { x: '180', y: '960' },
    backFillStart: true
  },
  opacity: 0,
  top: -160,
  zIndex: 1000
});

var overlayTitle = Ti.UI.createLabel({
  width: 'auto',
  height: 'auto',
  text: 'Overlay Text',
  textAlign: 'center',
  font: {
    fontFamily: 'Arial',
    fontSize: 14,
    fontWeight: 'bold'
  },
  color: '#fff',
  shadowColor: "#000",
  shadowOffset: {
    x: 1,
    y: 1
  },
  zIndex: 1006,
  top: 40
});

var overlayText = Ti.UI.createLabel({
  width: 'auto',
  height: 'auto',
  text: 'The quick brown fox jumps over the pretty, but lazy dog. Well played, Foxy Brown!',
  textAlign: 'center',
  font: {
    fontFamily: 'Arial',
    fontSize: 12
  },
  color: '#fff',
  shadowColor: "#000",
  shadowOffset: {
    x: 1,
    y: 1
  },
  zIndex: 1007,
  top: 60
});

var button = Ti.UI.createButton({
  style: Ti.UI.iPhone.SystemButtonStyle.PLAIN,
  height: 40,
  width: 160,
  bottom: 100,
  title: '',
  borderRadius: 10,
  borderWidth: 1,
  borderColor: '#aaa',
  backgroundGradient: {
    type: 'linear',
    colors: ['#ddf', '#ccc'],
    startPoint: { x: '50%', y: 0 },
    endPoint: { x: '50%', y: '100%' },
    backFillStart: false
  }
});

var down = false;
var opacityTo = 0.85;

button.addEventListener('click', function() {

  var moveX;
  if(down) {
    move_x = -160;
    down = false;
    opacityTo = 0;
  } else {
    move_x = 160;
    down = true;
    opacityTo = 0.85;
  };

  var t = Ti.UI.create2DMatrix().translate(0, move_x);
  overlay.animate({ transform: t, duration: 300, opacity: opacityTo });

});

var buttonLabel = Ti.UI.createLabel({
  text: 'PRESS ME',
  width: '100%',
  height: '100%',
  textAlign: 'center',
  font: {
    fontFamily: 'Arial',
    fontSize: 14,
    fontWeight: 'bold'
  },
  color: '#333',
  shadowColor: "#fff",
  shadowOffset: {
    x: 1,
    y: 1
  }
});

button.add(buttonLabel);

overlay.add(overlayTitle);
overlay.add(overlayText);
view.add(button);

window.add(view);
window.add(overlay);

// Try some overlay variations ...

nav.addTab(mainTab);
nav.open();