Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

[Android] Nested Windows in TabGroup don't work?

Hi,

I am trying to give a title bar to the Window that is shown by in a tab on Android.
While a window in a tab has a title bar on iPhone, the bar is not shown on Android.
But if you have an App that keeps the tabs on top (iPhone bottom) while displaying valuable information in the title (think NavigationController) this is neccessary.

The workaround I tried was to add an empty lightweight window to the tab, and then add a heavyweight window to that "container".

The code I used looks as follows:

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({  
    title:'Window 1',
    backgroundColor:'#f0f'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});


// This should be a "Lightweight Window" on Android,
// so it should be usable as a container(?)
var win2 = Titanium.UI.createWindow();

// The fullScreen attribute should make sure
// that this is a HeavyWeight window on Android
var win3 = Titanium.UI.createWindow({  
    title:'Window 3',
    backgroundColor:'#ff0',
    fullscreen: false
});

var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Label 2',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

// Add the container window
win2.add(win3);

var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

//  add tabs
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  

// open tab group
tabGroup.open();

However, this throws the classic error on Android when touching the second tab. (Sorry! The application has stopped unexpectedly).

Somebody out there have a solution to the "Title Bar in Tabbed Window" Problem?

— asked December 7th 2010 by Martin Leissler
  • android
  • bar
  • group
  • mobile
  • tab
  • tabgroup
  • title
  • window
0 Comments

3 Answers

  • Accepted Answer

    I think the problem is android doesn't allow windows inside windows.
    I had the same problem and found a reference somewhere that said to use views instead of windows in android and got it working. Not very obvious from the documentation though.

    — answered December 8th 2010 by Chris Rickels
    permalink
    3 Comments
    • It might work with Views, but they are - of course - no replacement for windows. Windows have a title bar, while Views don't. And a title bar within a tab is exactly what I'm trying to achieve on Android.

      At the end it boils down to the question how to build iPhone-style NavigationController UIs on Android side (within a tabbed environment). Do you (or anybody else) know if there is something cooking in that direction at Appcelerator?

      — commented December 8th 2010 by Martin Leissler
    • Android users don't typically respond well to iPhone UI conventions on their devices. You should design your application to match the User Experience that your end user is expecting.

      — commented December 8th 2010 by Don Thorp
    • I'm facing the same problem. I must disagree with Don though; I think its perfectly reasonable for wanting to display a title bar just above the tab group. See Foursquare's App on android for a good example. Compare this to GetGlue's App on android, which was developed with Titanium. I'm sure many would agree that having a title bar displayed for lightweight windows is very useful.

      Foursquare screen shot: http://www.android.com/market/data/screenshots/com.joelapenna.foursquared0.png

      GetGlue screen shot: http://android-apps.com/wp-content/uploads/2010/08/GetGlue_Android_Home.png

      — commented January 6th 2011 by Zheng Da Clinton Goh
  • — answered December 8th 2010 by Martin Leissler
    permalink
    0 Comments
  • Did any one find the answer to this?

    I want exactly the same as the following: http://android-apps.com/wp-content/uploads/2010/08/GetGlue_Android_Home.png

    Any help is appreciated.

    Cheers

    Chris

    — answered January 19th 2011 by Chris Maddison
    permalink
    1 Comment
    • Chris

      The OP's problem was that he was adding a window to a window, which is not permitted. If you have an issue, please post your own question.

      — commented January 19th 2011 by Paul Dowsett
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.