Forum Discussion

jedashford's avatar
jedashford
Channel Surfer
9 years ago

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...
Roku Developer Program
joetesta's avatar
joetesta
Roku Guru
9 years ago
"jedashford" wrote:
Thank you. I'll give this a try. I'm worried a solution like this wont scale well with different screen resolutions. We'll find out...

I think I got this to work by having a Label that's a child element of the button, (and the same width) and the label text can be centered with;
<Label id="itemLabel" horizAlign="center" />
  • WSJTim's avatar
    WSJTim
    Binge Watcher
    6 years ago

    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 sub

    I 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.

    • WSJTim's avatar
      WSJTim
      Binge Watcher
      6 years ago

      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>
      • bishalseth's avatar
        bishalseth
        Channel Surfer
        5 years ago

        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>