Starting With ActionBarSherlock

ActionBarSherlock is a library that extends the android support library to enable applications to use the action bar on devices with lower versions of the android os.

To follow this guide, you must download the ActionBarSherlock library from here.

After you have extracted the contents of the source file archive (the name of the file I downloaded is JakeWharton-ActionBarSherlock-4.4.0-0-g4a79d53.zip which, I assume, is the latest version), you must import the source file to create an android library project.

Select Import->Existing Android Code Into Workspace and navigate to the folder where you extracted the source archive. Select the folder named actionbarsherlock.

Check if the project is set as a library by viewing the project Properties->Select Android and check on the right part of properties window if the following is checked:

Create a new android project that you will use for testing the actionbarsherlock library. After the project is created, you need to reference the action bar library by viewing the Properties -> Android window again. Click add, and select the actionbarsherlock project that you imported earlier.

Please note that in my screenshot, I renamed the actionbarsherlock folder into abs.

To be able to use the action bar, your activity must extend the SherlockActivity class:

1:  package org.kaithe.android;  
2:  import com.actionbarsherlock.app.SherlockActivity;  
3:  import android.os.Bundle;  
4:  public class MainActivity extends SherlockActivity {  
5:       @Override  
6:       protected void onCreate(Bundle savedInstanceState) {  
7:            super.onCreate(savedInstanceState);  
8:            setContentView(R.layout.activity_main);  
9:       }  
10:  }  

From this point, you can already run your application. However, it will just look plain since we still haven't done any customisations on the action bar.

To test the action bar, we will add some items in it. Override the onCreateOptionsMenu method from the SherlockActivity class.

1:       @Override  
2:       public boolean onCreateOptionsMenu(Menu menu) {  
3:      menu.add("Save")  
4:        .setIcon(R.drawable.ic_compose)  
5:        .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);  
6:      menu.add("Search")  
7:        .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);  
8:      menu.add("Refresh")  
9:        .setIcon(R.drawable.ic_refresh)  
10:        .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);  
11:      return true;  
12:       }  

In here, we created 3 menu on the action bar. Running the application, this is what our action bar will look like:

The action bar sherlock library source that I used can be found in here
The full action bar sample application source can be obtained here

Camera Overlays for Titanium Mobile Android

To add overlays to the Titanium Mobile camera screen, you need to set the overlay property of your CameraOptionsType:

1:  Titanium.Media.showCamera({  
2:   success : function(e) {},  
3:   error : function(e) {},  
4:   cancel : function(e) {},  
5:   overlay : Ti.UI.createView({  
6:    backgroundImage : '/crosshair.png',  
7:    width : '200dp',  
8:    height : '200dp'  
9:   })  
10:  })  

While that step looks simple enough, you might still encounter some unexpected errors like this: (Unable to find explicit activity class... TiCameraActivity)

From the error, we can see that the activity class for TiCameraActivity was not defined in the Android manifest. Normally, that entry is supposed to be added automatically to the generated manifest file but what happened here is that its missing. This happened because I am using a custom manifest file. I created the custom manifest before I added the camera code which is why the camera activity definition is missing from the manifest. To fix this, simply add the code to your custom manifest file in between the <application></application> tags:

1:  <activity   
2:            android:name="ti.modules.titanium.media.TiCameraActivity"  
3:            android:configChanges="keyboardHidden|orientation"  
4:            android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen" />  

Also note that while this fixes the crash problem, you will also face another weird problem with the overlay on android:

You can see that the overlay's orientation is converted to landscape, even though the image I used is in portrait mode. But since that problem is simple enough to solve, I'll just leave it as is..

You can get the source code for this application in here

Displaying Images Taken from Titanium Mobile showCamera Method

While the api documentation for the Ti.Media.showCamera method does a pretty good job in demonstrating how to call the camera application, it does not show how the use or display the image that was captured by the camera. So after spending some time with it, I was able to come up with this solution to display my image.

First, I created a wrapper that will contain my picture:

1:  var imageWrapper = Ti.UI.createView({  
2:       backgroundColor : 'red',  
3:       width : '300dp',  
4:       height : '385dp',  
5:       top : '65dp'  
6:  });  
7:  win.add(imageWrapper);  

Then, on the success callback of the CameraOptionsType, I created an image view that will contain the image data from the native camera application:

1:  var image = event.media;   
2:  tempImage = Ti.UI.createImageView({  
3:   image : image,  
4:   width : '385dp',  
5:   height : '300dp'  
6:  });  

From what I have observed, the images taken on the android device are not properly oriented (maybe its the same on ios), so I rotate the images before adding them on the wrapper I prepared earlier:

1:  var rotation = Ti.UI.create2DMatrix({ rotate : -270 });  
2:  tempImage.transform = rotation;  
3:  imageWrapper.add(tempImage);  

To test the whole application, get the full source code here

