Very Newbie Question... How can I create a multi tab bar?

I’m very new to Corona and am having difficulty working out how to create a tab bar with more than two buttons. The reason I ask is that I have already attempted to create this using the default code with corona for a new app which already has two buttons but when I attempt to add a third it doesn’t run any longer. It works fine until I enter 

[lua]

defaultFile=“btnForms.png”, 

overFile=“btnFormsDown.png”, 

width = 106, height = 50, 

onPress=onThirdView 

},

[/lua]

I’ve also attached all the files that i’m using if it helps. The code in the whole page looks like this…

[lua]

– main.lua


display.setDefault( “background”, 255, 255, 255 )

display.setStatusBar( display.DefaultStatusBar )

local widget = require “widget”

local composer = require “composer”

– event listeners for tab buttons:

local function onFirstView( event )

composer.gotoScene( “home” )

end

local function onSecondView( event )

composer.gotoScene( “settings” )

end

local function onThirdView( event )

composer.gotoScene( “forms” )

end

– table to setup buttons

local tabButtons = {

defaultFile=“btnHome.png”, 

overFile=“btnHomeDown.png”, 

width = 106, height = 50, 

onPress=onFirstView, 

selected=true 

},

{

defaultFile=“btnSettings.png”, 

overFile=“btnSettingsDown.png”, 

width = 106, height = 50, 

onPress=onSecondView

},

defaultFile=“btnForms.png”, 

overFile=“btnFormsDown.png”, 

width = 106, height = 50, 

onPress=onThirdView 

},

}

– create the actual tabBar widget

local tabBar = widget.newTabBar{

top = display.contentHeight - 50,

buttons = tabButtons

}

onFirstView() – invoke first tab button’s onPress event manually
[/lua]

Thanks guys. :slight_smile:

Hi @sulmaxcp,

I tested your project and, if you look at the Terminal/console, you’ll see this error message:

ERROR: widget.newTabBar: width passed is too small to fit the tab items inside, you need a width of at least 322 to fit your tab items inside

So, you need to increase the width to fit all of the tabs.

On that note, since you are just beginning with Corona, you should read the debugging guide and become familiar with the basics of debugging your projects as you go along:

http://docs.coronalabs.com/guide/basics/debugging/index.html

Take care,

Brent

Thank you, it has worked perfectly now everything is showing on screen.

I have one little issue still however and there is a small dark blue rectangle which hides behind my tab buttons, I have been looking and looking and really can’t seam to find out where it is coming from. I have even tried to cover it with an image but it sits between the image and the tab buttons. I have attached my files if it helps and an image to show you how it appears when installed on my device and the simulator. 

Thanks again,

Matt :slight_smile:

Hi @sulmaxcp,

Tab bar widgets have a “background” image, in addition to the image(s) you use for buttons. I think this is what you’re seeing behind your buttons. To make this more visually appealing, I suggest that you create a simple white image (can be fairly small, like 10x10 pixels) and then specify that image in the tab bar declaration like this:

[lua]

local tabBar = widget.newTabBar{

   top = display.contentHeight - 7,

   buttons = tabButtons,

   backgroundFile = “whiteBack.png”

}

[/lua]

Brent

I created a simple 10 x 10 white box and saved it as whiteBack.png in my resource folder and then entered the code you supplied. However, it keeps giving me an error. Any ideas?

ERROR: widget.newTabBar: tabSelectedLeftFile expected, got nil

stack traceback:

[C]: in function ‘error’

?: in function <?:729>

(tail call): ?

?: in function <?:122>

(tail call): ?

c:\users\matt\documents\corona projects\tab bar\main.lua:50: in main chunk

Thanks again,

Matt.

Hi Matt,

I think I know what that’s occuring, but the solution would be a little more complicated. I think a much easier solution, if you have the images to edit, is putting a little white line (thin white border on each side) of each of your buttons, and make sure that they meet edge-to-edge in your layout.

Another option is to use “radio button switches” instead. That might seem odd, but it’s actually easy. In each case, you would have an “on” and “off” image for each item (you already have these), but instead of assembling them in a tab bar widget, just make 3 radio button switches and place them side-by-side. Here’s the documentation on that:

http://docs.coronalabs.com/api/library/widget/newSwitch.html

Take care,

Brent

The radio buttons have worked amazingly, there isn’t any white boxes in the way nothing everything looks clean as I needed. I have managed to set it up with the onPress to change the scene as well and works great. Although I do have one question how would I get it to load my Home page as the button says it is on the homepage but the screen appears black until I click the home button even know it says its already on the Home page. Is there a way to get it to initialize when it loads? I’ve tried simply

