Titanium Action Bar Module for Android

Titanium Action Bar Module for Android

Introduction

It’s been a while since we posted something on mobile technology so we hope this free module makes up for the lost time. Let’s dive in! Recently, we worked on a project Titanium mobile application to support Android devices. In this process we coded a basic foundation for an action bar module.

The main reason for creating this module is to provide a navigation bar in template application. The native android action bar does surplus activities, which helps us add an app logo/icon, different navigation bar types, action buttons and a drop down ‘more’ button. For now we’ll just stick to basic navigation tabs. We can easily extend in case of necessity. We can also add more features based on our future apps.

action_bar_basics

Android users can read the design and api guides from Google to familiarize the UI module. Our focus was mainly on the Navigation tab. This tab can be used in Android and other phones. Some apps in the Apple AppStore, use this design pattern (Google Chrome for example). We are using a Tab Group on the iOS version of the store template but it might change in future.

action_bar_pattern_default_tabsThe tabs will stretch out to fill up the horizontal space of the parent container (window or view). We can change the recommended height up to 48dp. The second color theme is used as default setting, as shown in fig 2. We can override these settings in the action bar constructor call. Also the navigation tabs are wrapped in a navigation group view this helps us to add more to the action bar down the road (like app icon and action buttons). Now with our basic design done, let’s move to the coding part.

Solution

Let’s use the recommended CommonJS module pattern to build and include action bar. To start with, create a simple module with the ActionBarView constructor.

The background colour will serve as the top and bottom border for the action bar. We did not use the normal view border because it is not necessary in case of a native action bar. The layout is set to horizontal to keep each tab relative to the previous one.

Next we need a factory function to build the navigation group to hold the tabs. This is just another view with a horizontal layout to manage the tab components. Creating the navigation group gives us flexibility to add more to the action bar. Here’s the basic function.

We used the underscore prefix to keep track of local function variables. The NavigationTabGroup function expects a tabs array object with settings for each tab. It will loop through the array and build each tab, and add to the navigation view. The position of the navigation view is 1px from the top and bottom so that the action bar view background can show as top and bottom border. There are two new factory functions we use in the loop to build each tab and tab separator. Let’s take a look at them.

The build Tab function creates the UI components required for a tab view. A basic view provides the container as well as the selected indicator. Next add a label in the view to cover the background colour and display the tab text. When a tab is selected then reduce the height of the label to show the background about 4dp. The click event handler will fire the navigation group tab click event with the tab id. This will get used to set the selected tab and so our app can figure out the next move (ex. switch views or display sub-menu). The object returned contains the tab view and a select function to handle the tab UI state.

Conclusion

In this blog we have learnt to construct Android action bar module with Appcelerator Titanium.  We can also upgrade the action bar by adding more features to it.

References

https://gist.github.com/Mode54/3160126

4982 Views 1 Views Today