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.

Customise Basic Push Notifications on Urban Airship Android

For this tutorial, I modified the sample application code inside the Urban Airship package. To be able to follow, you must have the Urban Airship Push Sample application working on your side (have the urbanairship.properties file ready) and have the android-support-v4.jar properly setup (used for building the custom notification for the app).

From the sample app, you will notice that the basic push notification layout looks exactly the same for all your push alerts. It is sufficient if you want to make all your notifications standard but sometimes, you want to make differences for your alerts to help the user have a better idea of the type of message received (for example some notifications can be considered more important than others).

To start, you need to modify the MyApplication class. Previously, the code to customize the layout is this block:

1:  CustomPushNotificationBuilder nb = new CustomPushNotificationBuilder();  
2:  nb.statusBarIconDrawableId = R.drawable.icon_small;//custom status bar icon  
3:  nb.layout = R.layout.notification;  
4:  nb.layoutIconDrawableId = R.drawable.icon;//custom layout icon  
5:  nb.layoutIconId = R.id.icon;  
6:  nb.layoutSubjectId = R.id.subject;  
7:  nb.layoutMessageId = R.id.message;  
8:  PushManager.shared().setNotificationBuilder(nb);  

You can replace the code in that block with:

1:  BasicPushNotificationBuilder nb = new BasicPushNotificationBuilder() {  
2:       @Override  
3:       public Notification buildNotification(String alert,   
4:            Map<String, String> extras)   
5:       {  
6:            return null;  
7:       }  
8:  };  
9:  PushManager.shared().setNotificationBuilder(nb);  

The code above will prevent the push manager from handling the creation of the notification.

Going back to the MyApplication class, since we already have the IntentReceiver class as the handler for the intents from the push manager,

1:  PushManager.shared().setIntentReceiver(IntentReceiver.class);  

we can go to this class and start modifying it to handle the notification creation.

First, add a NotificationManager class instance to handle the sending of our custom notification. On my sample application, I placed it within the onReceive method:

1:      if (notificationManager == null) {  
2:           notificationManager = (NotificationManager)context.getSystemService(Context.NOTIFICATION_SERVICE);  

Then, find the block that handles the action for a push receive. On the push sample code, it is in here:

1:  if (action.equals(PushManager.ACTION_PUSH_RECEIVED)) {  
2:  }  

Add the code to create and send the Notification: (for this sample application, I am expecting the extra data value from the push to appear on this form: notif_type,notif_id,title,message and with key notif_data )

1:  if (action.equals(PushManager.ACTION_PUSH_RECEIVED)) {  
2:       String notif_test = intent.getStringExtra("notif_data");  
3:       if (notif_test != null) {  
4:             String[] notif_data = notif_test.split(",");  
5:             Uri ringToneUri = RingtoneManager.getDefaultUri((notif_data[0].equalsIgnoreCase("0")) ? RingtoneManager.TYPE_NOTIFICATION : RingtoneManager.TYPE_RINGTONE);  
6:             int notif_icon = (notif_data[0].equalsIgnoreCase("0")) ? android.R.drawable.ic_dialog_alert : android.R.drawable.ic_dialog_info;  
7:             NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context)  
8:             .setSound(ringToneUri)  
9:             .setSmallIcon(notif_icon)  
10:             .setContentTitle(notif_data[2])  
11:                      .setContentText(notif_data[3])  
12:                      .setAutoCancel(true)  
13:                      .setStyle(new NotificationCompat.InboxStyle());  
14:             Notification notification = mBuilder.build();  
15:             notificationManager.notify(Integer.parseInt(notif_data[1]), notification);  
16:       }  
17:  }   

When sending notifications, you can set the first part of the extra value (notif_type) to 0 or any number to change the icon and the tone played for the notification.

To view the complete source for my test application go here.

Smooth Scrolling List/TableView for Titanium Android

For those who have been using the Titanium TableView UI to render lists, you may have noticed that there is a significant lag on the scroll animation when the number of list items are increased. Most of the time, if there are images on the row, the list becomes choppy and sometimes the application crashes (especially on android).  Since most of the solutions I found only adds minimal improvement on the performance, I just accepted this issue as unresolvable until a titanium sdk update handles this.

However, after using different titanium views for a while, I accidentally discovered a viable alternative to the TableView. After seeing WebViews render lists containing a lot of items with ease, I realized that I can use it as a substitute for my TableViews.

To create a "ListView" type of UI on the WebView, I used the html Table on the code like below: (Please note that I have used Mustache for rendering the data on the html template)