Android MapsV2 Module Sample Code in Titanium Mobile Alloy

With the introduction of SDK 3.0, a new framework called Alloy had been integrated with Titanium. This framework uses model-view-controller architecture to break down your application code. While it is fairly simple to learn the new framework, I encountered a bit of slowdown when trying to use the new Google Maps Android v2 module in it. To help save a lot of time, I'll demonstrate how I used the  map module on the new framework.

First, you need to download the map module from here. After you have downloaded the zip file, you need to put the extracted contents on the root folder of your application.

You can also put the module in the Titanium SDK Home Directory (but for me, I prefer to use the application folder).

After placing the module on the proper folder, you need to edit the tiapp.xml file on your project root. Find the <modules/> tag and update it like below:

1:    <modules>  
2:         <module platform="android" version="2.1.0">ti.map</module>  
3:    </modules>  

Find the <android xmlns:android="http://schemas.android.com/apk/res/android"/> tag and update it as well:

1:  <android xmlns:android="http://schemas.android.com/apk/res/android">  
2:      <manifest>  
3:        <!-- Allows the API to download data from Google Map servers -->  
4:        <uses-permission android:name="android.permission.INTERNET"/>  
5:        <!-- Allows the API to cache data -->  
6:        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>  
7:        <!-- Use GPS for device location -->  
8:        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>  
9:        <!-- Use Wi-Fi or mobile connection for device location -->  
10:        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>  
11:        <!-- Allows the API to access Google web-based services -->  
12:        <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>  
13:        <!-- Specify OpenGL ES 2.0 as a requirement -->  
14:        <uses-feature android:glEsVersion="0x00020000" android:required="true"/>  
15:        <!-- Replace com.domain.appid with your application ID -->  
16:        <uses-permission android:name="<com.domain.appid>.permission.MAPS_RECEIVE"/>  
17:        <permission android:name="<com.domain.appid>.permission.MAPS_RECEIVE"  
18:          android:protectionLevel="signature"/>  
19:        <application>  
20:          <!-- Replace "PASTE YOUR GOOGLE MAPS API KEY HERE" with the Google API key you obtained -->  
21:          <meta-data android:name="com.google.android.maps.v2.API_KEY"  
22:            android:value="PASTE YOUR GOOGLE MAPS API KEY HERE"/>  
23:        </application>  
24:      </manifest>  
25:    </android>  

Remember to set your api key on the android:value property of the meta-data tag on the manifest section of your tiapp.xml file. Also, change the <com.domain.appid> strings on that same section with your application id found between the <id></id> tags in the tiapp.xml file.

An alloy application framework code is divided into four parts. Each part can be located in its corresponding folder under the app directory. For my sample application, I have no need for a model so you can see that it's folder is empty.

Since all alloy application start with the index, you can see the controllers, views, and styles had been created. I don't need customise the view so I just removed the sample code from it:

1:  <Alloy>  
2:       <Window class="container">  
3:       </Window>  
4:  </Alloy>  

To instantiate the module, just use the require method. In my sample application, I placed it in the index controller. The file can be found inside the app/controllers/ directory. The code for my index.js file is as follows:

1:  var MapModule = require('ti.map');  
2:  var mapview = MapModule.createView({  
3:       mapType : MapModule.NORMAL_TYPE,  
4:       region: {  
5:            latitude:33.74511,   
6:            longitude:-84.38993,  
7:      latitudeDelta:0.01,   
8:      longitudeDelta:0.01  
9:    },  
10:    top : 0,  
11:    left : 0,  
12:    right : 0,  
13:    bottom : 0,  
14:    animate:true,  
15:    regionFit:true  
16:  });  
17:  $.index.add(mapview);  
18:  $.index.open();  

Just adding the code above on the index controller will already add the MapView on the application window.  If you need more info on the MapView, just consult the API docs.

To see the full source of my sample application go here

MapView Transparency Bug on Titanium Android

While using the new MapView module for android, I noticed that the view becomes blank when it is animated. Even when I tried to refresh the view, the map would remain to be invisible (or seems to be located at the background).

At first, I thought it was the drawer menu widget that I was using. However, as I looked further, I was able to confirm that any animation that moves the MapView on the screen causes it to become invisible (like my sample below):

View code:

1:  <Alloy>  
2:       <Window class="container">  
3:            <View id="mainwindow" top="0" left="0" right="0" bottom="0" backgroundColor="white" onClick="doClick">  
4:            </View>  
5:       </Window>  
6:  </Alloy>  

Controller code:

