Tab Bar

Getting Started Newbie Questions
#1

My tab bar is giving some problems . When I enter the height on the tab bar it doesn’t change at all . It stays the same at the bottom of the screen . When I look at it on my phone, it’s a little it above the screen leaving a gap between the bottom of the screen and the tab bar . I have tried changing top = display.contentHeight +30, but that didn’t work . I tried all kinds of number and I tried the - and + . The code I just put above is the last method I tried . Please help .

local tabButtons = { { label = "#News Feed", width = 52, height = 10, id = "newsfeed", size = 16, onPress = function() composer.gotoScene("newsfeed"); end, selected = true }, { label = "#Profile", size = 16, id = "profile", onPress = function() composer.gotoScene("profile"); end, selected = true } } -- Create the widget local tabBar = widget.newTabBar( { top = display.contentHeight +30, width = display.contentWidth, buttons = tabButtons, } ) screenGroup:insert(tabBar)
#2

The code worked fine for me.  Using [lua] display.contentHeight +30 [/lua] put the tab bar below the viewable content of the screen but [lua] display.contentHeight -200 [/lua] put the tab bar nice and high 

I had to comment out the [lua] --screenGroup:insert(tabBar) [/lua] to make it work.  Curious, is screenGroup intentional or were you trying to insert it into the sceneGroup as in the composer standard [lua] local sceneGroup = self.view [/lua] ?

What build are you using?

#3

There are two important concepts that you should understand.  

The first one is content area vs. screen shape/size.  Most likely you have a config.lua that’s setting up a content area that is 50% taller than it is wide. This is normal for Corona-made apps.  But most phones are 78% taller than they are wide, while tablets like the iPad are only 25% taller than they are wide.  The technical term for this is “aspect ratio”.  Since you can’t know what the actual device is that your app will run on, you have to code while thinking about this.

Many people use a self-calculating config.lua to have the content area match the device. I don’t know what your config.lua looks like, but it’s always safe to use display.actualContentHeight to find the bottom of the screen regardless of your config.lua setup. The default height of a tabBar is 52 and you are not setting it, so in theory setting 

top = display.actualContentHeight - 52

would anchor it at the bottom of the screen.

The other concept is what should be in a scene and what should not. For me, when building business style apps (i.e. with tabBars at the bottom and navigation bars at the top), I never put these objects in my scenes. They are part of the UI that will always be on the screen. With Composer, when you **do not** put objects in your composer scene, they will sit on top of the scenes and always be visible.  I always create my tabBar and their button’s in main.lua and use composer.gotoScene() to load scenes behind the tabBar.

Rob

#4

So how would I create the Tabbar in my main.lua file and make it visible 

#5

Anything like the tabbar that you DO NOT put into your sceneGroup will always be on top of your scenes. It will be magically visible for you. As long as you’re putting all of your scene content in the sceneGroup, it will just work.

Rob

#6

When I do that, the tab bar shows up on my login and register page and if I click on one of them they go into the app without logging in . How can I stop that ?

#7

Maybe try to use the .isVisible property.

You will have to find a way to make your tabBar accessible in your scenes. There are multiple ways to do this.  Then you can use:

tabBar.isVisible = false

to hide it, or

tabBar.isVisible = true

to show it. You can use Composer’s setVariable and getVariable methods as probably the easiest way to do this.

In main.lua after you create the tabBar do:

composer.setVariable("savedTabBar", tabBar) tabBar.isVisible = false

This will hide your tabBar. When you’re ready to show your tabBar in a scene where you want it during the scene’s show event’s “did” phase:

local tabBar = composer.getVariable("savedTabBar") tabBar.isVisible = true

If you go to a scene where you don’t want the tabBar to show, in its scene:show()'s “did” phase.

local tabBar = composer.getVariable("savedTabBar") tabBar.isVisible = false

Rob

#8

I am trying to change the color of the background . I know I need an image but when I try to upload an image I am getting an error saying tabSelectedMiddleFile expected but I don’t have a middle tab . I only have a left and a right . I am using

these docs as an example https://docs.coronalabs.com/api/library/widget/newTabBar.html#backgroundfile-optional .

#9

The images are not related to the number of tabs you have.  Each tab is made up of three images, a left side cap,  a center that’s stretched to fill the tab and a right side cap.  The three images are used for each actual tab. 

Rob

#10

I have tried this 

backgroundFile = "tabBarBack.png", tabSelectedLeftFile = "tabBarSelL.png", tabSelectedRightFile = "tabBarSelR.png", tabSelectedMiddleFile = "tabBarSelM.png",

and this 

local tabButtons = { { width = 72, height = 120, defaultFile = "tabBarIconDef.png", overFile = "tabBarIconOver.png", label = "Tab1", id = "tab1", selected = true, size = 16, labelYOffset = -8, onPress = handleTabBarEvent }, { width = 72, height = 120, defaultFile = "tabBarIconDef.png", overFile = "tabBarIconOver.png", label = "Tab2", id = "tab2", size = 16, labelYOffset = -8, onPress = handleTabBarEvent }, { width = 72, height = 120, defaultFile = "tabBarIconDef.png", overFile = "tabBarIconOver.png", label = "Tab3", id = "tab3", size = 16, labelYOffset = -8, onPress = handleTabBarEvent } }
#11 
backgroundFile = "tabBarBack.png", tabSelectedLeftFile = "tabBarSelL.png", tabSelectedRightFile = "tabBarSelR.png", tabSelectedMiddleFile = "tabBarSelM.png",

