Can text be centered in a Scene Graph Button?
See image below. The button node doesn't seem to allow me to center the text. Even when I add empty spaces " " they are trimmed away. The first two buttons have spaces and a period so I can test my...
Forum Discussion
If anyone else stumbles on this, this solution would've required a lot more work for me, dealing with changing the color of the Label when the button gains and loses focus. While hokey, this little utility function fixed the problem for me:
sub centerButtonLabel(button as object)
for i = 0 to button.getChildCount() - 1
child = button.getChild(i)
if child.subtype() = "Label"
child.horizAlign = "center"
end if
end for
end subI just call this in the onVisible for my screen. Works like a charm. Should Roku just support this as a property on the stock Button? Yes.
Ok here's a better solution since horizAlign appears to get reverted when the button text is changed. Use this component instead:
<component name="CenteredButton" extends="Button">
<script type="text/brightscript">
<![CDATA[
sub init()
' Find the label
for i = 0 to m.top.getChildCount() - 1
child = m.top.getChild(i)
if child.subtype() = "Label"
child.horizAlign = "center"
child.observeField("horizAlign", "onHorizAlignChanged")
exit for
end if
end for
end sub
sub onHorizAlignChanged(msg as object)
label = msg.getRoSGNode()
if label.horizAlign <> "center"
label.horizAlign = "center"
end if
end sub
]]>
</script>
</component>You can use below xml to make it center
<Button id="searchClick"text=" "height="100"translation="[90,820]"minWidth="570"maxWidth="570"><Label id="itemLabel" height="100" width="570" text="Search" vertAlign="center" horizAlign="center" /></Button>With that method it looks fine until the button gets focus. Once that happens the label text color doesn't invert so I get an all white button where you can't see the label.