1:  var MapModule = require('ti.map');  
2:  var mapview = MapModule.createView({  
3:       mapType : MapModule.NORMAL_TYPE,  
4:       region: {  
5:            latitude:33.74511,   
6:            longitude:-84.38993,  
7:      latitudeDelta:0.01,   
8:      longitudeDelta:0.01  
9:    },  
10:    top : '50dp',  
11:    left : 0,  
12:    right : 0,  
13:    bottom : 0,  
14:    animate:true,  
15:    regionFit:true  
16:  });  
17:  $.mainwindow.add(mapview);  
18:  function doClick(e) {   
19:    $.mainwindow.animate({  
20:         left : '300dp',  
21:         top : 0,  
22:         right : 0,  
23:         bottom : 0  
24:    });  
25:  }  
26:  $.index.open();  

To check if the problem is rooted at the native android sdk, I created a similar scenario on a native android application. When I was not able to encounter the same problem,  I then tried to find a workaround for this bug.

After a lot of searching, I finally found out that using hardware acceleration on the application would help in bringing back the MapView. So, going to the Android manifest, you need to find the application tag and add the property to enable hardware acceleration on your application:

1:  <application android:icon="@drawable/appicon"  
2:            android:label="sample" android:name="SampleApplication"  
3:            android:debuggable="false"  
4:            android:hardwareAccelerated="true">  

Please note that using this solution, the MapView may still disappear a bit while the view is animating, but it comes back again after the animation finishes.

TextField Focus Bug on Titanium Mobile Android

When using the TextField inside a TableView, I noticed that it would lose focus immediately after being selected but the keyboard remains shown. If you type anything on the keyboard, nothing gets displayed on the TextField. After a bit of tinkering, I was able to replicate this behavior with a simple code:

1:       var win1 = Ti.UI.createWindow({  
2:            navBarHidden : true,  
3:            top : 0,  
4:            left : 0,  
5:            right : 0,  
6:            bottom : 0  
7:       });  
8:       var subView = Ti.UI.createView({  
9:            backgroundColor : '#ffffff',  
10:            top : 0,  
11:            left : 0,  
12:            right : 0,  
13:            bottom : 0  
14:       });  
15:       win1.add(subView);  
16:       var _data = [];  
17:       var tableViewRow = Ti.UI.createTableViewRow({  
18:            height : '45dp',  
19:            left : 0,  
20:            right : 0  
21:       });  
22:       var textField = Ti.UI.createTextField({  
23:            top : '5dp',  
24:            left : '20dp',  
25:            right : '20dp',  
26:            height : '35dp'  
27:       });  
28:       tableViewRow.add(textField);  
29:       _data.push(tableViewRow);  
30:       var tableView = Ti.UI.createTableView({  
31:            backgroundColor : '#c0c0c0',  
32:            data : _data,  
33:            top : '10dp',  
34:            left : '20dp',  
35:            right : '20dp',  
36:            bottom : '10dp'  
37:       });  
38:       subView.add(tableView);  
39:       win1.open();  

After searching through the code, I was able to determine that the auto height adjustment is the cause for the problem. To fix the bug, you need to set the height property of the TableView to a fixed value:

1:       var tableView = Ti.UI.createTableView({  
2:            backgroundColor : '#c0c0c0',  
3:            data : _data,  
4:            top : '10dp',  
5:            left : '20dp',  
6:            right : '20dp',  
7:            height : '380dp'  
8:       });  
9:       subView.add(tableView);  

To view the complete source check here

As an update to this solution, I found out that while setting the height of the TableView fixes the focus bug, it also affects the view in a way such that, some TextFields near the bottom of the table becomes obstructed by the android keyboard whenever they are active:

In the picture above, I selected the row labeled TextField 30 but as you can see, it is not visible since the keyboard is obstructing it.

Since I cannot find a suitable fix with this problem on the TableView, I decided it is time to use the ScrollView instead:

From what I have tested, this fixes the focus bug on the TextField, while also having similar display to the TableView.

Complete source for the second application is here

Loading Images from Application Data Directory Vs. Assets Directory on Titanium Mobile Android

While working on lists with images on an application, I noticed something weird: loading images  that I cached (created a copy on the local application directory) sometimes fails and blank views are instead shown on the screen.

At first I thought that the downloader is causing the memory leak since I don't set it to null after downloading the images. However, after setting it null (and the other objects I use for copying the file), nothing changed and still the views become blank after some use. After a lot of searching and trying different ways to load the images, I found out that when I load images from the assets directory, they do not disappear.

So to verify if my observation is correct, I performed a test. I created two separate windows with the same UI layout and objects, but one window is loading from the assets directory and one would load from the application data directory. Here is the comparison of the two views:

The picture on the left is the list loading images from the application data directory and the one on the right loads images from the assets directory. As you can see, some of the images on the left picture disappear after the list is scrolled several times.

In titanium all files under the resources directory are stored in the assets folder. So if the images you need to display will be used for a long time or is a permanent part of the application, I would suggest that you place it in the assets directory. If you need to display cached images, it would be better if you use the WebView just like what I previously did.

Full source code for my test application can be downloaded from here.