Android Style Guide Reference

The player's core interaction elements, organized by their functional groups and location within the interface.

Ads Controls

UiGroup.ADS_CONTROL
ViewModel: VastAdsViewModel

Component	Description	Customization Options
	The VAST controls background	Resource: N/A Style: N/A> Colors: `@color/jw_controls_overlay` Size: N/A
Close	Exit fullscreen icon, shown when the player is in fullscreen, tapping it exits fullscreen	Resource: `@drawable/ic_jw_close` Style: `JWIcon.VastClose` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Picture-in-Picture	PiP icon, tapping it puts the player/activity in PiP mode	Resource: `@drawable/ic_jw_pip` Style: `JWIcon.VastPip` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Play	Play icon, tapping it resumes the ad	Resource: `@drawable/ic_jw_play` Style: `JWIcon.VastPlay` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Pause	Pause icon, tapping it pauses the ad	Resource: `@drawable/ic_jw_pause` Style: `JWIcon.VastPlay` Color: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Learn More	Learn More button, tapping it redirects the user to the ad's clickthrough URL	Resource: `@string/jwplayer_learn_more` Style: `JWText.VastLearnMore` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_large`
	Ad message, configurable via the string resources	Resources: `@string/jwplayer_advertising_ad_x_of_y` `@string/jwplayer_advertising_remaining_time` Style: `JWText.VastAdMessage` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_small`
	Ad progress	Resource: `@drawable/jw_vast_seek_progress_drawable` Style: `VastProgress` Color: `@color/jw_vast_progress` Size: `@dimen/jw_seekbar_thickness`
	Progressbar background	Resource: `@drawable/jw_vast_seek_progress_drawable` Style: `VastProgress` Color: `@color/jw_seekbar_background` Size: `@dimen/jw_seekbar_thickness`
Skip	Skip button	Resources: `@drawable/bg_jw_vast_skip` `@drawable/ic_jw_skip` Style: `JWText.VastSkip` Colors: `@color/jw_surface_secondary_non_opaque` `@color/jw_icons_active` `@color/jw_labels_primary` Size: `@dimen/jw_text_small`
Fullscreen (Enter)	Enter fullscreen icon, shown when the player is not in fullscreen, tapping it enters fullscreen	Resource: `@drawable/ic_jw_enter_fullscreen` Style: `JWIcon.VastFullscreen` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Fullscreen (Exit)	Exit fullscreen icon, shown when the player is in fullscreen, tapping it exits fullscreen	Resource: `@drawable/ic_jw_exit_fullscreen` Style: `JWIcon.VastFullscreen` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`

Cast Dialog

Component	Description	Customization Options
	The Cast Dialog background	Resource: `@drawable/bg_jw_cast_disconnect_dialog` Style: `JWView.CastDialog` Color: `@color/jw_surface_quaternary` Size: N/A
