Skip to end of metadata
Go to start of metadata


SceneGraph Developer Extensions (SGDEX) support customizing elements in the views.

Using the theme attributes

  • Set theme attributes at the start of a channel in the Show(args) function.
  • Do not set global theme attributes before opening each view.
  • To change one attribute, use the updateTheme field to specify only the attribute that needs to be changed.
  • Set theme attributes and update attributes as one block so that multiple theme updates are not triggered.
  • Theme attributes are only used by SGDEX views, and not by any other RSG nodes.

There are three ways to customize the appearance of a view:

Global theme parameters

Setting the theme attribute to all the SGDEX views:

The code above sets the text color to RED for all the supported text in the views. The background color for the views is set to GREEN. 

View type-specific attributes

To set the background of all the views a specific color but have the background of the grid set to another color, use:

Here, the views have a GREEN background, and the grids have a RED background. 

Instance-specific attributes

Since each view has its own theme field, to set view specific attributes using the theme field.

Note: Only set fields that are different from the ones set in the scene.

For all the views to have the same background with only one details screen having a different background color, use:

Here, all the views have a GREEN background except one details screen which has a WHITE background. 

Updating theme attributes

The channel might need to update their branding on the current view or next view when a user takes an action. For example, when a user logs in to the channel, the logo might be changed. In such cases, the best approach is to update just one field; baseScene and SGDEX views have updateTheme field for such instances. The developer can use it to change/set any theme attribute.

UpdateTheme has the same syntax as theme.

For instance, if the overhang logo needs to be changed for the all channels after login, use the code below:

Theme attributes Index

Common theme attributes

AttributeUse

textColor 

Sets the text color for all supported labels
focusRingColorSets focus on the ring color
progressBarColor Sets color to the progress bars
backgroundImageURI Sets a URL for a background image
backgroundColorSets background color
OverhangTitleSets the text displayed in the overhang title
OverhangTitleColorSets the color of the overhang title
OverhangShowClockSets the toggle showing the overhang clock
OverhangShowOptionsShows the options in the overhang
OverhangOptionsAvailable

Indicates if options are available in the overhang

 Note: This is a visual field only 

OverhangVisibleSets if the overhang should be visible    
OverhangLogoUri Sets the URL for the overhang logo
OverhangBackgroundColorSets the overhang background color
OverhangBackgroundUriSets the overhang background URL
OverhangOptionsTextSets the text that is displayed in options
OverhangHeightSets the height of the overhang


GridView theme attributes

AttributeUse
textColorSets the color of all the text elements in the view
focusRingColor Sets the color of the focus ring
focusFootprintColor Sets the color of the focus ring when it is unfocused
rowLabelColorSets the color of the row title
itemTextColorLine1Sets the color of the first row in the item description
itemTextColorLine2Sets the color of the second row in the item description
titleColorSets the color of the title
descriptionColorSets the color of the description text
descriptionmaxWidthSets the maximum width for the description
descriptionMaxLinesSets the maximum lines allowed for the description


DetailsView theme attributes

AttributeUse
textColorSets the color of all the text elements in the view
focusRingColorSets the color of the focus ring
focusFootprintColorSets the color of the focus ring when it is unfocused
rowLabelColorSets the color of the row title
descriptionColorSets the color of the descriptionLabel
actorsColor Sets the color of the actorsLabel
ReleaseDateColor Sets the color of the ReleaseDate label
RatingAndCategoriesColorSets the color of categories
buttonsFocusedColorSets the color of the focused buttons
buttonsUnFocusedColorSets the color of the unfocused buttons
buttonsFocusRingColor

Set the color of the button in focus

buttonsSectionDividerTextColorSets the color of the section divider


CategoryListView theme attributes

AttributeUse
TextColorChanges the color of all the text fields in the category list
focusRingColorChanges the color of the focus rings for both category and item list
categoryFocusedColorSets a focused text color for category
categoryUnFocusedColorSets an unfocused text color for category
itemTitleColorSets the item title color
itemDescriptionColor Sets the item description color
categoryfocusRingColorSets the color for the category list focus ring
itemsListfocusRingColorSets the color for the item list focus ring

VideoView theme attributes

General fields

AttributeUse
TextColor Sets the text color of all the texts on the video and endcard views
progressBarColorSets the color of the progress bar
focusRingColorSets the color of the focus ring in the endcard view
backgroundColorSets the background color of the endcard views
backgroundImageURI Sets the background image URL of the endcard views
endcardGridBackgroundColorSets the background color of the grid of the endcard items


Video player fields

