Tuesday, 1 October 2013


Titanium TableView Expand Zoom TableView HeaderView


'use strict';

var win = Ti.UI.createWindow({
      backgroundColor : 'white'


//Generate some sample rows
var rows = [];
for (var i = 0; i < 60; i++) {
        title : 'Row #'+ i 

//Create our TableView, nothing special
var tableView = Ti.UI.createTableView({
    width : Ti.UI.FILL,
    height : Ti.UI.FILL,
    data : rows

//Create a ImageView for the TableView HeaderView
var imgView = Ti.UI.createImageView({
    width : Ti.UI.FILL,
    height : 150,
    image : "sample.png"

//Set our ImageView as the headerView
tableView.headerView = imgView;

//Need to capture a few session variables
//The most important one is to grab the origional height of the TableView HeaderView

var _scollTimer = null, 
    _origionHeight = tableView.headerView.height;

//Most of what we need happens in the scroll event
tableView.addEventListener('scroll', function(e) {
       //Clear our timer each time
      if (_scollTimer !== null) {

      //If the user has scrolled past the header, reset the origional height
      if (e.contentOffset.y > _origionHeight) {
        if (tableView.headerView.height !== _origionHeight) {
            tableView.headerView.height = _origionHeight;
    } else {
               //Calculate our zoom or expand height
               var zoomOffSet = ((e.contentOffset.y < 0) ? -1 : 1);
      var zoomHeight = (tableView.headerView.height+((zoomOffSet * -1)*((zoomOffSet*e.contentOffset.y)/3)));
     zoomHeight = ((zoomHeight > _origionHeight) ? zoomHeight : _origionHeight);

       if (tableView.headerView.height !== zoomHeight) {
            tableView.headerView.height = zoomHeight;

      //Timer is needed since scrollend doesn't always fire
      //so just in case we set a timer to set the origional height

      if (e.contentOffset.y === 0) {
         _scollTimer = setTimeout(function() {
             tableView.headerView.height = _origionHeight;
         }, 250);

  //If the user end scrolls something other then the HeaderView check if we need to reset
  tableView.addEventListener('scrollend', function(e) {
      if (_scollTimer != null) {
      if (tableView.headerView.height !== _origionHeight) {
          tableView.headerView.height = _origionHeight;


You can also check the blog of this post.
Ben Bahrenburg created an snippet that lets you create a TableView Header Zoom like the Foursquare and Tapbots.

Download Sample Here...


Status Bar ios7 in Titanium : 


TiAlloy fix for windows being positioned under the status bar on #iOS7

//For iOS only, set the Windows top to 20 so they start under the status bar.
Alloy.Globals.windowsTop = (OS_IOS && parseInt(Ti.Platform.version[0], 10) >= 7 ) ? 20 : 0;

//Set Window Propert for iOS
"Window[platform=ios]" : {
      top : Alloy.Globals.windowsTop

iOS 7 also introduces a new light content status bar style that is exposed as the Titanium.UI.iPhone.StatusBar.LIGHT_CONTENT constant in the Titanium SDK. Use this constant to specify a status bar for use with a dark background. If you want the entire application to use this style, add the following key to your tiapp.xml file:

                         <key> UIStatusBarStyle </key>
                         <string> UIStatusBarStyleLightContent </string>


Saturday, 15 June 2013

Titanium Window Animations

In Android, Titanium windows can be heavyweight or lightweight:

- A heavyweight window is associated with a new Android Activity. Creating a heavyweight window always creates a new JavaScript context.

- A lightweight window is a fullscreen view, and runs in the same Android Activity as the code that created it. Creating a lightweight window creates a new JavaScript context if it was created with the 'url' property set.

Heavyweight Window Transitions in Android

Heavyweight windows are their own Android Activity.
The only way to animate the opening of an Activity in Android is to apply an animation resource to it. Passing a Titanium.UI.Animation object as a parameter to open will have no effect if the window being opened is heavyweight and thus opens its own Activity.

Instead, in the parameter dictionary you pass to open, you should set the activityEnterAnimation and activityExitAnimation keys to animation resources.

  • The activityEnterAnimation should be set to the animation you want to run on the new window (activity) 
  • The activityExitAnimation should be set to the animation you want to run on the window (activity) that you are leaving as you open the new heavyweight window above it.
Just chek Below Sample :

Sample For Window Animation

You can also create Custom animation for Window.

Custom animation For Titanium window :

Follow Below Steps :
  1. Create your own animation resource XML files.see "View Animation" in Android's Resources documentation.
  2. After creating an Animation resource file, you can place it under platform/android/res/anim in your Titanium project folder and it will be packaged in your app's APK and then available via Titanium.App.Android.R.

    Custom Window animation
  3. Here is the my Animation file :

Installing Android App to SD Card From Titanium

- Android apps are installed by default to the device's internal storage. But that Limited memory space can filled fast and quick in older devices .

- You can configure your Titanium apps to install to the SD card.

- To do so, you need to modify the AndroidManifest.xml configuration file.
Titanium makes this easy: you simply update your tiapp.xml file and Studio will take care of creating the necessary manifest file.
Locate the <android> node near the end of that file.
You'll need to add a couple of properties and tags. When you're done, it should look like this:

Now Build and Deploy your app to Device.

Let's go over that code, because you can control a few options. First, the <tool-api-level> node specifies the version of the Android development tools that will be used to compile your app's code. At minimum, you must specify version 8. Higher (newer) versions aren't necessary for installing to the SD card, but perhaps offer other benefits.
Next, is the <manifest> node and the <code>android:installLocation</code> property. You'd choose one of these values for that property:
  • android:installLocation="preferExternal" -- specifies that you prefer your app to install to the SD card, but if one isn't present the app can be installed to internal storage.
  • android:installLocation="auto" – specifies that the phone's configuration will determine the installation location. Generally, your app will be installed to internal storage if sufficient space is available. In that case, users could still move your app by opening Settings > Applications > Manage applications, tapping your app, and tapping Move to SD card.
  • android:installLocation="internalOnly" – which specifies that your app cannot be installed to the SD card. See the Android docs for the various reasons why you might choose this option.
Finally, you need to add the <uses-sdk> tag within the <manifest> node. This tag specifies that your app requires Google's version 7 or newer APIs — in other words, the phone must be running Android 2.1 Update 1 or newer. That pretty much covers all the newer phones, but will exclude some older devices. On those phones, your app will install to the internal storage.

Tuesday, 28 May 2013

Lock Android Orientation Mode

Locking Android Orientation Mode :

Follow Below Steps For Locking the Android Orientation Mode : 

  * Create a custom AndroidManifest.xml (Just Copy the generated AndroidManifest

* Copy AndroidManifest.xml on the created folder "platform/android/AndroidManifest.xml"
at the top level of your project.(Inside your project root)

Alloy Architecture
Without Alloy

*  Add this: android:screenOrientation="portrait" to all activities in AndroidManifest.xml file

*  Remove this: "orientation" from all activities.

Here is my AndroidManifest.xml :