change color in tabbar and progressBar

Getting Started Newbie Questions
#1

Hi,

I am just starting with Corona;  I find it really nice and there are very complex things that can be done in minutes. But I have hit a wall with a very simple thing :

I want to do a simple customization to tabbar and progressBar widgets, which is changing the blue color underlining the tabs, and the blue color of the progressBar.

I have tried to find how to do it, and as far as I can find the only way to do it is providing a set of images for these widgets.

is that true? I find it a little over-complicated for such a simple thing as changing the color.

If so, where can I download an example of them?

(I have no idea at all of image editing and something as simple as changing this color is starting to be a real nightmare for me)

Thanks in advance, 

Ricardo Torres

#2

If you are referring to the widget.* API then yes, that is the only way to do it.

This is because the tab bar is actually fairly complex to render, even though the concept is so simple. The UI has many elements, such as fills, ends and at least two states for every item involved.

Actually making the tab bar image sheet isn’t that tricky. Just load the image from the example (which comes with your Corona installation) and modify it in an image editor.

I have a segmented control as part of my Corona Framework which might help.

#3

hi, thanks a lot for the answer.

you mean the images located in Resources/Corona ? (widget_theme_android.png for instance)

I have even more questions now : 

 - I will have to create also the 2x and 4x versions, right?

 - I will have to create a full set of images for every different color I’d like to use?

 - once I have the images, do I have to create another theme or how can I reference to just the images, not the full theme?

do you know if there is there any other approach to create tabs or progress bars, maybe custom plugins, or at least a detailed guide for newbies on how to do it?

I have the feeling this is getting very very complicated, and every step I do gets into more complicated things. I have taken a look to the segmented_control but I also have this imaging problem.

As a reference I have implemented 60% of the logic of my application in 5 days, but spent more than 2 days stumbling in this “simple” thing.

btw, your framework looks really nice.

Again. thanks a lot for the support.

#4

https://github.com/coronalabs/framework-widget/blob/master/widgetLibrary/widget_tabbar.lua

Haven’t tried it but seem you should be able to access the display objects of the tabbuttons using yourTabView._viewButtons[] with the index of the button you want to change. You could probably even use transitions for a nicer look.

#5

thanks, I’ll give it a try also.

#6

In direct answer to the highlighted points:

  • No; I would only create the 4x images and let Corona scale them. This will happen naturally. TBH, creating both is a matter of creating the higher quality version and downsizing it in your image editor.

  • Yes; But it depends on how many themes you want. If you only need one, then you only need to create one tab bar image.

  • Other approaches include building a set of buttons yourself, using the button widget and not using images for the tab bar and simply rendering the higlighting yourself, using the display.* api.

  • You are over complicating it. Honestly, just create one image for the tab bar widget and see how it goes. All you need to do it colour the image which comes with the resources sample to your preferred styling.

  • Yeah, that’s coding for you. You are going to spend a lot of time learning the finer points, while some of it comes really easily. Experience will help. It’s like any new skill and don’t kid yourself: coding is complicated. Don’t let that put you off. It’s just a learning curve, also like anything else.

Look at it like this: You have one option which you know will work but is a bit boring and time consuming, but would it take 2 days? You have another option which you don’t really know how to do but will give you exactly what you want, but will it take more than two days?

As I’ve been over this learning curve, my personal preference would be to just code up my own tab bar widget simply because I don’t like mucking around in image editors. However, if I needed to style one to someone else’s requirements, the image editing route is the one I’d take.

Can you explain what the styling you’d like is?

#7

Hi,

I cannot agree more in all your comments.

What happened is that I was advancing very fast and suddenly I was stopped by this thing and I made up my mind that it should have an easy and fast resolution.

But its true that there’s a learning curve (it was being very smooth until now), and it is also true that I have learned lot of things about Corona while trying to figure this out, which I wouldn’t have learned without having to investigate it.

Regarding the styling, my problem is more with the progress bar than with the tabbar. (as we were already talking about tabbar and the problem is the same, I didn’t want to change it)

 - tabbar will only need two sets of colors, which is fine

 - progressBar, I was planning to have a different colored depending on the resource you were creating in the game. And there will be several tens of different types of resources. I will probably group them and reuse different colors.

I will not have time today to advance, but I surely come back with more problems when I try to implement it.