AttributeUse
trickPlayBarTextColorSets the color of the text next to the trickPlayBar node, indicating the time elapsed/remaining
trickPlayBarTrackImageUriReturns a 9-patch or an ordinary PNG of the track of the progress bar, which surrounds the filled and empty bars. This is blended with the color specified by the trackBlendColor field if not set to a default value
trickPlayBarTrackBlendColorSets the color to be blended with the graphical image specified by the trackImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
trickPlayBarThumbBlendColorSets the blend color of the square image in the trickPlayBar node that shows the current position of the bar, with the current direction arrows or the pause icon on top. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
trickPlayBarFilledBarImageUri Returns a 9-patch or an ordinary PNG of the bar that represents the completed portion of the work represented by this ProgressBar node. This is typically displayed on the left side of the track. This is blended with the color specified by the filledBarBlendColor field if set to a non-default value
trickPlayBarFilledBarBlendColorSets the color to be blended with the graphical image specified in the filledBarImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
trickPlayBarCurrentTimeMarkerBlendColorSets the color to be blended with the marker for the current playback position. This is typically a small vertical bar displayed in the TrickPlayBar node when the user is fast-forwarding or rewinding a video


Buffering Bar customization   

AttributeUse
bufferingTextColorSets the color of the text displayed near the buffering bar defined by the bufferingBar field when the buffering bar is visible. If this value is 0, the system default color is used. To set a custom color, set this field to a value other than 0x0
bufferingBarEmptyBarImageUri

Displays a 9-patch or an ordinary PNG of the bar presenting the remaining work to be done. This is typically displayed on the right side of the track and is blended with the color specified in the emptyBarBlendColor fieldif set to a non-default value

bufferingBarFilledBarImageUriDisplays a 9-patch or an ordinary PNG of the bar that represents the completed portion of the work represented by this ProgressBar node. This is typically displayed on the left side of the track. It is blended with the color specified by the filledBarBlendColor fieldif set to a non-default value
bufferingBarTrackImageUriDisplays a 9-patch or an ordinary PNG of the track of the progress bar, which surrounds the filled and empty bars. This is blended with the color specified by the trackBlendColor fieldif set to a non-default value
bufferingBarTrackBlendColorSets the color to be blended with the graphical image specified by trackImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
bufferingBarEmptyBarBlendColor Sets the color to be blended with the graphical image specified in the emptyBarImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
bufferingBarFilledBarBlendColorSets the color to be blended with the graphical image specified in the filledBarImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place


Retrieving Bar customization 

AttributeUse
retrievingTextColorSets the color of the text displayed near the buffering bar defined by the retrievingBar field when the buffering bar is visible. If this value is 0, the system default color is used. To set a custom color, set this field to a value other than 0x0
retrievingBarEmptyBarImageUriDisplays a 9-patch or an ordinary PNG of the bar presenting the remaining work to be done. This is typically displayed on the right side of the track and is blended with the color specified in the emptyBarBlendColor fieldif set to a non-default value
retrievingBarFilledBarImageUriDisplays a 9-patch or an ordinary PNG of the bar that represents the completed portion of the work represented by this ProgressBar node. This is typically displayed on the left side of the track. It is blended with the color specified by the filledBarBlendColor fieldif set to a non-default value
retrievingBarTrackImageUriDisplays a 9-patch or an ordinary PNG of the track of the progress bar, which surrounds the filled and empty bars. This is blended with the color specified by the trackBlendColor fieldif set to a non-default value
retrievingBarTrackBlendColorSets the color to be blended with the graphical image specified by trackImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
retrievingBarEmptyBarBlendColorSets the color to be blended with the graphical image specified in the emptyBarImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place
retrievingBarFilledBarBlendColorSets the color to be blended with the graphical image specified in the filledBarImageUri field. The blending is performed by multiplying this value with each pixel in the image. If the default value is not changed, no blending takes place

Endcard theme attributes 

View attributes

AttributeUse
buttonsFocusedColorSets the text color of the focused repeat button 
buttonsUnFocusedColorSets the text color of the unfocused repeat button
buttonsfocusRingColorSets the background color of the repeat button 


Grid attributes

AttributeUse
rowLabelColorSets the color of the grid row title 
focusRingColorSets the color of the grid focus ring 
focusFootprintBlendColorSets the color of the grid unfocused focus ring 
itemTextColorLine1Sets the text color for the 1st row in the endcard item
itemTextColorLine2Sets the text color for the 2nd row in the endcard item
timerLabelColorSets the color of the timer for the remaining time
  • No labels