Adding a Progress Bar to Roku List Posters
Progress bars can be used to indicate that content has already
been partially or complete viewed.
This quick walk-through will show you how to add progress bars to
your Roku channel.
First, a screenshot of the end result:
We will use the Instant TV Channel Content Editor
to make changes to the Horizontal List
in which the progress bar(s) will be displayed.
We will also use the Content Editor to set the length
of each video content item shown in the Horizontal List.
The following changes are all made within the Content Editor page:
-
In the tree-diagram in the upper left window,
click on the folder
representing the Horizontal List in which
you want the progress bars to appear.
-
Set the ListStyle for the Horizontal List to either
flat-episodic or flat-episodic-16x9.
These are the only Roku list poster styles that have a built-in progress bar.
-
Changing the ListStyle changes the required dimensions of
SDListPoster and HDListPoster
(the posters shown in the example above)
for all items contained in the List.
This may or may not result in stretched poster images appearing in the list.
If your poster images have the "recommended size"
shown to the right of the poster URL in the Content Editor
you should keep the default scale-to-fill setting
for ListDisplayMode.
Otherwise you may wish to
select a different option for ListDisplayMode:
-
scale-to-fill (default) - scale the image asymmetrically
to fill the poster box.
Image may be stretched horizontally or vertically if the
image dimensions do not match the poster box size.
-
scale-to-fit - scale the image while maintaining the aspect ratio
in order to fill the poster box either horizontally or vertically.
May result in pillar-box or letter-box bars.
-
zoom-to-fill - scale the image while maintaing the aspect ratio
in order to fill the poster box both vertically and horizontally.
May result in portions of the image being cropped.
-
photo-fit - scale and crop the image, possibly asymmetrically, in
order to achieve the best fit within the poster box.
-
In the tree-diagram in the upper left window,
click on the content item
for the first video content item within the Horizontal List.
-
Set the Length for the video content item
to the item's total playing length in hours, minutes, and seconds.
If this value is not set correctly then the length of the progress bar will
not accurately represent the amount of the content that has already been played.
-
Repeat the last two steps to set the Length for each
video content item contained in the Horizontal List.
A few notes:
-
The grey-blue color of the progress bar cannot be changed.
-
After viewing a video (completely or partially) the parent list must be exited
and then re-entered in order for the progress bar to be updated.
If the video is in the top-level of the channel then the channel must be exited
and re-entered in order for the progress bar to be updated.
Please see this
brief tutorial
for more information about how to build a Roku channel.
Questions or suggestions about this Roku developer walk-through can be emailed to .