Thanks for your comments ( you kept me going in this path :smiley: )

#8

Ah, progress bar. To be iOS or Android specific, I would probably use the widget. But I never have before and for games I would always code my own. The great thing about a progress bar is that it can take so many forms and, as long as you are careful and plan ahead, very easy to do.

For example, if all you want is a round-ended bar which grows you can start from two circles on top of each other, moving apart - but with a rectangle directly between them which grows. This solution doesn’t even need to remove and recreate any objects, because the rect can just have its width changed.

Then again, if you’re going for full-on arcade style bars you’ll want a lot of animations and things, so that’s just a matter of art.

#9

really interesting approach. I don’t even need the rounded-ended bars, so just with the rectangle will be almost enough.

I will definitely use your idea for progress bars and try the images thing for the tabbar.

#10

Then it’s very simple … here’s a basic sample, just paste the code into main.lua of an empty project to get a bunch of random progressbars (progress can bet set in a range from 0-1 but scaling that to whatever range you want is also very easy)

[lua]

function setProgress( self, val )

    if val < 0 then

        val = 0

    elseif val > 1 then

        val = 1

    end

    self.filler.width = (self.width-2*self.innerSpacing) * val

end

function createProgBar( x, y, width, height, innerSpacing, col1, col2 )

    local progBar = display.newGroup()

    progBar.x, progBar.y = x, y

    progBar.innerSpacing = innerSpacing

    progBar.bg = display.newRect( progBar, 0, 0, width, height )

    progBar.bg.anchorX = 0

    progBar.bg.anchorY = 0

    progBar.filler = display.newRect( progBar, innerSpacing, innerSpacing, width-2*innerSpacing, height-2*innerSpacing )

    progBar.filler.anchorX = 0

    progBar.filler.anchorY = 0

    progBar.bg:setFillColor( unpack(col1) )

    progBar.filler:setFillColor( unpack(col2) )

    progBar.setProgress = setProgress

    return progBar

end

for i = 1, 10 do

    local y = 50 + i * 20 + i*10

    local x = 50

    local width = 100 + i * 10

    local height = 20

    local grey = 0.2 + math.random() * 0.3

    local colBG = { grey, grey, grey }

    local colFG = { math.random(), math.random(),math.random() }

    local progress = math.random(0.1, 0.95)

    local progBar = createProgBar( x, y, width, height, 1, colBG, colFG )

    progBar:setProgress( math.random() )

end

[/lua]

#11

wow, thanks a lot!

I will use it for sure.

#12

If you are referring to the widget.* API then yes, that is the only way to do it.

This is because the tab bar is actually fairly complex to render, even though the concept is so simple. The UI has many elements, such as fills, ends and at least two states for every item involved.

Actually making the tab bar image sheet isn’t that tricky. Just load the image from the example (which comes with your Corona installation) and modify it in an image editor.

I have a segmented control as part of my Corona Framework which might help.

#13

hi, thanks a lot for the answer.

you mean the images located in Resources/Corona ? (widget_theme_android.png for instance)

I have even more questions now : 

 - I will have to create also the 2x and 4x versions, right?

 - I will have to create a full set of images for every different color I’d like to use?

 - once I have the images, do I have to create another theme or how can I reference to just the images, not the full theme?

do you know if there is there any other approach to create tabs or progress bars, maybe custom plugins, or at least a detailed guide for newbies on how to do it?

I have the feeling this is getting very very complicated, and every step I do gets into more complicated things. I have taken a look to the segmented_control but I also have this imaging problem.

As a reference I have implemented 60% of the logic of my application in 5 days, but spent more than 2 days stumbling in this “simple” thing.

btw, your framework looks really nice.

Again. thanks a lot for the support.

#14

https://github.com/coronalabs/framework-widget/blob/master/widgetLibrary/widget_tabbar.lua

Haven’t tried it but seem you should be able to access the display objects of the tabbuttons using yourTabView._viewButtons[] with the index of the button you want to change. You could probably even use transitions for a nicer look.

#15

thanks, I’ll give it a try also.

#16

