Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jedashford
Channel Surfer

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 trimming theory. Am I looking passed something simple? 

0 Kudos
9 REPLIES 9
belltown
Roku Guru

Re: Can text be centered in a Scene Graph Button?

I have a ButtonGroup with buttons that are centered. I'm not sure if there's an easier way:


buttons="["   Play   ","   Stop   "]"
0 Kudos
jedashford
Channel Surfer

Re: Can text be centered in a Scene Graph Button?

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...
0 Kudos
joetesta
Roku Guru

Re: Can text be centered in a Scene Graph Button?

"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" />
aspiring
0 Kudos
jedashford
Channel Surfer

Re: Can text be centered in a Scene Graph Button?

"joetesta" wrote:
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" />


Thats the key. Works like a charm.
0 Kudos
nmaves
Visitor

Re: Can text be centered in a Scene Graph Button?

Can I ask how you created this horizontal button group?  I am having a heck of a time creating something very simular to this.
0 Kudos
WSJTim
Binge Watcher

Re: Can text be centered in a Scene Graph Button?

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.

0 Kudos
WSJTim
Binge Watcher

Re: Can text be centered in a Scene Graph Button?

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
Channel Surfer

Re: Can text be centered in a Scene Graph Button?

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>
0 Kudos
WSJTim
Binge Watcher

Re: Can text be centered in a Scene Graph 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.

0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.