How to show title / navigation bar when open new window without modal properties in titanium mobile?

Question

i make simple titanium mobile application. at first i want to open new window when i press some button. when i use modal window, it can show a title bar so i can put back button in there, like this:

Here's my code for do that :

    var MainMenu = require('ui/common/option2/MainMenu');

    var mainMenuWindow = Titanium.UI.createWindow({
        title:'Main Menu',
        backgroundColor:'white',
        modal:true,
        navBarHidden:Ti.Platform.osname ==='android' ? true : false
    });

    var mainMenu = new MainMenu(mainMenuWindow);
    mainMenuWindow.add(mainMenu);

    mainMenuWindow.open();

but if i clear modal:true the title bar is not shown like this :

Has anyone know how to show/add title bar when open new window without modal? i've tried using toolbar, but it was really troublesome because i should define the font size, and even position of the button :( any suggestion for that? many thanks..

Answer 1

Actually there is a problem in showing the title bar without using modal, so for that here is the tweak.

You have to add a tabgroup and add your window to its tab and set `tabBarHidden' to true for that window.

you will see your title bar when you run the app..

here is the sample code for it

var tabGroup = Ti.UI.createTabGroup();

var win = Ti.UI.createWindow({
  backgroundColor:'#fff',
  tabBarHidden:true
});

var tab = Ti.UI.createTab({
   window: win,
  title: 'my win'
});

tabGroup.addTab(tab);

tabGroup.open();

The above solution will work in iOS.

For Android here is the trick:

Add these lines to your <app-project-dir>/platform/android/res/layout/titanium_tabgroup.xml file.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="0dp">

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="0dp"
        android:layout_weight="1"/>

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0"/>

</LinearLayout>

</TabHost>

Answer 2

You have set navBarHidden to true. Try this:

var mainMenuWindow = Titanium.UI.createWindow({
    title:'Main Menu',
    backgroundColor:'white',
    modal:true,
    navBarHidden: false // always show nav bar
});