Playing on {device}	Indicates which device you are currently casting to	Resource: `@string/jwplayer_cast_playing_on` Style: `JWText.CastDialogDevice` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_large`
Cancel	Closes the Cast Disconnect Dialog	Resource: `@string/jwplayer_cancel` Style: `JWText.CastDialogCancel` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_large`
Disconnect	Disconnects from the casting device and resumes playback on the mobile device	Resource: `@string/jwplayer_cast_disconnect` Style: `JWText.CastDialogDisconnect` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_large`

Casting Menu

UiGroup.CASTING_MENU
ViewModel: CastingMenuViewModel

Component	Description	Customization Options
	The menu background	Resource: `@drawable/bg_jw_menu` Style: `JWView.Menu.Cast` Colors: `@color/jw_surface_secondary` Size: N/A
	Title and call to action for the casting menu	Resource: `@string/jwplayer_cast_connect_to_a_device` Style: `JWText.CastTitle` Colors: `@color/jw_labels_primary` Size: `@dimen/jw_text_xlarge`
	Hint that your mobile device needs to be connected to the same network as the cast device	Resource: `@string/jwplayer_cast_use_same_wifi` Style: `JWText.CastSubtitle` Colors: `@color/jw_labels_secondary` Size: `@dimen/jw_text_xsmall`
	Icon to indicate a cast device	Resource: `@drawable/ic_jw_cast_off` Style: `JWIcon.CastItem` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
	Name of the cast device	Resource: N/A Style: `JWText.CastItem` Color:`@color/jw_labels_primary` Size: `@dimen/jw_text_xlarge`
Divider	Divider	Resource: N/A Style: `JWHorizontalDivider.Cast` Colors: `@color/jw_separator_non_opaque` Size: N/A
	Close button	Resource: `@string/jwplayer_close` Style: `JWText.CastClose` Colors: `@color/jw_labels_primary` Sizes: `@dimen/jw_text_xlarge` `@dimen/jw_icon`

Center Controls

UiGroup.CENTER_CONTROLS
ViewModel: N/A

The primary playback controls displayed in the center of the player.

Component	Description	Customization Options
Center Controls Background	CenterControls background	Resource: `@drawable/bg_jw_center_controls` Style: `JWView.CenterControls` Colors: `@color/jw_controls_overlay` Size: N/A
Close	Shown when player is in fullscreen mode Clicking this icon exits fullscreen mode.	Resource: `@drawable/ic_jw_close` Style: `JWIcon.CenterControlsClose` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Title	Displays the title of the current playlist item	Resource: N/A Style: `JWText.CenterControlsTitle` Color: `@color/jw_labels_primary` Size: N/A
Description	Displays the description of the current playlist item	Resource: N/A Style: `JWText.CenterControlsDescription` Color: `@color/jw_labels_primary` Size: N/A
Connecting to {device}	Heads-up display (HUD) shown when the player attempts to connect to the device	The following settings define the background. Resource: `@drawable/bg_jw_cast_connecting` Style: `JWContainer.CenterControlsCastIndicator` Color: `@color/jw_fill_primary` Size: N/A
Connecting to {device}		The following settings define the text (string). Resource: `@string/jwplayer_cast_connecting_to` Style: `JWText.CenterControlsCastStatus` Colors: `@color/jw_labels_primary` Size: N/A
Playing on {device}	Heads-up display (HUD) shown when the player is casting to the device	The following settings define the background. Resource: `@drawable/bg_jw_cast_ready` Style: `JWContainer.CenterControlsCastIndicator` Color: `@color/jw_labels_primary` Size: N/A
Playing on {device}		The following settings define the text (string). Resource: `@string/jwplayer_cast_playing_on` Style: `JWText.CenterControlsCastStatus` Colors: `@color/jw_surface_secondary` Size: N/A
Unable to connect to {device}	Heads-up display (HUD) shown when the player cannot connect to the device	The following settings define the background. Resource: `@drawable/bg_jw_cast_ready` Style: `JWContainer.CenterControlsCastIndicator` Color: `@color/jw_labels_primary` Size: N/A
Unable to connect to {device}		The following settings define the text (string). Resource: `@string/jwplayer_cast_unable_to_connect_to` Style: `JWText.CenterControlsCastStatus` Colors: `@color/jw_surface_secondary` Size: N/A
Picture-in-Picture	Shown when the system supports picture-in-picture (PiP)	Resource: `@drawable/ic_jw_pip` Style: `JWIcon.CenterControlsPip` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Rewind	Rewinds 15 seconds when tapped	Resource: `@drawable/ic_jw_rewind_15` Style: `JWIcon.CenterControlsRewind` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Play	Displays when the player is paused or idle	Resource: `@drawable/ic_jw_play` Style: `JWIcon.CenterControlsPlay` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Pause	Displays during active playback	Resource: `@drawable/ic_jw_pause` Style: `JWIcon.CenterControlsPause` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Replay	Displays after playback has completed	Resource: `@drawable/ic_jw_replay` Style: `JWIcon.CenterControlsRepeat` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Buffer Spinner	Displays during content buffering	Resource: `@drawable/ic_jw_buffer` Style: `JWIcon.CenterControlsBuffer` Colors: `@color/jw_buffer_start` `@color/jw_buffer_end` Size: `@dimen/jw_large_icon`
Forward	Advances 15 seconds when tapped	Resource: `@drawable/ic_jw_fast_forward_15` Style: `JWIcon.CenterControlsForward` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Next	Advances to next playlist item	Resource: `@drawable/ic_jw_next` Style: `JWIcon.CenterControlsNext` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_large_icon`
Fullscreen (Enter)	Displays when the player is not in fullscreen	Resources: `@drawable/ic_jw_enter_fullscreen` Style: `JWIcon.CenterControlsFullscreen` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Fullscreen (Exit)	Displays when the player is in fullscreen	Resources: `@drawable/ic_jw_exit_fullscreen` Style: `JWIcon.CenterControlsFullscreen` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: `@dimen/jw_icon`

