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:

  1. 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.
  2. 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.
  3. 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.
  4. In the tree-diagram in the upper left window, click on the content item for the first video content item within the Horizontal List.
  5. 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.
  6. 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 .

Instant TV Channel is a cloud-based tool for Roku developers and content providers that shortens development time and eases maintenance after deployment.



Access Code: U463
Check out Instant TV Channel by adding our latest demonstration channel to your Roku player, or watch the YouTube video.

Need help with your Roku?

We are unable to provide technical support for your Roku device.

Please visit www.roku.com for assistance.



Instant TV Channel is not affiliated with nor endorsed by Roku Inc.