Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

change color in tabbar and progressBar
Started by richardtz Feb 19 2019 02:19 PM

10 replies to this topic
tabbar progressbar color customization widgets

Best Answer horacebury , 20 February 2019 - 12:20 PM

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.

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

richardtz

[GLOBAL: userInfoPane.html]
richardtz
  • Observer

  • 6 posts
  • Corona SDK

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.

 

Attached File  buttons_progress - Corona Simulator.jpg   7.08KB   0 downloads

 

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

 



[TOPIC: post.html]
#2

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

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.


  • richardtz likes this

[TOPIC: post.html]
#3

richardtz

[GLOBAL: userInfoPane.html]
richardtz
  • Observer

  • 6 posts
  • Corona SDK

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.



[TOPIC: post.html]
#4

Michael Flad

[GLOBAL: userInfoPane.html]
Michael Flad
  • Contributor

  • 225 posts
  • Corona SDK

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.


  • horacebury and richardtz like this

[TOPIC: post.html]
#5

richardtz

[GLOBAL: userInfoPane.html]
richardtz
  • Observer

  • 6 posts
  • Corona SDK

thanks, I'll give it a try also.



[TOPIC: post.html]
#6

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

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.

 

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?


  • richardtz likes this

[TOPIC: post.html]
#7

richardtz

[GLOBAL: userInfoPane.html]
richardtz
  • Observer

  • 6 posts
  • Corona SDK

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 :D )


  • richardtz likes this

[TOPIC: post.html]
#8

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,069 posts
  • Corona SDK

  Best Answer

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.


  • richardtz likes this

[TOPIC: post.html]
#9

richardtz

[GLOBAL: userInfoPane.html]
richardtz
  • Observer

  • 6 posts
  • Corona SDK

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.



[TOPIC: post.html]
#10

Michael Flad

[GLOBAL: userInfoPane.html]
Michael Flad
  • Contributor

  • 225 posts
  • Corona SDK

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)

 

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
 


  • richardtz likes this

[TOPIC: post.html]
#11

richardtz

[GLOBAL: userInfoPane.html]
richardtz
  • Observer

  • 6 posts
  • Corona SDK

wow, thanks a lot!

I will use it for sure.




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: tabbar, progressbar, color, customization, widgets