Chapters

UiGroup.CHAPTERS
ViewModel: ChaptersViewModel

Component	Description	Customization Options
	The menu background	Resource: `@drawable/bg_jw_menu` Style: `JWView.Menu.Chapters` Color: `@color/jw_surface_secondary` Size: N/A
Chapter Thumbnail	The thumbnail of the chapter. Derived from the chapters VTT file	Resource: N/A Styles: `JWImage.ChaptersItemPoster` `JWRoundedImageView.Chapters` Color: N/A Size: `@dimen/jw_icon`
Chapter Title	Name of the chapter	Resource: N/A Style: `JWText.ChaptersItemTitle` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_xlarge`
Chapter Start	Time the chapter begins	Resource: N/A Style: `JWText.ChaptersItemPosition` Color: `@color/jw_labels_secondary` Size: `@dimen/jw_text_xxlarge`
Divider	Divider meant to divide the list from the close button	Resource: N/A Style: `JWHorizontalDivider.Chapters` Color: `@color/jw_separator_non_opaque` Size: N/A
Close	Close button	Resource: `@string/jwplayer_close` Style: `JWText.ChaptersClose` Color: `@color/jw_labels_primary` Sizes: `@dimen/jw_text_xlarge` `@dimen/jw_icon`

Control Bar

UiGroup.CONTROLBAR
ViewModel: ControlbarViewModel

The bottom control interface containing advanced playback options.

Component	Description	Customization Options
Control Bar Background	Controlbar background	Resource: `@drawable/bg_jw_controlbar_contrast_gradient` Style: `JWView.Controlbar` Colors: `@color/jw_transparent` `@color/jw_controlbar_gradient_dark` Size: N/A
Playback Speed	Displays when content playback speed is not 1x	Resource: `@drawable/bg_jw_controlbar_rates` Style: `JWText.ControlbarRate` Color: `@color/jw_fill_primary` Size: `@dimen/jw_icon` `@dimen/jw_text_medium`
	Current playback position timestamp	Resource: N/A Style: `JWText.ControlbarPosition` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_medium`
	Separator between position and duration	Resource: `@string/jwplayer_control_bar_timer_delimiter` Style: `JWText.ControlbarPositionDivider` Color: `@color/jw_surface_secondary` Size: `@dimen/jw_text_medium`
	Current video's duration	Resource: N/A Style: `JWText.ControlbarDuration` Color: `@color/jw_labels_secondary` Size: `@dimen/jw_text_medium`
	Separator between duration and chapter	Resource: `@string/jwplayer_dot_separator` Style: `JWText.ControlbarChaptersDivider` Color: `@color/jw_surface_secondary` Size: `@dimen/jw_text_medium`
	Name of the current chapter. Tapping on this will open the Chapters menu	Resource: N/A Style: `JWText.ControlbarChaptersTitle` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_medium`
	Indicator to show that more chapters exist	Resource: `@string/jwplayer_arrow_indicator` Style: `JWText.ControlbarChaptersIndicator` Color: `@color/jw_labels_secondary` Size: `@dimen/jw_text_medium`
Captions (Off)	Closed captions toggle. Tapping this will toggle captions if only one track exists or open the captions menu if more exist. This icon indicates that the captions are off	Resource: `@drawable/ic_jw_captions_off` Style: `JWIcon.ControlbarCaptions` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Captions (On)	This icon indicates that the captions are on	Resource: `@drawable/ic_jw_captions_on` Style: `JWIcon.ControlbarCaptions` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
More Videos	Tapping this opens the playlist view	Resource: `@drawable/ic_jw_more_videos` Style: `JWIcon.ControlbarPlaylist` Color: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Fullscreen (Enter)	Enter fullscreen icon, tapping this puts the player in fullscreen	Resources: `@drawable/ic_jw_enter_fullscreen` Style: `JWIcon.ControlbarFullscreen` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Fullscreen (Exit)	Exit fullscreen icon, tapping this takes the player out of fullscreen	Resources: `@drawable/ic_jw_exit_fullscreen` Style: `JWIcon.ControlbarFullscreen` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Settings	Settings icon, tapping this opens the settings menu	Resource: `@drawable/ic_jw_settings` Style: `JWIcon.ControlbarMenu` Colors: `@color/jw_icons_active` `@color/jw_icons_inactive` `@color/jw_icons_tint` Size: `@dimen/jw_icon`
Live	Live Indicator	Resource: `@string/jwplayer_live_broadcast` Style: `JWRadio.ControlbarLive` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_xsmall`
Live	Live Indicator	Resource: `@drawable/jw_controlbar_live_button` Style: `JWRadio.ControlbarLive` Colors: `@color/jw_live_indicator_checked` `@color/jw_live_indicator_unchecked` Size: N/A
	The current progress of the seekbar	Resource: N/A Style: `JWControlbarSeek` Color: `@color/jw_seekbar_progress` Size: `@dimen/jw_seekbar_thickness`
	Marker signifying an ad was scheduled in the timeline	Resource: N/A Style: `JWControlbarSeek` Color: `@color/jw_seekbar_ads_marker` Size: `@dimen/jw_seekbar_ad_width` `@dimen/jw_seekbar_thickness`
	Marker signifying a chapter begins	Resource: N/A Style: `JWControlbarSeek` Color: `@color/jw_seekbar_chapter_marker` Size: `@dimen/jw_seekbar_chapter_width` `@dimen/jw_seekbar_thickness`
	Highlights the timeline between the start of the current chapter and the start of the next	Resource: N/A Style: `JWControlbarSeek` Colors: `@color/jw_seekbar_chapter_highlight` Size: `@dimen/jw_seekbar_thickness`
	The seekbar thumb	Resource: `@drawable/jw_controlbar_seek_thumb` Style: `JWControlbarSeek` Color: `@color/jw_seekbar_thumb` Size: `@dimen/jw_seekbar_thumb`
	The seekbar secondary progress, this indicates the amount of buffered video	Resource: N/A Style: `JWControlbarSeek` Color: `@color/jw_seekbar_secondary_progress` Size: `@dimen/jw_seekbar_thickness`
	The seekbar background, this indicates the size of the seekbar	Resource: N/A Style: `JWControlbarSeek` Colors: `@color/jw_seekbar_background` Size: `@dimen/jw_seekbar_thickness`
	Thumbnail preview, updates the bitmap based on the position you are scrubbing.	Resources: N/A Style: `JWImage.ControlbarThumbnailPreview` `JWRoundedImageView.ThumbnailPreview` Colors: `@color/jw_fill_primary` Size: N/A
	The position you are scrubbing to	Resource: N/A Style: `JWText.ControlbarThumbnailTimestamp` Colors: `@color/jw_labels_primary` Size: `@dimen/jw_text_medium`
	The chapter you are scrubbing to	Resource: N/A Style: `JWText.ControlbarThumbnailChapter` Colors: `@color/jw_labels_primary` Size: `@dimen/jw_text_medium`

