Hiding the Android ActionBar

With the introduction of the AppCompat library in SDK 3.3.0, the Android ActionBar is displayed by default. However, there are times when your app’s user interface calls for no ActionBar at all. In this blog post I’ll show you three different ways of hiding the ActionBar.

Method 1 : Hiding and Showing at will

The Titanium ActionBar object contains hide() and show() methods which allow you to control the ActionBar at will.
To hide:

    $.index.activity.actionBar.hide();

To show again:

    $.index.activity.actionBar.show();

These methods are useful for apps like news readers, where you’d like to give your user the option of maximizing the screen space upon clicking a button. One disadvantage of using this method is that it includes a smooth transition/animation while hiding and showing, so if you wish to open up your app with no ActionBar, you’ll still see the ActionBar hiding.

Method 2 : Changing the App Theme

As you saw in my previous blog post, you can manipulate the overall settings of your app using Android’s build-in theming system. This method will change your app so there will be no ActionBar at all. Your app will be completely full screen and you’ll have to build all your window titles and screen navigation by code.
Define the settings for your custom theme, for example, your theme at /platform/android/res/values/customtheme.xml could be:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.NoActionBar" parent="@style/Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

Then, activate this theme on your tiapp.xml:

Method 3 : Specifying the theme to be used by each window

To use this method, create as many Android themes as needed, for example one theme called NoActionBar and one called YesActionBar:
Define the the global app theme on your tiapp.xml just like before to set your app to launch without ActionBar. Now, if you want to open a Window that does have an ActionBar you can specify the new Window to use the YesActionBar theme:

<?xml version="1.0" encoding="utf-8"?>
<style name="Theme.NoActionBar" parent="@style/Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

<?xml version="1.0" encoding="utf-8"?>
<style name="Theme.YesActionBar" parent="@style/Theme.AppCompat">
    <item name="windowActionBar">true</item>
    <item name="android:windowNoTitle">false</item>
</style>

var w=Ti.UI.createWindow({
        backgroundColor: "red",
        theme: "Theme.YesActionBar" // this is only available starting on 3.3.1
});
// since we're using the ActionBar in this Window
// then we need to add the close function to the
// "up caret"
w.addEventListener('open',function(evt){
    var actionBar=evt.source.activity.actionBar;
    if (actionBar){
        actionBar.displayHomeAsUp=true;
        actionBar.onHomeIconItemSelected=function(e){
            evt.source.close();
        }
    }
})
w.open();

I’ve created Github repos for each of these methods so you can try it for yourself.