Those need to be inside your tabBar creator:

tabBar = widget.newTabBar{ top = display.contentHeight - 50, left = 0, width = display.contentWidth, backgroundFile = "tabBarBack.png", tabSelectedLeftFile = "tabBarSelL.png", -- New tabSelectedRightFile = "tabBarSelR.png", -- New tabSelectedMiddleFile = "tabBarSelM.png", -- New tabSelectedFrameWidth = 20, -- change these tabSelectedFrameHeight = 50, -- to what you buttons = tabButtons, height = 50, -- you need }
#12

Do you think it would be better for me if I built my app with Android Studio or stay with this ? 

#13

I don’t know what your skill level is with Java, The Android SDK APIs,  XML, Gradle and Android Studio, but from my experience, I can’t see why it how it would be easier to do this in native code and if you do ever want to support iOS, you would have to get comfortable with Macs, Xcode, Objective C and/or Swift and their overly complex APIs.

Corona’s API’s are for the most part designed for simplicity.  You just need to be willing to invest time in looking at the docs, looking at the sample code such as the samples shipped with Corona or the Business App sample: https://github.com/coronalabs-samples/business-app-sample and learn new things.

Rob

#14

Corona it is 

#15

I have this code :

-- Create the widget tabBar = widget.newTabBar{ top = display.contentHeight -38, left = 0, width = display.contentWidth, backgroundFile = "insta.jpg", tabSelectedLeftFile = "insta.jpg", -- New tabSelectedRightFile = "insta.jpg", -- New tabSelectedMiddleFile = "insta.jpg", -- New tabSelectedFrameWidth = 20, -- change these tabSelectedFrameHeight = 50, -- to what you buttons = tabButtons, height = 50, -- you need }

And I’m getting this error :

ERROR: Runtime error 22:24:38.241 ERROR: widget.newTabBar: defaultFile expected, got nil 22:24:38.241 stack traceback: 22:24:38.241 [C]: in function 'error' 22:24:38.241 ?: in function '?' 22:24:38.241 ?: in function \<?:754\> 22:24:38.241 (tail call): ? 22:24:38.241 ?: in function \<?:119\> 22:24:38.241 (tail call): ? 22:24:38.241 C:\Users\user\Documents\Corona Projects\app\main.lua:26: in main chunk

This is line 26 : tabBar = widget.newTabBar{

#16

I just tried this and I’m still getting the same error :

local tabButtons = { { label = "#News Feed", width = 52, height = 15, id = "newsfeed", defaultFile = "insta.jpg", overFile = "insta.jpg", size = 16, onPress = function() composer.gotoScene("newsfeed"); end, selected = true }, { label = "#Profile", size = 16, id = "profile", defaultFile = "insta.jpg", overFile = "insta.jpg", onPress = function() composer.gotoScene("profile"); end, selected = true } } -- Create the widget tabBar = widget.newTabBar{ top = display.contentHeight -38, left = 0, width = display.contentWidth, backgroundFile = "insta.jpg", tabSelectedLeftFile = "insta.jpg", -- New tabSelectedRightFile = "insta.jpg", -- New tabSelectedMiddleFile = "insta.jpg", -- New tabSelectedFrameWidth = 20, -- change these tabSelectedFrameHeight = 50, -- to what you buttons = tabButtons, height = 50, -- you need }
#17

It’s complaining that you are not providing values to this:

local tabButtons = { { label = "#News Feed", width = 52, height = 15, id = "newsfeed", defaultFile = "insta.jpg", --\<------ overFile = "insta.jpg", --\<------ size = 16, onPress = function() composer.gotoScene("newsfeed"); end, selected = true },

This error doesn’t make sense to me because you are providing a string value even though the image may not exist, the error says you’re passing nil here. I’m not sure of the cause.  Regardless the images referenced here are the icons that go on the tabs.  insta.jpg is the file you’re using for the three parts that makes up each background tab portion.  Ther result would be no icons.

But that still doesn’t explain the error. Can you show more of your code around the creation of your tabView?

Rob

#18

This is my main.lua with all of the tab code 

local composer = require( "composer" ) composer.gotoScene("register") local widget = require("widget") local tabButtons = { { label = "#News Feed", width = 52, height = 15, id = "newsfeed", defaultFile = "insta.jpg", overFile = "insta.jpg", size = 16, onPress = function() composer.gotoScene("newsfeed"); end, selected = true }, { label = "#Profile", size = 16, id = "profile", defaultFile = "insta.jpg", overFile = "insta.jpg", onPress = function() composer.gotoScene("profile"); end, selected = true } } -- Create the widget tabBar = widget.newTabBar{ top = display.contentHeight -38, left = 0, width = display.contentWidth, backgroundFile = "insta.jpg", tabSelectedLeftFile = "insta.jpg", -- New tabSelectedRightFile = "insta.jpg", -- New tabSelectedMiddleFile = "insta.jpg", -- New tabSelectedFrameWidth = 20, -- change these tabSelectedFrameHeight = 50, -- to what you buttons = tabButtons, height = 50, -- you need } composer.setVariable("savedTabBar", tabBar) tabBar.isVisible = false
#19

The only thing I see that I would change is to move this line of code:

composer.gotoScene("register")

to the very end.  Beyond that I can’t see your image files, where they are located. Maybe consider zipping up the project and sharing it here so the community can actually run it and see if we can find the problem.

Rob

#20

screw it . It’s not that bad without it .