Tutorial: Stylizing Widgets, Part 1

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0

NOTE: Widget stylizing has been merged into the respective widget documentation, along with full code examples. All future updates and available options pertaining to widget stylizing will be made to these core API pages.

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0

Brent Sorrentino serves as a full-time Developer Evangelist for Corona Labs, assisting developers in the forums, maintaining documentation/guides, and creating samples which highlight core features of Corona SDK.

This entry has 15 replies

  1. Tom says:

    Great stuff !

  2. Chevol says:

    Great, I’ve been waiting on this!!! Can’t wait for part 2.

  3. Brent said that he was going to do this tutorial a couple of months ago and Brent delivers. Awesome! πŸ˜€

  4. Kenny says:

    Is there a way to change the defaultFrame on the widget button? So for example, if I have a sprite sheet of 4 buttons (frame 1 being the default). When they release the button I want to switch to ether frame 3 or 4 but I can’t seem to get it working.

    (I’m probably missing something very basic).

    I did try setting it after I initialized the button by doing button.defaultFrame = 3 but that doesn’t seem to change it.

    Any ideas or feedback would be awesome!

    • Brent Sorrentino says:

      Hi Kenny,
      At this time, it’s not possible to change the default image to something other than what you created the button with (its starting default). This feature may be added in the future, but at this point you would need to recreate the button.


      • Kenny says:

        Ok sweet thanks for the info.

      • Kenny says:

        I remembered to come back and post the solution I’m using incase anyone else is looking for a solution. I created the button widget with a defaultFrame and overFrame. To then get the button to either show red or green (right or wrong button picked) I create a temp button right on top which looks like this:

        local function buttonPress(event)
        local btn = event.target

        –Get the clicked button label, and set it on the tempOptions (used to define original buttons)
        btnWidgetOptions.label = btn:getLabel()
        btnWidgetOptions.defaultFrame = 3 –or whatever frame you need

        –Define a new buttonWidget
        –Use current btn.y to set tempBtn.y
        tempBtn = widget.newButton(btnWidgetOptions)
        tempBtn.x = halfW
        tempBtn.y = btn.y

        –Insert back into original display group

        It’s one of the solutions that I tried and it appears to be working perfectly. Hopefully it will be a good starting point for anybody else.

  5. Olivier says:

    Hi πŸ™‚
    Thanks for this tutorial Brent!
    2 question :

    – If I have 3 imagesSheet, one for each resolutions ( normal, @2x, @4x)
    which “width” and “height” should I put in the buttons parameters? The smallest sizes from normal image sheet or the biggest sizes from @4x image sheet

    – In your example you use one imageSheet for one button. Could I use the same imageSheet with all interface stuffs for all my buttons? What is the best way to do?


    • Brent Sorrentino says:

      Hi Olivier,
      The width and height parameters should be the 1x size, in accordance to how you’ve set up your config.lua.

      Yes, you can put many button graphic images onto one sheet. Just reference the same sheet for different buttons, but specify the frames that are used for that specific button.

      Hope this helps,

  6. Olivier says:


    Thanks for this tutorial Brent!
    It would be very useful to have an example with a real image sheet and all the slices on it for the 9-Slice (ImageSheet) button’s example.
    As it is, it’s too theorical for me, and I don’t understand for example how should look like the middle fill image…
    Thanks for your help πŸ™‚

    • Brent Sorrentino says:

      Hi Olivier,
      I’m glad you’re finding this useful. Although it may not appear so, the 9-slice sample is, in fact, an image sheet (it just looks like the actual button, but it’s a sheet). Just remember that the middle fill should be a texture/image which can “stretch” to whatever size you make your buttons… same with the side edges. The corners will not stretch/deform if you change the button size, but the other elements will.

      Hope this helps,

  7. Jorge says:

    Great tutorial. Any idea when part 2 will be published?

    • Brent Sorrentino says:

      Hi Jorge,
      I hope to have Part 2 up within the next couple weeks… thanks for your patience!

      • Jorge says:

        You got me on pins and needles brent πŸ™‚

  8. Miguel says:

    I really can’t figure out how to add a onRelease function in the 9-Slice button. Can anyone give me some advice?