Scale button width according to label

Solar2D General Questions/Discussion
#1

Hello! I’m wondering if there is a way to scale a button according to its label. So for example, let’s say I have a button:

local button = widget.newButton({     label = "Click me!",     onEvent = someButtonHandler,     fontSize = 20,     x = display.contentCenterX,     y = display.contentCenterY });

How would I go about sizing this button to be the size of the label plus some padding? I haven’t been able to find any information on how to get the label’s width or height. Thanks!

#2

Hi @roman,

Well, this is sort of a “chicken and egg” situation… the label is created when the button is created, so the label width won’t be known in advance, and the button can’t be changed in width after it’s created (you could scale/stretch it, but that would look bad).

One option would be to create the label as a temporary text object in advance, using the same font/size as you want for the label, measure the width of that object, pass that width to the button (plus padding), and then destroy the temporary text object.

Brent

#3

Hi Brent. Thanks for the quick response. It’s Interesting workaround! Kind of a pain in the ass but it gets the job done. Here’s my code for anyone that’s interested:

local data = { x = display.contentCenterX,        y = display.contentCenterY,     label = "My Button label",     onEvent = buttonHandler,     cornerRadius = 2,     strokeWidth = 4,     emboss = false,     shape = "roundedRect", fillColor =  {  default= {0.114, 0.114, 0.114, 255}, over = { 58, 58, 58, 255 } },      data.strokeColor =  {  default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 }  } } -- Create a text object that we can use for sizing the button local text = display.newText({        text = data.label,     x = display.contentCenterX,     y = display.contentCenterY,     font = native.systemFont,     fontSize = 20  });      -- use the height/width of the text object to size the button and add padding data.width = text.width + 50; data.height = text.height + 50;      local button = widget.newButton(data); -- Remove the text node text:removeSelf(); text = nil;
#4

Hi @roman,

Well, this is sort of a “chicken and egg” situation… the label is created when the button is created, so the label width won’t be known in advance, and the button can’t be changed in width after it’s created (you could scale/stretch it, but that would look bad).

One option would be to create the label as a temporary text object in advance, using the same font/size as you want for the label, measure the width of that object, pass that width to the button (plus padding), and then destroy the temporary text object.

Brent

#5

Hi Brent. Thanks for the quick response. It’s Interesting workaround! Kind of a pain in the ass but it gets the job done. Here’s my code for anyone that’s interested:

local data = { x = display.contentCenterX,        y = display.contentCenterY,     label = "My Button label",     onEvent = buttonHandler,     cornerRadius = 2,     strokeWidth = 4,     emboss = false,     shape = "roundedRect", fillColor =  {  default= {0.114, 0.114, 0.114, 255}, over = { 58, 58, 58, 255 } },      data.strokeColor =  {  default={ 1, 0.4, 0, 1 }, over={ 0.8, 0.8, 1, 1 }  } } -- Create a text object that we can use for sizing the button local text = display.newText({        text = data.label,     x = display.contentCenterX,     y = display.contentCenterY,     font = native.systemFont,     fontSize = 20  });      -- use the height/width of the text object to size the button and add padding data.width = text.width + 50; data.height = text.height + 50;      local button = widget.newButton(data); -- Remove the text node text:removeSelf(); text = nil;