[lua]local results = composer.loadScene( “home” ) [/lua] 

but this didn’t do anything. 

Thanks again,

Matt.

Hi Matt,

Well, the slight difference is that “composer.loadScene()” loads the scene in the background but it doesn’t actually go to that scene… so consider that a pre-loading method. If you want to actually go to the home scene, you should use “composer.gotoScene()” instead.

Or perhaps I’m not understanding your intention. When you start your app, I assume from “main.lua” at some point, you “.gotoScene()” to your “home” scene? At that point, you should set that radio button as active.

If I’m still not understanding your question, let me know…

Take care,

Brent

The “gotoScene(“home”)” was exactly what I was looking for thanks for your help.

Matt.  :slight_smile:

Hi @sulmaxcp,

I tested your project and, if you look at the Terminal/console, you’ll see this error message:

ERROR: widget.newTabBar: width passed is too small to fit the tab items inside, you need a width of at least 322 to fit your tab items inside

So, you need to increase the width to fit all of the tabs.

On that note, since you are just beginning with Corona, you should read the debugging guide and become familiar with the basics of debugging your projects as you go along:

http://docs.coronalabs.com/guide/basics/debugging/index.html

Take care,

Brent

Thank you, it has worked perfectly now everything is showing on screen.

I have one little issue still however and there is a small dark blue rectangle which hides behind my tab buttons, I have been looking and looking and really can’t seam to find out where it is coming from. I have even tried to cover it with an image but it sits between the image and the tab buttons. I have attached my files if it helps and an image to show you how it appears when installed on my device and the simulator. 

Thanks again,

Matt :slight_smile:

Hi @sulmaxcp,

Tab bar widgets have a “background” image, in addition to the image(s) you use for buttons. I think this is what you’re seeing behind your buttons. To make this more visually appealing, I suggest that you create a simple white image (can be fairly small, like 10x10 pixels) and then specify that image in the tab bar declaration like this:

[lua]

local tabBar = widget.newTabBar{

   top = display.contentHeight - 7,

   buttons = tabButtons,

   backgroundFile = “whiteBack.png”

}

[/lua]

Brent

I created a simple 10 x 10 white box and saved it as whiteBack.png in my resource folder and then entered the code you supplied. However, it keeps giving me an error. Any ideas?

ERROR: widget.newTabBar: tabSelectedLeftFile expected, got nil

stack traceback:

[C]: in function ‘error’

?: in function <?:729>

(tail call): ?

?: in function <?:122>

(tail call): ?

c:\users\matt\documents\corona projects\tab bar\main.lua:50: in main chunk

Thanks again,

Matt.

Hi Matt,

I think I know what that’s occuring, but the solution would be a little more complicated. I think a much easier solution, if you have the images to edit, is putting a little white line (thin white border on each side) of each of your buttons, and make sure that they meet edge-to-edge in your layout.

Another option is to use “radio button switches” instead. That might seem odd, but it’s actually easy. In each case, you would have an “on” and “off” image for each item (you already have these), but instead of assembling them in a tab bar widget, just make 3 radio button switches and place them side-by-side. Here’s the documentation on that:

http://docs.coronalabs.com/api/library/widget/newSwitch.html

Take care,

Brent

The radio buttons have worked amazingly, there isn’t any white boxes in the way nothing everything looks clean as I needed. I have managed to set it up with the onPress to change the scene as well and works great. Although I do have one question how would I get it to load my Home page as the button says it is on the homepage but the screen appears black until I click the home button even know it says its already on the Home page. Is there a way to get it to initialize when it loads? I’ve tried simply

[lua]local results = composer.loadScene( “home” ) [/lua] 

but this didn’t do anything. 

Thanks again,

Matt.

Hi Matt,

Well, the slight difference is that “composer.loadScene()” loads the scene in the background but it doesn’t actually go to that scene… so consider that a pre-loading method. If you want to actually go to the home scene, you should use “composer.gotoScene()” instead.

Or perhaps I’m not understanding your intention. When you start your app, I assume from “main.lua” at some point, you “.gotoScene()” to your “home” scene? At that point, you should set that radio button as active.

If I’m still not understanding your question, let me know…

Take care,

Brent

The “gotoScene(“home”)” was exactly what I was looking for thanks for your help.

Matt.  :slight_smile: