Buttons Have Background

Hello.

In the simulator and on an iPhone, the buttons I make appear as text with nothing around them. On an actual Android device there is a rectangle along with the text.

Is the simulator misleading me?

Can I get rid of the rectangle?

Note: It’s not an outline of a rectangle. On the page I’m looking at now it’s a gray, filled rectangle.

-Bob Gordon

Hello! Can you please post some code for use to look at? Are you using widget.newButton?

Thanks!

–SonicX278

Thank you for replying. Here’s code that makes a button:

— file: pagStart.lua

— function: createButton

— summary: creates a standardized button

— parameters: id as String, an internal reference to the button

— text as String, the caption

— x as integer, the x position

— y as integer, the y position

— returns: none

— note: the rest of the button properties are set here.

— todo: 1. Consider moving this to a file to be shared.

— 2. Have a way of setting default values (e.g. font, size, color)

local function createButton( id, text, x, y )

local button = widget.newButton

{

id   = id,

width = 240,

height = 40,

label = text,

labelColor = { default={1,1,1}, over={1,0,0}},

labelAlign = “left”,

font = native.systemFontBold,

fontSize = 24,

onRelease = onTap

}

button.x = x

button.y = y

sceneGroup:insert( button )

return button

end

Can you please post the code in the editor? In the text box where you type your post you press “<>”.

–SonicX278

Thanks for the tip.

--- file: pagStart.lua --- function: createButton --- summary: creates a standardized button --- parameters: id as String, an internal reference to the button --- text as String, the caption --- x as integer, the x position --- y as integer, the y position --- returns: none --- note: the rest of the button properties are set here. --- todo: 1. Consider moving this to a file to be shared. --- 2. Have a way of setting default values (e.g. font, size, color) local function createButton( id, text, x, y ) local button = widget.newButton { id = id, width = 240, height = 40, label = text, labelColor = { default={1,1,1}, over={1,0,0}}, labelAlign = "left", font = native.systemFontBold, fontSize = 24, onRelease = onTap } button.x = x button.y = y sceneGroup:insert( button ) return button end

Why don’t you just make a rect widget.newButton with a label on it?

–SonicX278

Sonic,

My question actually has two parts:

  1. Should the simulator be showing one thing and an actual Android device showing another. In the simulator there is no gray, translucent rectangle; on the device there is. So, is there a problem with the simulator? An actual iPhone matches what the simulator shows.

  2. I really don’t want the rectangle. As far as I can tell, I’m not doing anything special to create it. It appears to be the exact size of the dimensions set up when the button is defined.

-Bob

Yes i had this same problem before --Where the sim was showing transparent rect and on device it was gray-- So what i did was made a newButton Rect and added a label and make the rect alpha = 0.

–SonicX278

Ah ha!

I will look into this and report back. Much thanks. (It may be awhile.)

-Bob

Good morning.

Thanks to SonicX278 I have solved the problem.

I took another look at the button documentation and discovered this:


textOnly (optional)

Boolean. If set to true, the button will be constructed via a text object only (no background element). Default is false.


 

So, I set it to true. What happened then is that the button labels were all center aligned (even though I had them set as left). I then changed the anchorX to 0. That got them all left aligned, which is what I wanted.

 

Finally, I built for Android, and installed the app on my Android device. Gray rectangle was gone. Joy. Rapture.

 

Hope this helps someone else.

Hello! Can you please post some code for use to look at? Are you using widget.newButton?

Thanks!

–SonicX278

Thank you for replying. Here’s code that makes a button:

— file: pagStart.lua

— function: createButton

— summary: creates a standardized button

— parameters: id as String, an internal reference to the button

— text as String, the caption

— x as integer, the x position

— y as integer, the y position

— returns: none

— note: the rest of the button properties are set here.

— todo: 1. Consider moving this to a file to be shared.

— 2. Have a way of setting default values (e.g. font, size, color)

local function createButton( id, text, x, y )

local button = widget.newButton

{

id   = id,

width = 240,

height = 40,

label = text,

labelColor = { default={1,1,1}, over={1,0,0}},

labelAlign = “left”,

font = native.systemFontBold,

fontSize = 24,

onRelease = onTap

}

button.x = x

button.y = y

sceneGroup:insert( button )

return button

end

Can you please post the code in the editor? In the text box where you type your post you press “<>”.

–SonicX278

Thanks for the tip.

--- file: pagStart.lua --- function: createButton --- summary: creates a standardized button --- parameters: id as String, an internal reference to the button --- text as String, the caption --- x as integer, the x position --- y as integer, the y position --- returns: none --- note: the rest of the button properties are set here. --- todo: 1. Consider moving this to a file to be shared. --- 2. Have a way of setting default values (e.g. font, size, color) local function createButton( id, text, x, y ) local button = widget.newButton { id = id, width = 240, height = 40, label = text, labelColor = { default={1,1,1}, over={1,0,0}}, labelAlign = "left", font = native.systemFontBold, fontSize = 24, onRelease = onTap } button.x = x button.y = y sceneGroup:insert( button ) return button end

Why don’t you just make a rect widget.newButton with a label on it?

–SonicX278

Sonic,

My question actually has two parts:

  1. Should the simulator be showing one thing and an actual Android device showing another. In the simulator there is no gray, translucent rectangle; on the device there is. So, is there a problem with the simulator? An actual iPhone matches what the simulator shows.

  2. I really don’t want the rectangle. As far as I can tell, I’m not doing anything special to create it. It appears to be the exact size of the dimensions set up when the button is defined.

-Bob

Yes i had this same problem before --Where the sim was showing transparent rect and on device it was gray-- So what i did was made a newButton Rect and added a label and make the rect alpha = 0.

–SonicX278

Ah ha!

I will look into this and report back. Much thanks. (It may be awhile.)

-Bob

Good morning.

Thanks to SonicX278 I have solved the problem.

I took another look at the button documentation and discovered this:


textOnly (optional)

Boolean. If set to true, the button will be constructed via a text object only (no background element). Default is false.


 

So, I set it to true. What happened then is that the button labels were all center aligned (even though I had them set as left). I then changed the anchorX to 0. That got them all left aligned, which is what I wanted.

 

Finally, I built for Android, and installed the app on my Android device. Gray rectangle was gone. Joy. Rapture.

 

Hope this helps someone else.