Hi there, I am new to Corona and keen to customize the TabBar i.e. change background colour so that the tabButtons (and the selected tab) stand out more.
I know there is a backgroundFile option but it needs tabSelectedLeftFile / RightFile / MiddleFile which I don’t understand. So hopefully someone out there can assist !
Hi Julie,
The three parts you mention (tabSelectedLeftFile / RightFile / MiddleFile) work like this.
Say you wanted to make a rounded rectangle for your tab selected at 60x40.
The left file would be the left most part of the rounded rectangle containing the leftmost rounded corners. You could make this size say 20x40. Same with the right but mirrored. The middle part would have perfectly square corners and in the example it would be 20x40.
Best way to do it is to create your full tabselected file in gimp or photoshop etc. Then crop the middle at 20x40, then crop the left at 20px wide x40, then same for the right part.
Hopefully that makes sense? In the end if you lined them up left, middle right, they would create your full rounded rectangle.
The reason its done this way, is so that you can scale everything to suit your needs. Say you wanted to make your tab 80x40, well what corona would do is leave the left and right at 20x40, but stretch your middle image to 40x40, giving you the exact same roundedness for the corners no matter what scale you use.
Thanks for great and speedy explanation Icy Spark !
So does this mean that I can’t change colour / opacity of tabBar background without going through this process ?
So are you referring to the tabbar background or the tabselected files? In the example I gave it was for the tabselected files. In other words once you press the tab it will highlight that section of your tab with the tabselected files.
You can create your own full tabbar background as its considered 1 rectangular file with just the one image. You can color it and set its opacity as you see fit.
Please don’t confuse the backgroundFile with the tabSelected files. The backgroundFile is for the full tab and the tabSelected files are only used to slightly highlight it.
See tab 2 on the image here the backgroundFile is plain black whereas the tabselected files are translucent with rounded corners: 
Thanks once again for your clarification. Yes I was confusing the two !
So it looks like I need to :
(1) change tabSelected background using the tabSelected files - needed cos at the moment it’s difficult to make out which of the Tabs is selected
(2) change the tabBar background to my chosen colour and opacity - but I’m not sure how? I had thought it was the “backgroundFile” option when creating tabBar but that’s when the code required tabSelectedLeftFile etc… so could do with some guidance here !
OK here is an example from my app:
[lua]
local bottomtab = widget.newTabBar
{
left = 0,
top = 440,
height = 40,
width = 320,
backgroundFile = “assets/tabbar.png”,
tabSelectedLeftFile = “images/tabBar_tabSelectedLeft.png”,
tabSelectedMiddleFile = “images/tabBar_tabSelectedMiddle.png”,
tabSelectedRightFile = “images/tabBar_tabSelectedRight.png”,
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 40,
buttons = tabButtons
}
[/lua]
If you want to make your tabbar all blue for example then you could create a blue rectangle thats 320px wide x 40px high in gimp or photoshop or paint and save it to your images folder and call it tabbar.png
Just to be clear, there are six required parameters to widget.newTabBar() that involve customizing the look. They are:
String. This is the background image of the TabBar.
tabSelectedLeftFile (required)
String. This is the left edge image of the TabBar’s selected graphic.
tabSelectedMiddleFile (required)
String. This is the middle image of the TabBar’s selected graphic.
tabSelectedRightFile (required)
String. This is the right edge image of the TabBar’s selected graphic.
tabSelectedFrameWidth, tabSelectedFrameHeight (required)
Numbers. This is the width/height of the TabBar’s selected graphic.
The first one is a graphic, usually 50px high and 320px wide if your content area is the typical 320x480. It can be whatever you want it to be. For many it’s a gradient filled bar.
@Icy Spark gave a real good description of tabSelectedLeftFile, tabSelectedMiddleFile, and tabSelectedRightFile. This is an overlay that will show the tab is highlighted. In one of my apps, each are 20x50 filled with the color {52, 52, 52} a dark gray but are at like 50% opacity. Here is a sample code block from my app:
mydata.tabBar = widget.newTabBar { top = display.contentHeight - 50, left = 0, backgroundFile = "images/tabBarBg.png", tabSelectedLeftFile = "images/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "images/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "images/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 50, buttons = mydata.tabButtons }Have it working at last so thank you both very much.
I had thought I would be able to add a background file for tabBar without needing to customize the tabSelected too but it wouldn’t let me do this. It kept expecting a tabSelectedLeftFile… so now I’ve done both.
Have a related query on using spritesheets for Buttons but will open a separate thread for that.
Thanks again !
You could always just make the selected tab images transparent if you didn’t want the effect. iOS 7 tab bars are like that.
Ok thanks Rob !
Hi Julie,
The three parts you mention (tabSelectedLeftFile / RightFile / MiddleFile) work like this.
Say you wanted to make a rounded rectangle for your tab selected at 60x40.
The left file would be the left most part of the rounded rectangle containing the leftmost rounded corners. You could make this size say 20x40. Same with the right but mirrored. The middle part would have perfectly square corners and in the example it would be 20x40.
Best way to do it is to create your full tabselected file in gimp or photoshop etc. Then crop the middle at 20x40, then crop the left at 20px wide x40, then same for the right part.
Hopefully that makes sense? In the end if you lined them up left, middle right, they would create your full rounded rectangle.
The reason its done this way, is so that you can scale everything to suit your needs. Say you wanted to make your tab 80x40, well what corona would do is leave the left and right at 20x40, but stretch your middle image to 40x40, giving you the exact same roundedness for the corners no matter what scale you use.
Thanks for great and speedy explanation Icy Spark !
So does this mean that I can’t change colour / opacity of tabBar background without going through this process ?
So are you referring to the tabbar background or the tabselected files? In the example I gave it was for the tabselected files. In other words once you press the tab it will highlight that section of your tab with the tabselected files.
You can create your own full tabbar background as its considered 1 rectangular file with just the one image. You can color it and set its opacity as you see fit.
Please don’t confuse the backgroundFile with the tabSelected files. The backgroundFile is for the full tab and the tabSelected files are only used to slightly highlight it.
See tab 2 on the image here the backgroundFile is plain black whereas the tabselected files are translucent with rounded corners:
Thanks once again for your clarification. Yes I was confusing the two !
So it looks like I need to :
(1) change tabSelected background using the tabSelected files - needed cos at the moment it’s difficult to make out which of the Tabs is selected
(2) change the tabBar background to my chosen colour and opacity - but I’m not sure how? I had thought it was the “backgroundFile” option when creating tabBar but that’s when the code required tabSelectedLeftFile etc… so could do with some guidance here !
OK here is an example from my app:
[lua]
local bottomtab = widget.newTabBar
{
left = 0,
top = 440,
height = 40,
width = 320,
backgroundFile = “assets/tabbar.png”,
tabSelectedLeftFile = “images/tabBar_tabSelectedLeft.png”,
tabSelectedMiddleFile = “images/tabBar_tabSelectedMiddle.png”,
tabSelectedRightFile = “images/tabBar_tabSelectedRight.png”,
tabSelectedFrameWidth = 20,
tabSelectedFrameHeight = 40,
buttons = tabButtons
}
[/lua]
If you want to make your tabbar all blue for example then you could create a blue rectangle thats 320px wide x 40px high in gimp or photoshop or paint and save it to your images folder and call it tabbar.png
Just to be clear, there are six required parameters to widget.newTabBar() that involve customizing the look. They are:
String. This is the background image of the TabBar.
tabSelectedLeftFile (required)
String. This is the left edge image of the TabBar’s selected graphic.
tabSelectedMiddleFile (required)
String. This is the middle image of the TabBar’s selected graphic.
tabSelectedRightFile (required)
String. This is the right edge image of the TabBar’s selected graphic.
tabSelectedFrameWidth, tabSelectedFrameHeight (required)
Numbers. This is the width/height of the TabBar’s selected graphic.
The first one is a graphic, usually 50px high and 320px wide if your content area is the typical 320x480. It can be whatever you want it to be. For many it’s a gradient filled bar.
@Icy Spark gave a real good description of tabSelectedLeftFile, tabSelectedMiddleFile, and tabSelectedRightFile. This is an overlay that will show the tab is highlighted. In one of my apps, each are 20x50 filled with the color {52, 52, 52} a dark gray but are at like 50% opacity. Here is a sample code block from my app:
mydata.tabBar = widget.newTabBar { top = display.contentHeight - 50, left = 0, backgroundFile = "images/tabBarBg.png", tabSelectedLeftFile = "images/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "images/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "images/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 50, buttons = mydata.tabButtons }Have it working at last so thank you both very much.
I had thought I would be able to add a background file for tabBar without needing to customize the tabSelected too but it wouldn’t let me do this. It kept expecting a tabSelectedLeftFile… so now I’ve done both.
Have a related query on using spritesheets for Buttons but will open a separate thread for that.
Thanks again !
You could always just make the selected tab images transparent if you didn’t want the effect. iOS 7 tab bars are like that.
Ok thanks Rob !
I take it from this that there is no way at all to just change the background to a (pre os 7) piano black Iphone style tabbar background changing just backgroundFile and nothing else. At least when I try it wants the tabSelectedLeftFile as well!