Tab bar for Cordova on Android

License
Plugin code is licensed under the MIT license, ActionBarSherlock under the Apache License 2.0.
Features
- Compatible with Cordova 2.1.0 (older versions not tested)
- Should work on Android versions down to 2.1 (SDK version 7)
- You can register a callback function that is triggered when the selected tab changes
- Only tabs implemented (with text or icon), no other features of ActionBarSherlock
- If a tab is reselected, you won't be notified (TODO)
- Tab creation only from Java code, not from JavaScript (TODO)
- Cannot show/hide tab bar at runtime (TODO)
Setup
- Download ActionBarSherlock and add the
libraryfolder as Android library project (see ActionBarSherlock documentation) - Reference the library project in your own Android project and make sure both compile
- They must have the same Android support library JAR file, if any (same file checksum)
- You may have to change the compiler settings to use Java 1.6 (right-click project, Properties > Java Compiler)
- Copy
ActionBarSherlockTabBar.jsfromassets/wwwto the appropriate location in your project (e.g.assets/www) - Copy the
srcfolder to your project - Refresh your Android project (click on project name and press F5)
Now change your main activity (the one deriving from DroidGap) like this:
public class MainActivity extends DroidGap implements ActionBarSherlockTabBarPlugin.OnInitListener
{
private ActionBarSherlock sherlock = ActionBarSherlock.wrap(this);
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ActionBarSherlockTabBarPlugin.setOnInitListener(this);
// The following two lines have nothing to do with the plugin, just good practice in my opinion:
super.setIntegerProperty("loadUrlTimeoutValue", 60000);
// Show splashscreen up to 25 seconds (hidden when application is ready, see JavaScript code)
super.loadUrl("file:///android_asset/www/index.html", 25000);
}
private void createTabs()
{
ActionBarSherlockTabBarPlugin.instance.setSherlock(sherlock);
// You can either provide a text by string literal or resource ID (R.string.something).
ActionBarSherlockTabBarPlugin.instance.addTab("tab-home", "Home", null);
ActionBarSherlockTabBarPlugin.instance.addTab("tab-settings", R.string.tab_settings, null);
}
@Override
public void onActionBarSherlockTabBarPluginInitialized()
{
// Now it's safe to access ActionBarSherlockTabBarPlugin.instance because the plugin was instantiated
runOnUiThread(new Runnable() {
@Override
public void run()
{
createTabs();
}
});
}
// All setContentView methods are overridden because ActionBarSherlock has to modify the view
@Override
public void setContentView(int layoutResID)
{
// Don't call super!
sherlock.setContentView(layoutResID);
}
@Override
public void setContentView(View view)
{
// Don't call super!
sherlock.setContentView(view);
}
@Override
public void setContentView(View view, LayoutParams params)
{
// Don't call super!
sherlock.setContentView(view, params);
}
}
Set a compatible theme for the activity in AndroidManifest.xml. Predefined themes are Theme.Sherlock,
Theme.Sherlock.Light and Theme.Sherlock.Light.DarkActionBar. You can define your own with Android Action Bar Style
Generator. Note that the predefined ones must be prefixed
like @style/Theme.Sherlock.
As last step, register the plugin in your config.xml:
<plugin name="ActionBarSherlockTabBar" value="de.andidog.phonegapplugins.ActionBarSherlockTabBarPlugin" />
Usage
Use the plugin like so:
<script type="text/javascript" src="ActionBarSherlockTabBar.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
actionBarSherlockTabBar = cordova.require('cordova/plugin/actionBarSherlockTabBar')
// Note: setTabSelectedListener is the only exposed function at the moment
actionBarSherlockTabBar.setTabSelectedListener(function(tabTag) {
console.log('Tab ' + tabTag + ' selected')
})
}
</script>
See also the example project in the repository (note: you have to download and reference ActionBarSherlock yourself).