Error Overlay

UiGroup.ERROR
ViewModel: ErrorViewModel

Error overlay displaying a playback error.

Component	Description	Customization Options
Error Background	Error overlay background	Resource: `@drawable/bg_jw_error` Style: `JWContainer.Error` Colors: `@color/jw_surface_primary` Size: N/A
Error	Error indicator	Resource: `@drawable/ic_jw_play` Style: `JWImage.ErrorIcon` Colors: `@color/jw_icons_active` Size: `@dimen/jw_large_icon`
Error Message	Error message	Resource: N/A Style: `JWText.ErrorMessage` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_medium`
Error Code	Error Code	Resource: N/A Style: `JWText.ErrorCode` Color: `@color/jw_labels_secondary` Size: `@dimen/jw_text_xxsmall`

Component	Description	Customization Options
	The menu background	Resource: `@drawable/bg_jw_menu` Style: `JWView.Menu.Settings` Colors: `@color/jw_surface_secondary` Size: N/A
Audio & Subtitles	Icon for alternate audio and captions. Tapping this takes you to the Audio & Subtitles submenu	Resource: `@drawable/ic_jw_captions_off` Style: `JWIcon.MenuOption` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: N/A
Audio & Subtitles	Label for the Audio & Subtitles submenu	Resource: `@string/jwplayer_audio_and_subtitles` Style: `JWText.MenuOptionLabel` Color: N/A Size: `@dimen/jw_text_xlarg`
	Icon for playback speed. Tapping this takes you to the Playback speed submenu	Resource: `@drawable/ic_jw_play` Style: `JWIcon.MenuOption` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: N/A
	Label for the Playback Speed submenu	Resource: `@string/jwplayer_playback_rates` Style: `JWText.MenuOptionLabel` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_xlarge`
	Indicator showing the current Playback Speed	Resource: N/A Style: `JWText.MenuOptionValue` Color: `@color/jw_labels_secondary` Size: `@dimen/jw_text_xlarge`
