How do i get image or banner above the tab group in titanium android?

Question

I am still pretty new at this but I want a image/banner above the tab bar like this:

Image/Banner

Tab group

The tabs.

Is there any way on how to do this :P? I can only get it below the tabgroup.:(

This is my code:

console.log(Ti);
var xhr = Titanium.Network.createHTTPClient();
xhr.open("GET","http://rstandaert.createandlearn.eu/mobile_db.js");
xhr.onload = function(){

statusCode = xhr.status;

    if(statusCode == 200)
    {
        var doc = this.responseText;

        var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'mobile_db.js');
        f.write(doc);
    }
 
    };
xhr.send();

var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, 'mobile_db.js');
 


Ti.include(f.nativePath);


Titanium.UI.setBackgroundColor('#DCE6F2');

var tabGroup = Titanium.UI.createTabGroup();


var win1 = Titanium.UI.createWindow({  
    title:"Niveau's",
    backgroundColor:'#DCE6F2',
        window: win1
});

 var win2 = Titanium.UI.createWindow({  
    title:"Domeinen",
    backgroundColor:'#DCE6F2',
        window: win2
});

  var win3 = Titanium.UI.createWindow({  
    title:"Leerwegen",
    backgroundColor:'#DCE6F2',
        window: win3
});

 var win4 = Titanium.UI.createWindow({  
    title:"Instellingen",
    backgroundColor:'#DCE6F2',
        window: win4
});
 var header= Titanium.UI.createView({
    backgroundImage:'logo.jpg',
    //backgroundColor: 'black', 
    top: 0, left:0, 
    height:65, width:320
}); 

var tab3 = Titanium.UI.createWindow({  
    title:'Leerwegen',
    backgroundColor:'#DCE6F2',
        window: win3
});
var tab4 = Titanium.UI.createWindow({  
    title:'Instellingen',
    backgroundColor:'#DCE6F2',
        window: win4
});


var data = [
{title:'Niveau 2', hasChild:true, dest:'Car_1.js', color: '#333333'},
{title:'Niveau 3', hasChild:true, dest:'Car_2.js', color: '#333333'},
{title:'Niveau 4', hasChild:true, dest:'Car_3.js', color: '#333333'}
];

var domeinen = [
{title:'Bouw & infra', hasChild:true, dest:'Dom_1.js', color: '#333333'},
{title:'Afbouw & Onderhoud', hasChild:true, dest:'Dom_2.js', color: '#333333'},
{title:'Techniek en Procesindustrie', hasChild:true, dest:'Dom_3.js', color: '#333333'},
{title:'Media en Vormgeving', hasChild:true, dest:'Dom_4.js', color: '#333333'},
{title:'Informatie en Communicatie technologie', hasChild:true, dest:'Dom_5.js', color: '#333333'},
{title:'Transport, Scheepvaart en Logistiek', hasChild:true, dest:'Dom_6.js', color: '#333333'},
{title:'Mobiliteit en Voertuigen', hasChild:true, dest:'Dom_7.js', color: '#333333'},
{title:'Handel en Ondernemerschap', hasChild:true, dest:'Dom_8.js', color: '#333333'},
{title:'Economie en Administratie', hasChild:true, dest:'Dom_9.js', color: '#333333'},
{title:'veiligheid en Sport', hasChild:true, dest:'Dom_10.js', color: '#333333'},
{title:'Zorg en Welzijn', hasChild:true, dest:'Dom_11.js', color: '#333333'}
];

var Leerwegen = [
{title:'BOL' , hasChild:true, dest:'lw_1.js', color: '#333333'},
{title:'BBL', hasChild:true, dest:'Lw_2.js', color: '#333333'},
{title:'Deeltijd BBL', hasChild:true, dest:'Lw_3.js', color: '#333333'}
];

var Instellingen = [
{title:'ROC' , hasChild:true, dest:'Is_1.js', color: '#333333'},
{title:'Scalda' , hasChild:true, dest:'Is_2.js', color: '#333333'},
{title:'AOC', hasChild:true, dest:'Is_3.js', color: '#333333'},
{title:'Vakscholen', hasChild:true, dest:'Is_4.js', color: '#333333'}
];


var table = Ti.UI.createTableView({
    data: data
});

var table1 = Ti.UI.createTableView({
    data: domeinen
});

var table2 = Ti.UI.createTableView({
    data: Leerwegen
});

var table3 = Ti.UI.createTableView({
    data: Instellingen
});

table.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab1.open(newWin);
}
});
table1.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin2 = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab2.open(newWin2);
}
});
table2.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin3 = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab3.open(newWin3);
}
});

table3.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin4 = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab4.open(newWin4);
}
});

var view = Ti.UI.createView();
view.add(table);
win1.add(view);

var view2 = Ti.UI.createView();
view2.add(table1);
win2.add(view2);

var view3 = Ti.UI.createView();
view3.add(table2);
win3.add(view3);

var view4 = Ti.UI.createView();
view4.add(table3);
win4.add(view4);




var tab3 = Titanium.UI.createTab({  
    title:'Leerwegen',
       window:win3
});
var tab4 = Titanium.UI.createTab({  
    title:'Instellingen',
       window:win4
});
var tab2 = Titanium.UI.createTab({  
    title:'Domeinen',
    window:win2
});


var tab1 = Ti.UI.createTab({
    title:  "Niveau's",
    window: win1
});

var imageView = Titanium.UI.createImageView({
    image:'topbanner.jpg',
    width:'100%',
    top:0,
    left:0
});
 
win1.add(imageView);

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2); 
tabGroup.addTab(tab3); 
tabGroup.addTab(tab4);  
tabGroup.open();

Thanks in advance!!!

Answer 1

TabGroup is a top-level container component, meaning it can't be added inside anything. Content must be in windows inside tabs inside the tab group.There's no way to add a header/banner above the tab group itself.You could create a custom component that looks and operates like a tab group

Please refer this link.