In direct answer to the highlighted points:

  • No; I would only create the 4x images and let Corona scale them. This will happen naturally. TBH, creating both is a matter of creating the higher quality version and downsizing it in your image editor.

  • Yes; But it depends on how many themes you want. If you only need one, then you only need to create one tab bar image.

  • Other approaches include building a set of buttons yourself, using the button widget and not using images for the tab bar and simply rendering the higlighting yourself, using the display.* api.

  • You are over complicating it. Honestly, just create one image for the tab bar widget and see how it goes. All you need to do it colour the image which comes with the resources sample to your preferred styling.

  • Yeah, that’s coding for you. You are going to spend a lot of time learning the finer points, while some of it comes really easily. Experience will help. It’s like any new skill and don’t kid yourself: coding is complicated. Don’t let that put you off. It’s just a learning curve, also like anything else.

Look at it like this: You have one option which you know will work but is a bit boring and time consuming, but would it take 2 days? You have another option which you don’t really know how to do but will give you exactly what you want, but will it take more than two days?

As I’ve been over this learning curve, my personal preference would be to just code up my own tab bar widget simply because I don’t like mucking around in image editors. However, if I needed to style one to someone else’s requirements, the image editing route is the one I’d take.

Can you explain what the styling you’d like is?

#17

Hi,

I cannot agree more in all your comments.

What happened is that I was advancing very fast and suddenly I was stopped by this thing and I made up my mind that it should have an easy and fast resolution.

But its true that there’s a learning curve (it was being very smooth until now), and it is also true that I have learned lot of things about Corona while trying to figure this out, which I wouldn’t have learned without having to investigate it.

Regarding the styling, my problem is more with the progress bar than with the tabbar. (as we were already talking about tabbar and the problem is the same, I didn’t want to change it)

 - tabbar will only need two sets of colors, which is fine

 - progressBar, I was planning to have a different colored depending on the resource you were creating in the game. And there will be several tens of different types of resources. I will probably group them and reuse different colors.

I will not have time today to advance, but I surely come back with more problems when I try to implement it.

Thanks for your comments ( you kept me going in this path :smiley: )

#18

Ah, progress bar. To be iOS or Android specific, I would probably use the widget. But I never have before and for games I would always code my own. The great thing about a progress bar is that it can take so many forms and, as long as you are careful and plan ahead, very easy to do.

For example, if all you want is a round-ended bar which grows you can start from two circles on top of each other, moving apart - but with a rectangle directly between them which grows. This solution doesn’t even need to remove and recreate any objects, because the rect can just have its width changed.

Then again, if you’re going for full-on arcade style bars you’ll want a lot of animations and things, so that’s just a matter of art.

#19

really interesting approach. I don’t even need the rounded-ended bars, so just with the rectangle will be almost enough.

I will definitely use your idea for progress bars and try the images thing for the tabbar.

#20

Then it’s very simple … here’s a basic sample, just paste the code into main.lua of an empty project to get a bunch of random progressbars (progress can bet set in a range from 0-1 but scaling that to whatever range you want is also very easy)

[lua]

function setProgress( self, val )

    if val < 0 then

        val = 0

    elseif val > 1 then

        val = 1

    end

    self.filler.width = (self.width-2*self.innerSpacing) * val

end

function createProgBar( x, y, width, height, innerSpacing, col1, col2 )

    local progBar = display.newGroup()

    progBar.x, progBar.y = x, y

    progBar.innerSpacing = innerSpacing

    progBar.bg = display.newRect( progBar, 0, 0, width, height )

    progBar.bg.anchorX = 0

    progBar.bg.anchorY = 0

    progBar.filler = display.newRect( progBar, innerSpacing, innerSpacing, width-2*innerSpacing, height-2*innerSpacing )

    progBar.filler.anchorX = 0

    progBar.filler.anchorY = 0

    progBar.bg:setFillColor( unpack(col1) )

    progBar.filler:setFillColor( unpack(col2) )

    progBar.setProgress = setProgress

    return progBar

end

for i = 1, 10 do

    local y = 50 + i * 20 + i*10

    local x = 50

    local width = 100 + i * 10

    local height = 20

    local grey = 0.2 + math.random() * 0.3

    local colBG = { grey, grey, grey }

    local colFG = { math.random(), math.random(),math.random() }

    local progress = math.random(0.1, 0.95)

    local progBar = createProgBar( x, y, width, height, 1, colBG, colFG )

    progBar:setProgress( math.random() )

end

[/lua]