1:  <table border="0" style="width:100%;">  
2:                 {{#table_rows}}  
3:                 <tr onclick="Ti.App.fireEvent('app:handleRowSelect', { index : '{{row_index}}' })">  
4:                      <td>  
5:                           <img src="{{{image_url}}}" style="width:320px; height:240px; position:relative; left:10px; top:5px;"/>  
6:                      </td>  
7:                 </tr>  
8:                 {{/table_rows}}  
9:  </table>   

As you can seen on the code, I just used styles to make the rows look like a list on a TableView.  You can also see that I am firing an event whenever a row is clicked. I'll explain later how it is used.. Here is what the views look like when running on Android tablet:

You can make them look almost exactly the same so the user wouldn't notice that you are indeed using only a WebView instead of a ListView on android.

To simulate the TableView "click" event handler, you must declare an event handler on your application to capture the event fired from your html:

1:  function handleRowSelect(e) {  
2:   alert('You have selected the row with index ' + e.index);  
3:  }  
4:    
5:  Ti.App.addEventListener('app:handleRowSelect', handleRowSelect);  

Whenever the app:handleRowSelect is fired from the HTML, the handleRowSelect function will be called and the event data will be passed as parameters to this function. From the HTML code above, the   Event is fired with an object that contains the index of the row: Ti.App.fireEvent('app:handleRowSelect', { index : '{{row_index}}' }) and from this, you will be able to perform any operation on the data corresponding to the row selected.

You can try and see for yourself the huge performance improvement from using the WebView for large lists on android from here

Gap Appears on HTML div When Using Titanium Webview on Android

I encountered this irritating bug when using a WebView on my application and I was trying to make a div that has a fixed position on the page. At first I thought I set the styles wrong but a further investigation confirms that a gap is really being generated when displaying the div on the WebView.

After looking a bit on my code I found out that Hardware Acceleration affects the WebView and causes this bug to appear. On my application, the setting (for hardware acceleration) can be found on the /platform/android/AndroidManifest.xml file.

Here is the part where the property is set:

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

Removing this setting fixes the WebView but if you really need hardware acceleration for your app, you are out of luck for the mean time. It's worth noting though that not all devices are affected by this bug. Here is the app running on smartphone without any problems:

Source code for my test project can be found in here.

Titanium Mobile Opening New Window Closes the Application on Android

I encountered this error while testing the application on someone else's Android device. I wondered why the application suddenly crashes whenever I open something on a new window. At first I thought it has something to do with memory allocation errors, but when I checked the logs, it shows nothing. Then finally, when I can't see anything wrong with the code, I checked the device and look for the differences of the device from the one I was using. Finally I saw this checkbox under android Settings -> Developer Options:

Apparently, enabling this setting closes the main activity of the android application even if it is still needed. To prevent this from happening, you need to change the initialization of the new window a bit.

In Titanium Android, when creating a window, setting the property navBarHidden to true will often create a new activity like the code below:

1:  var newWin = Ti.UI.createWindow({  
2:            navBarHidden : true,  
3:            backgroundColor : 'red',  
4:            top : 0,  
5:            left : 0,  
6:            right : 0,  
7:            bottom : 0  
8:       });  

To prevent a new activity from being called, just use the property modal and set it to true like the code below:

1:  var newWin = Ti.UI.createWindow({  
2:            navBarHidden : true,  
3:            backgroundColor : 'blue',  
4:            top : 0,  
5:            left : 0,  
6:            right : 0,  
7:            bottom : 0,  
8:            modal : true  
9:       });  

The full source code for the demo can be see here

Custom Font on Local Html for Titanium Mobile SDK WebView for Android

While trying to load a locally generated html on the android webview, I noticed that it was not able to render the text content with the custom font face I was using. After some searching, I found out that this issue is not only present on titanium sdk but also from the base android sdk as well (here is the link for the solution on android: Changing Font Face on Android Webview). Using essentially the same approach for the titanium code, here is what I did:

1. Put the font file on the Resource directory of the Titanium project. In here, I am using Airstream.ttf for my custom font face and I placed it in a subfolder named 'fonts' on the Resource folder.

2. Set the css code to use the font face accordingly.

<style type="text/css">
  body {
    font-family:Airstream;
    font-size:20pt;
  }
  @font-face {
     font-family : "Airstream";
     src:url("Airstream.ttf");
  }
</style>

3. On your application code, copy the font file to the directory where your local html (to be rendered on the WebView) will be written. In my code, I just used the default application directory.

1:  var fontFile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory + 'fonts/', 'Airstream.ttf');  
2:  var fontCopy = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'Airstream.ttf');  
3:  if (!fontCopy.exists()) {  
4:       fontFile.copy(Ti.Filesystem.applicationDataDirectory + 'Airstream.ttf');  
5:  }  

4. Write the html file in the same directory as the font file and load it on the webview:

1:  var htmlFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'test.html');  
2:  htmlFile.write(htmlContent);  
3:  if (htmlFile.exists()) {  
4:       webView.setUrl(htmlFile.nativePath);  
5:  }  

Here is what it looks like on the device:

 Source code for this project is available here