Quality	Icon for video quality. Tapping this takes you to the qualities submenu	Resource: `@drawable/ic_jw_quality_100` Style: `JWIcon.MenuOption` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` Size: N/A
	Label for the Quality submenu	Resource: `@string/jwplayer_quality` Style: `JWText.MenuOptionLabel` Color: `@color/jw_labels_primary` Size: `@dimen/jw_text_xlarge`
	Indicator showing the current Quality	Resource: N/A Style: `JWText.MenuOptionValue` Color: `@color/jw_labels_secondary` Size: `@dimen/jw_text_xlarge`
Divider	Divider meant to divide the list from the close button	Resource: N/A Style: `JWHorizontalDivider.Menu` Colors: `@color/jw_separator_non_opaque` Size: N/A
Close	Close button	Resource: `@string/jwplayer_close` Style: `JWText.MenuClose` Color: `@color/jw_labels_primary` Sizes: `@dimen/jw_text_xlarge` `@dimen/jw_icon`

Next Up

UiGroup.NEXT_UP
ViewModel: NextUpViewModel

Component	Description	Customization Options
	The NextUp background	Resource: `@drawable/bg_jw_next_up` Style: `JWView.NextUp` Color: `@color/jw_surface_secondary` Size: `@dimen/jw_nextup_view_height`
	Poster image for the next up playlist item as defined by the metadata provided to the player.	Resource: N/A Style: `JWImage.NextUpPoster` Color: `@color/jw_fill_primary` Size: N/A
	Countdown indicating that the next video is about to begin	Resource: `@string/jwplayer_next_up_countdown` Style: `JWText.NextUpCountdown` Color: `@color/jw_labels_primary` Size: N/A
	The title of the next playlist item as defined by the metadata provided to the player	Resource: N/A Style: `JWText.NextUpTitle` Color: `@color/jw_labels_primary` Size: N/A
Close	Dismiss button, dismisses the next up prompt	Resources: `@drawable/ic_jw_close` `@drawable/bg_jw_nextup_close` Style: `JWIcon.NextUpClose` Colors: `@color/jw_icons_active` `@color/jw_icons_tint` `@color/jw_fill_quaternary` Size: N/A