Roku Developer Program

[RandoCallissian]

I'm trying to set the position of a Label node using a relative translation but it doesn't seem to work

Is this expected for some reason that's not documented or that I missed in the documentation?

I'm trying to slightly shift "InfoTip" downwards

    <children>
        <Rectangle id = "Blocking"
            translation = '[0,300]'
            width = "1920"
            height = "308"
            color = "0x000000D0"
        />
        <LayoutGroup id = "SettingsGroup"
            translation = "[120,300]"
            layoutDirection = "horiz"
            vertAlignment = "top"
            >
            <LabelList id = "SettingsList" 
                numRows = "5"
                vertFocusAnimationStyle = "floatingFocus"
                >
                <ContentNode role = "content" /> 
            </LabelList>
            <Group id = "SettingOptionsGroup" 
            >
                <RadioButtonList id = "CalibreLibrarySource" 
                    vertFocusAnimationStyle = "floatingFocus"
                    >
                    <ContentNode role = "content" />
                </RadioButtonList>
                <RadioButtonList id = "ScrollSpeed" visible = "false"
                    vertFocusAnimationStyle = "floatingFocus">
                    <ContentNode role = "content" />
                </RadioButtonList>
                <RadioButtonList id = "BookCoverSize" visible = "false"
                    vertFocusAnimationStyle = "floatingFocus">
                    <ContentNode role = "content" />
                </RadioButtonList>
            </Group>
                <Label id = "InfoTip" 
                    translation = "[0,24]"
                    visible = "true"
                    text = "Starting text"
                    color = "0xdd00ddff"
                    font = "font:MediumSystemFont"
                    vertAlign = "top"
                />
        </LayoutGroup>
    </children>

[speechles · Accepted solution]

Your rectangle at top is using single quote ' instead of double quotes around the translation field.

You also made a layout group. The label you are trying to adjust is within that first layout group. When items are within a layout group they will not be able to use translation. They will have to have another layout group nested for that label. Then that layout group you can adjust by the itemspacings.

Put the label that has info tip into a second layout group all by itself. Then use 24 as the itemspacing for the first item in itemspacings (ie, itemspacings="[24]"). Make sure it is set to layoutDirection="vert" and you have addItemSpacingAfterChild="false". You want it to add the itemspacing before the child so it moves the 24 pixels down.

https://developer.roku.com/docs/references/scenegraph/layout-group-nodes/layoutgroup.md

You need to remember when inside a layout group individual items cannot have translations take effect. They will respect their layout groups they are within.

[RandoCallissian]

Ah! Upon reflection, it makes sense that I cannot set translation on a LayoutGroup child. It would be nice if that was documented 😶

Thanks @speechles for the suggestion of using item spacing. That works just fine too.

But I wonder why translation doesn't work for a grandchild of a LayoutGroup. I wouldn't expect that the translation restriction propagates downward. Is that expected?

                <LayoutGroup id = "TwoColLayout" 
                    layoutDirection = "horiz"
                    vertAlignment = "top"
                    >
...
                    <Group id="PaddingContainer">
                        <Group id = "PositioningContainer"
                            translation = "[24,24]" >
                            <Label id = "InfoTip" 
                                width = "500"
                                font = "font:MediumSystemFont"
                                vertAlign = "top"
                                wrap = "true"
                            />
                        </Group>
                    </Group>
                </LayoutGroup>

[speechles]

	<LayoutGroup id="TextBody" layoutDirection="vert" itemspacings="[24]">
		<LayoutGroup id="TwoColLayout" layoutDirection="horiz" vertAlignment="top" itemspacings="[50]">
			<LayoutGroup id="FirstColumn" layoutDirection="vert" itemspacings="[10]"
				<label />
				<other stuff />
			</LayoutGroup>
			<LayoutGroup id="SecondColumn" layoutDirection="vert" itemspacings="[10]"
				<label />
				<other stuff />
			</LayoutGroup>
		</LayoutGroup>
		<Label id="InfoTip" text="Starting text" color="0xdd00ddff" font="font:MediumSystemFont" />
	</LayoutGroup>

You started with a layout group, then added a group, and a group within that group you try to add a translation coordinate to. It is inside a layout group. It doesn't matter how many groups or how you nest them they cannot have translation coordinates within a layout group. Nothing can.

Think of it like the parent object controls all the children. The parent object is the first layout group. Anything within it is confined by that layout group.

In the sample above I use a layout group to control the main layout text body. It has the itemspacings at 24 so the label gets spaced that away from both columns. It will be placed 24 pixels below those two columns. Whichever colums is longer it will be placed 24 pixels below that position. The inside layout group has the two columns which will be spaced 50 pixels apart. Then inside that two column layout group are each columns layout group. Inside each columns layout group can be whatever you want. I used labels and other stuff as examples. This will all align themselves to their itemspacings.

Doing it this way will allow the items to be consistently spaced from each other without having to figure anything but spacings.

<Label id="InfoTip" text="Starting text" color="0xdd00ddff" font="font:MediumSystemFont" width="500" maxlines="5" wrap="true" />

You can also make the tip label wide enough to go under both columns then set a max amount of lines and wrap it

In my example above you want to place the settings list into the first column and your settingoptionsgroup into the second column.

[RandoCallissian]

Thanks again for explaining this!