---
updatedAt: 2026-09-10T09:11:07.000Z
agentTools:
  siteIndex: https://docs.jwplayer.com/llms.txt
  projectIndex: https://docs.jwplayer.com/players/llms.txt
---

# Android Style Guide Reference

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

<br />
<hr />

## Ads Controls

**UiGroup.ADS\_CONTROL**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/VastAdsViewModel.html" target="_blank">`VastAdsViewModel`</a>

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/534df06e3d8d31605a6db79918fba6d1ad2b27c9f852ad08290bf9a5a1fdcebc-image.png",
        null,
        "VastAds View"
      ],
      "align": "center",
      "sizing": "70% ",
      "caption": "VastAds View"
    }
  ]
}
[/block]

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong> </strong></td>
                <td>The VAST controls background</td>
                <td  width="48%">
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> N/A><br>
                    <strong>Colors:</strong> <code>@color/jw_controls_overlay</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/8b57ab8-Close.png" /></td>
                <td><strong>Close</strong></td>
                <td>Exit fullscreen icon, shown when the player is in fullscreen, tapping it exits fullscreen</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_close</code><br>
                    <strong>Style:</strong> <code>JWIcon.VastClose</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/626bc8a-picture_in_picture_on.png" /></td>
                <td><strong>Picture-in-Picture</strong></td>
                <td>PiP icon, tapping it puts the player/activity in PiP mode</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_pip</code><br>
                    <strong>Style:</strong> <code>JWIcon.VastPip</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/031521b-Play.png" /></td>
                <td><strong>Play</strong></td>
                <td>Play icon, tapping it resumes the ad</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_play</code><br>
                    <strong>Style:</strong> <code>JWIcon.VastPlay</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/898c6a4-Pause.png" /></td>
                <td><strong>Pause</strong></td>
                <td>Pause icon, tapping it pauses the ad</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_pause</code><br>
                    <strong>Style:</strong> <code>JWIcon.VastPlay</code><br>
                    <strong>Color:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/1c70422918e45298ed8d8dee210dd414e31823ec36c87a4f482143c89c7666ec-learn-more-icon.png" alt="Learn More" title="Learn More" width="20"></td>
                <td><strong>Learn More</strong></td>
                <td>Learn More button, tapping it redirects the user to the ad's clickthrough URL</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_learn_more</code><br>
                    <strong>Style:</strong> <code>JWText.VastLearnMore</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_large</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/280b0f7790e24132f85adfd8875b4620414aaf2ad3e923f664330c44ab191bbd-ad-message.png" /></td>
                <td><strong></strong></td>
                <td>Ad message, configurable via the string resources</td>
                <td>
                    <strong>Resources:</strong>
                    <ul>
                        <li><code>@string/jwplayer_advertising_ad_x_of_y</code></li>
                        <li><code>@string/jwplayer_advertising_remaining_time</code></li>
                    </ul>
                    <strong>Style:</strong> <code>JWText.VastAdMessage</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_small</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/5ad8beced11cf7b4d59c605d470b5aa0a5944e5985ccb7fde8ca2f559638e9a7-ad-progress.png" /></td>
                <td><strong></strong></td>
                <td>Ad progress</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/jw_vast_seek_progress_drawable</code><br>
                    <strong>Style:</strong> <code>VastProgress</code><br>
                    <strong>Color:</strong> <code>@color/jw_vast_progress</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thickness</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/13dba49b1bd19230f734533882f2d60185e5d9eb42590435bf5c5c2b5422cbfc-ad-background.png" /></td>
                <td><strong></strong></td>
                <td>Progressbar background</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/jw_vast_seek_progress_drawable</code><br>
                    <strong>Style:</strong> <code>VastProgress</code><br>
                    <strong>Color:</strong> <code>@color/jw_seekbar_background</code><br />
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thickness</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/296ae73c715151ed7690b9b9db7445228cf368f87079a5505d5e2642871c9c78-ic_jw_skip.png" /></td>
                <td><strong>Skip</strong></td>
                <td>Skip button</td>
                <td>
                    <strong>Resources:</strong>
                    <ul>
                        <li><code>@drawable/bg_jw_vast_skip</code></li>
                        <li><code>@drawable/ic_jw_skip</code></li>
                    </ul>
                    <strong>Style:</strong> <code>JWText.VastSkip</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_surface_secondary_non_opaque</code></li>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_labels_primary</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_text_small</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/e96726c-FSOn.png" /></td>
                <td><strong>Fullscreen (Enter)</strong></td>
                <td>Enter fullscreen icon, shown when the player is not in fullscreen, tapping it enters fullscreen</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_enter_fullscreen</code><br>
                    <strong>Style:</strong> <code>JWIcon.VastFullscreen</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/6fed821-FSOff.png" /></td>
                <td><strong>Fullscreen (Exit)</strong></td>
                <td>Exit fullscreen icon, shown when the player is in fullscreen, tapping it exits fullscreen</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_exit_fullscreen</code><br>
                    <strong>Style:</strong> <code>JWIcon.VastFullscreen</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Cast Dialog

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/8cb8ebba5cc606a0bd085aa5b4622063b1a74a873ae0b7f120094d19d4ab48ff-image.png",
        null,
        ""
      ],
      "align": "center",
      "sizing": "45% "
    }
  ]
}
[/block]

<br />

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong> </strong></td>
                <td>The Cast Dialog background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_cast_disconnect_dialog</code><br>
                    <strong>Style:</strong> <code>JWView.CastDialog</code><br>
                    <strong>Color:</strong> <code>@color/jw_surface_quaternary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/099d88f030d8974e6e4b0b1bd0543fb824958c43b449ee381d979c675f2fb091-casting-playing-on.png" /></td>
                <td><strong>Playing on {device}</strong></td>
                <td>Indicates which device you are currently casting to</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_playing_on</code><br>
                    <strong>Style:</strong> <code>JWText.CastDialogDevice</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_large</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/74c7362d45b27ceece373baed2226a7618f16bb52722c2874668374e32ca2b44-casting-cancel.png" /></td>
                <td><strong>Cancel</strong></td>
                <td>Closes the Cast Disconnect Dialog</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_cancel</code><br>
                    <strong>Style:</strong> <code>JWText.CastDialogCancel</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_large</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/9e34648fd7459362fef0203662dc0502f996cd23a75b791521a3514815ca630a-casting-disconnect.png" /></td>
                <td><strong>Disconnect</strong></td>
                <td>Disconnects from the casting device and resumes playback on the mobile device</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_disconnect</code><br>
                    <strong>Style:</strong> <code>JWText.CastDialogDisconnect</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_large</code>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Casting Menu

**UiGroup.CASTING\_MENU**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/CastingMenuViewModel.html" target="_blank">`CastingMenuViewModel`</a>

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/037ed9501a78991acc36c05b1fafbf4a1b7a09f67c1ba9dcafd02d4abd4ff851-image.png",
        null,
        "CastingMenView"
      ],
      "align": "center",
      "sizing": "80% ",
      "caption": "CastingMenuView"
    }
  ]
}
[/block]

<br />

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong> </strong></td>
                <td>The menu background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_menu</code><br>
                    <strong>Style:</strong> <code>JWView.Menu.Cast</code><br>
                    <strong>Colors:</strong> <code>@color/jw_surface_secondary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/9fdd882b9fc98613f13017c2aeefe2a43d66a1b85fe84b5628279a560cc4e468-casting-title.png" /></td>
                <td><strong></strong></td>
                <td>Title and call to action for the casting menu</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_connect_to_a_device</code><br>
                    <strong>Style:</strong> <code>JWText.CastTitle</code><br>
                    <strong>Colors:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/9a24ca91047fece978631a182aab978c1f21388f55d680ee7f049d11edc28d45-casting-hint.png" /></td>
                <td><strong></strong></td>
                <td>Hint that your mobile device needs to be connected to the same network as the cast device</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_use_same_wifi</code><br>
                    <strong>Style:</strong> <code>JWText.CastSubtitle</code><br>
                    <strong>Colors:</strong> <code>@color/jw_labels_secondary</code><br />
                    <strong>Size:</strong> <code>@dimen/jw_text_xsmall</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/3a0d160-Off.png" /></td>
                <td><strong></strong></td>
                <td>Icon to indicate a cast device</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_cast_off</code><br>
                    <strong>Style:</strong> <code>JWIcon.CastItem</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/36f18aa2a428454f3236be362c38f58686f09268252069d8994449ebfa1df43f-casting-device.png" /></td>
                <td><strong></strong></td>
                <td>Name of the cast device</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.CastItem</code><br>
                    <strong>Color:</strong><code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/c468d9bf9dec548e2b481030465c872ff3add2402436b968b177485a338fe643-divider.png" /></td>
                <td><strong>Divider</strong></td>
                <td>Divider</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWHorizontalDivider.Cast</code><br>
                    <strong>Colors:</strong> <code>@color/jw_separator_non_opaque</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/389e020-close.png" /></td>
                <td><strong></strong></td>
                <td>Close button</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_close</code><br>
                    <strong>Style:</strong> <code>JWText.CastClose</code><br>
                    <strong>Colors:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Sizes:</strong>
                    <ul>
                        <li><code>@dimen/jw_text_xlarge</code></li>
                        <li><code>@dimen/jw_icon</code></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Center Controls

**UiGroup.CENTER\_CONTROLS**\
**ViewModel**: N/A

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

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/9b3fce502d64d3de83698be4147adc75bab38434efb873932b39991cbda13d74-android-center-controls-view.png",
        "",
        "Center Controls view"
      ],
      "align": "center",
      "sizing": "70% ",
      "border": true,
      "caption": "CenterControls view"
    }
  ]
}
[/block]

<br />

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong>Center Controls Background</strong></td>
                <td>CenterControls background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_center_controls</code><br>
                    <strong>Style:</strong> <code>JWView.CenterControls</code><br>
                    <strong>Colors:</strong> <code>@color/jw_controls_overlay</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td width="10%" class="icon-cell"><img src="https://files.readme.io/8b57ab8-Close.png" /></td>
                <td width="10%"><strong>Close</strong></td>
                <td>Shown when player is in fullscreen mode
                    <br /><br />
                    Clicking this icon exits fullscreen mode.
                </td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/ic_jw_close</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsClose</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/f83425e-title.png" /></td>
                <td><strong>Title</strong></td>
                <td>Displays the title of the current playlist item</td>
                <td>
                    <strong>Resource:</strong> N/A <br>
                    <strong>Style:</strong> <code>JWText.CenterControlsTitle</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/379c11c-description.png" /></td>
                <td><strong>Description</strong></td>
                <td>Displays the description of the current playlist item</td>
                <td>
                    <strong>Resource:</strong> N/A <br>
                    <strong>Style:</strong> <code>JWText.CenterControlsDescription</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td rowspan="2" class="icon-cell"><img src="https://files.readme.io/60fcef7aad6af28f72d701c628e51468cff9f453329f939e4042716c6446f870-android-connecting_to_office_tv.png" /></td>
                <td rowspan="2"><strong>Connecting to {device}</strong></td>
                <td rowspan="2">Heads-up display (HUD) shown when the player attempts to connect to the device</td>
                <td>
                    The following settings define the background.
                    <br /><br />
                    <strong>Resource:</strong> <code>@drawable/bg_jw_cast_connecting</code><br>
                    <strong>Style:</strong> <code>JWContainer.CenterControlsCastIndicator</code><br>
                    <strong>Color:</strong> <code>@color/jw_fill_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td>
                    The following settings define the text (string).
                    <br /><br />
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_connecting_to</code><br>
                    <strong>Style:</strong> <code>JWText.CenterControlsCastStatus</code><br>
                    <strong>Colors:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td rowspan="2" class="icon-cell"><img src="https://files.readme.io/7047c650800d45aba22827a2745fbdef31258aa4e5367543d74611fca86bfc62-android-playing_on_office_tv.png" /></td>
                <td rowspan="2"><strong>Playing on {device}</strong></td>
                <td rowspan="2">Heads-up display (HUD) shown when the player is casting to the device</td>
                <td>
                    The following settings define the background.
                    <br /><br />
                    <strong>Resource:</strong> <code>@drawable/bg_jw_cast_ready</code><br>
                    <strong>Style:</strong> <code>JWContainer.CenterControlsCastIndicator</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td>
                    The following settings define the text (string).
                    <br /><br />
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_playing_on</code><br>
                    <strong>Style:</strong> <code>JWText.CenterControlsCastStatus</code><br>
                    <strong>Colors:</strong> <code>@color/jw_surface_secondary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td rowspan="2" class="icon-cell"><img src="https://files.readme.io/6946678386d6ac7c4eff76661e63d8b2c523d8503ce05ecc196b025fd7ddab29-cast-unable_to_connect.png" /></td>
                <td rowspan="2"><strong>Unable to connect to {device}</strong></td>
                <td rowspan="2">Heads-up display (HUD) shown when the player cannot connect to the device</td>
                <td>
                    The following settings define the background.
                    <br /><br />
                    <strong>Resource:</strong> <code>@drawable/bg_jw_cast_ready</code><br>
                    <strong>Style:</strong> <code>JWContainer.CenterControlsCastIndicator</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td>
                    The following settings define the text (string).
                    <br /><br />
                    <strong>Resource:</strong> <code>@string/jwplayer_cast_unable_to_connect_to</code><br>
                    <strong>Style:</strong> <code>JWText.CenterControlsCastStatus</code><br>
                    <strong>Colors:</strong> <code>@color/jw_surface_secondary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/626bc8a-picture_in_picture_on.png" /></td>
                <td><strong>Picture-in-Picture</strong></td>
                <td>Shown when the system supports picture-in-picture (PiP)</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_pip</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsPip</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/ef447f1-Rewind_15.png" /></td>
                <td><strong>Rewind</strong></td>
                <td>Rewinds 15 seconds when tapped</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_rewind_15</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsRewind</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/031521b-Play.png" /></td>
                <td><strong>Play</strong></td>
                <td>Displays when the player is paused or idle</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_play</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsPlay</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/898c6a4-Pause.png" /></td>
                <td><strong>Pause</strong></td>
                <td>Displays during active playback</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_pause</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsPause</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/682541b-Replay.png" /></td>
                <td><strong>Replay</strong></td>
                <td>Displays after playback has completed</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_replay</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsRepeat</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/0759cd2-Spinner.png" /></td>
                <td><strong>Buffer Spinner</strong></td>
                <td>Displays during content buffering</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_buffer</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsBuffer</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_buffer_start</code></li>
                        <li><code>@color/jw_buffer_end</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/42d55cd-Fast_Forward_15.png" /></td>
                <td><strong>Forward</strong></td>
                <td>Advances 15 seconds when tapped</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_fast_forward_15</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsForward</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/b50def4-Next.png" /></td>
                <td><strong>Next</strong></td>
                <td>Advances to next playlist item</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_next</code><br>
                    <strong>Style:</strong> <code>JWIcon.CenterControlsNext</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/e96726c-FSOn.png" /></td>
                <td><strong>Fullscreen (Enter)</strong></td>
                <td>Displays when the player is not in fullscreen</td>
                <td>
                    <strong>Resources:</strong> <code>@drawable/ic_jw_enter_fullscreen</code><br />
                    <strong>Style:</strong> <code>JWIcon.CenterControlsFullscreen</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/6fed821-FSOff.png" /></td>
                <td><strong>Fullscreen (Exit)</strong></td>
                <td>Displays when the player is in fullscreen</td>
                <td>
                    <strong>Resources:</strong> <code>@drawable/ic_jw_exit_fullscreen</code><br />
                    <strong>Style:</strong> <code>JWIcon.CenterControlsFullscreen</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Chapters

**UiGroup.CHAPTERS**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/ChaptersViewModel.html" target="_blank">`ChaptersViewModel`</a>

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/068807deba1f5f89e0a7ef0910f9dfef5d29de0a6bf84707ae7c11379fabf185-image.png",
        null,
        "ChaptersView"
      ],
      "align": "center",
      "sizing": "70% ",
      "caption": "ChaptersView"
    }
  ]
}
[/block]

<br />

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong> </strong></td>
                <td>The menu background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_menu</code><br>
                    <strong>Style:</strong> <code>JWView.Menu.Chapters</code><br>
                    <strong>Color:</strong> <code>@color/jw_surface_secondary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/0f0501a-fillprimary.png" /></td>
                <td><strong>Chapter Thumbnail</strong></td>
                <td>The thumbnail of the chapter. Derived from the chapters VTT file</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Styles:</strong>
                    <ul>
                        <li><code>JWImage.ChaptersItemPoster</code></li>
                        <li><code>JWRoundedImageView.Chapters</code></li>
                    </ul>
                    <strong>Color:</strong> N/A<br>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/fee6a54-chapter-1.png" /></td>
                <td><strong>Chapter Title</strong></td>
                <td>Name of the chapter</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ChaptersItemTitle</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/050494a-timecode_copy.png"/></td>
                <td><strong>Chapter Start</strong></td>
                <td>Time the chapter begins</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ChaptersItemPosition</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xxlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/c468d9bf9dec548e2b481030465c872ff3add2402436b968b177485a338fe643-divider.png" /></td>
                <td><strong>Divider</strong></td>
                <td>Divider meant to divide the list from the close button</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWHorizontalDivider.Chapters</code><br>
                    <strong>Color:</strong> <code>@color/jw_separator_non_opaque</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/389e020-close.png" /></td>
                <td><strong>Close</strong></td>
                <td>Close button</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_close</code><br>
                    <strong>Style:</strong> <code>JWText.ChaptersClose</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code></li><br>
                    <strong>Sizes:</strong>
                    <ul>
                        <li><code>@dimen/jw_text_xlarge</code></li>
                        <li><code>@dimen/jw_icon</code></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Control Bar

**UiGroup.CONTROLBAR**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/ControlbarViewModel.html" target="_blank">`ControlbarViewModel`</a>

The bottom control interface containing advanced playback options.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/9dbc4278ba630d65d05dce4b973939fe3b506eb54b3979153aca9125b372bc3b-ControlBarView.png",
        "",
        "Control Bar View"
      ],
      "align": "center",
      "sizing": "70% ",
      "caption": "ControlbarView"
    }
  ]
}
[/block]

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong>Control Bar Background</strong></td>
                <td>Controlbar background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_controlbar_contrast_gradient</code><br>
                    <strong>Style:</strong> <code>JWView.Controlbar</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_transparent</code></li>
                        <li><code>@color/jw_controlbar_gradient_dark</code></li>
                    </ul>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/c19637e-1.5x.png" /></td>
                <td><strong>Playback Speed</strong></td>
                <td>Displays when content playback speed is not 1x</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/bg_jw_controlbar_rates</code><br>
                    <strong>Style:</strong> <code>JWText.ControlbarRate</code><br>
                    <strong>Color:</strong> <code>@color/jw_fill_primary</code><br>
                    <strong>Size:</strong>
                    <ul>
                        <li><code>@dimen/jw_icon</code></li>
                        <li><code>@dimen/jw_text_medium</code></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/050494a-timecode_copy.png" /></td>
                <td><strong></strong></td>
                <td>Current playback position timestamp</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ControlbarPosition</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/303b516-delimitter.png" /></td>
                <td><strong></strong></td>
                <td>Separator between position and duration</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_control_bar_timer_delimiter</code><br>
                    <strong>Style:</strong> <code>JWText.ControlbarPositionDivider</code><br>
                    <strong>Color:</strong> <code>@color/jw_surface_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/050494a-timecode_copy.png" /></td>
                <td><strong></strong></td>
                <td>Current video's duration</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ControlbarDuration</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/2ca6285-surfacesecondary.png" /></td>
                <td><strong></strong></td>
                <td>Separator between duration and chapter</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_dot_separator</code><br>
                    <strong>Style:</strong> <code>JWText.ControlbarChaptersDivider</code><br>
                    <strong>Color:</strong> <code>@color/jw_surface_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/fee6a54-chapter-1.png" /></td>
                <td><strong></strong></td>
                <td>Name of the current chapter. Tapping on this will open the Chapters menu</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ControlbarChaptersTitle</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/c05abc0-Right.png" /></td>
                <td><strong></strong></td>
                <td>Indicator to show that more chapters exist</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_arrow_indicator</code><br>
                    <strong>Style:</strong> <code>JWText.ControlbarChaptersIndicator</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/d2d3842-subsoff.png" /></td>
                <td><strong>Captions (Off)</strong></td>
                <td>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</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_captions_off</code><br>
                    <strong>Style:</strong> <code>JWIcon.ControlbarCaptions</code><br>
                    <strong>Colors:</strong> 
                        <ul>
                            <li><code>@color/jw_icons_active</code></li>
                            <li><code>@color/jw_icons_inactive</code></li>
                            <li><code>@color/jw_icons_tint</code></li>
                        </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/1fd9b21-subson.png" /></td>
                <td><strong>Captions (On)</strong></td>
                <td>This icon indicates that the captions are on</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_captions_on</code><br>
                    <strong>Style:</strong> <code>JWIcon.ControlbarCaptions</code><br>
                    <strong>Colors:</strong> 
                        <ul>
                            <li><code>@color/jw_icons_active</code></li>
                            <li><code>@color/jw_icons_inactive</code></li>
                            <li><code>@color/jw_icons_tint</code></li>
                        </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/b792877-Playlist.png" /></td>
                <td><strong>More Videos</strong></td>
                <td>Tapping this opens the playlist view</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_more_videos</code><br>
                    <strong>Style:</strong> <code>JWIcon.ControlbarPlaylist</code><br>
                    <strong>Color:</strong> 
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/e96726c-FSOn.png" /></td>
                <td><strong>Fullscreen (Enter)</strong></td>
                <td>Enter fullscreen icon, tapping this puts the player in fullscreen</td>
                <td>
                    <strong>Resources:</strong> <code>@drawable/ic_jw_enter_fullscreen</code><br />
                    <strong>Style:</strong> <code>JWIcon.ControlbarFullscreen</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/6fed821-FSOff.png" /></td>
                <td><strong>Fullscreen (Exit)</strong></td>
                <td>Exit fullscreen icon, tapping this takes the player out of fullscreen</td>
                <td>
                    <strong>Resources:</strong> <code>@drawable/ic_jw_exit_fullscreen</code><br />
                    <strong>Style:</strong> <code>JWIcon.ControlbarFullscreen</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/eb4709cd069df8d1e1a825b4825d614df8b3d493d798b3854fa07619eb92e5ae-ic_jw_settings.png" /></td>
                <td><strong>Settings</strong></td>
                <td>Settings icon, tapping this opens the settings menu</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_settings</code><br>
                    <strong>Style:</strong> <code>JWIcon.ControlbarMenu</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_inactive</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> <code>@dimen/jw_icon</code>
                </td>
            </tr>
            <tr>
                <td rowspan="2" class="icon-cell"><img src="https://files.readme.io/870fe18-live.png" /></td>
                <td rowspan="2"><strong>Live</strong></td>
                <td rowspan="2">Live Indicator</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_live_broadcast</code><br>
                    <strong>Style:</strong> <code>JWRadio.ControlbarLive</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xsmall</code>
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Resource:</strong> <code>@drawable/jw_controlbar_live_button</code><br>
                    <strong>Style:</strong> <code>JWRadio.ControlbarLive</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_live_indicator_checked</code></li>
                        <li><code>@color/jw_live_indicator_unchecked</code></li>
                    </ul>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/dc54f21f2b7f3fdf9df09dbf1317bc2c9acc86b456a028621f4873ed079fba6d-current_progress_seekbar.png" /></td>
                <td><strong></strong></td>
                <td>The current progress of the seekbar</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Color:</strong> <code>@color/jw_seekbar_progress</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thickness</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>Marker signifying an ad was scheduled in the timeline</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Color:</strong> <code>@color/jw_seekbar_ads_marker</code><br>
                    <strong>Size:</strong>
                    <ul>
                        <li><code>@dimen/jw_seekbar_ad_width</code></li>
                        <li><code>@dimen/jw_seekbar_thickness</code></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>Marker signifying a chapter begins</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Color:</strong> <code>@color/jw_seekbar_chapter_marker</code><br>
                    <strong>Size:</strong>
                    <ul>
                        <li><code>@dimen/jw_seekbar_chapter_width</code></li>
                        <li><code>@dimen/jw_seekbar_thickness</code></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>Highlights the timeline between the start of the current chapter and the start of the next</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Colors:</strong> <code>@color/jw_seekbar_chapter_highlight</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thickness</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/853daa1-seekbarseeking.png" /></td>
                <td><strong></strong></td>
                <td>The seekbar thumb</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/jw_controlbar_seek_thumb</code><br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Color:</strong> <code>@color/jw_seekbar_thumb</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thumb</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>The seekbar secondary progress, this indicates the amount of buffered video</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Color:</strong> <code>@color/jw_seekbar_secondary_progress</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thickness</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/13dba49b1bd19230f734533882f2d60185e5d9eb42590435bf5c5c2b5422cbfc-ad-background.png" /></td>
                <td><strong></strong></td>
                <td>The seekbar background, this indicates the size of the seekbar</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWControlbarSeek</code><br>
                    <strong>Colors:</strong> <code>@color/jw_seekbar_background</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_seekbar_thickness</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>Thumbnail preview, updates the bitmap based on the position you are scrubbing.</td>
                <td>
                    <strong>Resources:</strong> N/A<br>
                    <strong>Style:</strong>
                    <ul>
                        <li><code>JWImage.ControlbarThumbnailPreview</code></li>
                        <li><code>JWRoundedImageView.ThumbnailPreview</code></li>
                    </ul>
                    <strong>Colors:</strong> <code>@color/jw_fill_primary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>The position you are scrubbing to</td>
                <td>
                    <strong>Resource:</strong> N/A <br>
                    <strong>Style:</strong> <code>JWText.ControlbarThumbnailTimestamp</code><br>
                    <strong>Colors:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="" /></td>
                <td><strong></strong></td>
                <td>The chapter you are scrubbing to</td>
                <td>
                    <strong>Resource:</strong> N/A <br>
                    <strong>Style:</strong> <code>JWText.ControlbarThumbnailChapter</code><br>
                    <strong>Colors:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Error Overlay

**UiGroup.ERROR**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/ErrorViewModel.html" target="_blank">`ErrorViewModel`</a>

Error overlay displaying a playback error.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/fa999d2e42f706c485bddd4a501f375b81b18184d27c62e7d9acded11f5cfd5a-image.png",
        null,
        "ErrorView"
      ],
      "align": "center",
      "sizing": "70% ",
      "caption": "ErrorView"
    }
  ]
}
[/block]

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong>Error Background</strong></td>
                <td>Error overlay background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_error</code><br>
                    <strong>Style:</strong> <code>JWContainer.Error</code><br>
                    <strong>Colors:</strong> <code> @color/jw_surface_primary</code><br/>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td width="10%" class="icon-cell"><img src="https://files.readme.io/927705b-Playback_Error.png" /></td>
                <td width="10%"><strong>Error</strong></td>
                <td>Error indicator</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code> @drawable/ic_jw_play</code><br>
                    <strong>Style:</strong> <code>JWImage.ErrorIcon</code><br>
                    <strong>Colors:</strong> <code>@color/jw_icons_active</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_large_icon</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/f01e8a60ac00a6ed467bafe6a4e58456b928113849386f68300623e678407c7f-error-message.png" /></td>
                <td><strong>Error Message</strong></td>
                <td>Error message</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ErrorMessage</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br />
                    <strong>Size:</strong> <code>@dimen/jw_text_medium</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/ba7d89e2f9591f389a4c8cca70586b6d406022fc211d1431bdefe0b52b2c5e4b-error-code.png" /></td>
                <td><strong>Error Code</strong></td>
                <td>Error Code</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.ErrorCode</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_secondary</code><br />
                    <strong>Size:</strong> <code>@dimen/jw_text_xxsmall</code>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Menu

**UIGroup.SETTINGS\_MENU**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/SettingsMenuViewModel.html" target="_blank">`SettingsMenuViewModel`</a>

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/466b02d4c386a541fd0ec56f4068bc0898d14cccf37b7114362ba2bf0f59d5b0-image.png",
        null,
        "MenuView"
      ],
      "align": "center",
      "sizing": "70% ",
      "caption": "MenuView"
    }
  ]
}
[/block]

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong> </strong></td>
                <td>The menu background</td>
                <td width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_menu</code><br>
                    <strong>Style:</strong> <code>JWView.Menu.Settings</code><br>
                    <strong>Colors:</strong> <code>@color/jw_surface_secondary</code><br />
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/d2d3842-subsoff.png"/></td>
                <td><strong>Audio & Subtitles</strong></td>
                <td>Icon for alternate audio and captions. Tapping this takes you to the Audio & Subtitles submenu</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_captions_off</code><br>
                    <strong>Style:</strong> <code>JWIcon.MenuOption</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/eafb12577659dc46c4b4feab81bfbdb5642145fd00c56b142a3b8cca27b044d4-audio-and-subtitles.png"/></td>
                <td><strong>Audio & Subtitles</strong></td>
                <td>Label for the Audio & Subtitles submenu</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_audio_and_subtitles</code><br>
                    <strong>Style:</strong> <code>JWText.MenuOptionLabel</code><br>
                    <strong>Color:</strong> N/A<br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarg</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/62f178e7674752771bb6ea72b0155abe88a6b090ebedce9994091ef0c800a574-ic_jw_playback_rate.png" /></td>
                <td><strong></strong></td>
                <td>Icon for playback speed. Tapping this takes you to the Playback speed submenu</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_play</code><br>
                    <strong>Style:</strong> <code>JWIcon.MenuOption</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/3ee2624c3488fff53405a97976e6bd87bd113ae9590f5df273418757109a1095-playback-speed-label.png" /></td>
                <td><strong></strong></td>
                <td>Label for the Playback Speed submenu</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_playback_rates</code><br>
                    <strong>Style:</strong> <code>JWText.MenuOptionLabel</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/d220c0346fafa6e5554360d1fc754bda447fe2053454e73e4cf6b5b724db16e1-playback-speed-indicator.png" /></td>
                <td><strong></strong></td>
                <td>Indicator showing the current Playback Speed</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.MenuOptionValue</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/7ec7b2201a1a22b5720f1aa88bc4621d2a20709ce99c3e0c646f8ba2a0623e25-ic_jw_quality_100.png" /></td>
                <td><strong>Quality</strong></td>
                <td>Icon for video quality. Tapping this takes you to the qualities submenu</td>
                <td>
                    <strong>Resource:</strong> <code>@drawable/ic_jw_quality_100</code><br>
                    <strong>Style:</strong> <code>JWIcon.MenuOption</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                    </ul>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/50af52350f51f3b0619f58c5594737e2113c75f076ab1d282174c1e4babb0349-quality-label.png" /></td>
                <td><strong></strong></td>
                <td>Label for the Quality submenu</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_quality</code><br>
                    <strong>Style:</strong> <code>JWText.MenuOptionLabel</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/8e033b6430744fe738211e59a575ea9bc9234783c42b14fed22a397ea2e53223-quality-indicator.png" /></td>
                <td><strong></strong></td>
                <td>Indicator showing the current Quality</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.MenuOptionValue</code><br>
                    <strong>Color:</strong> <code> @color/jw_labels_secondary</code><br>
                    <strong>Size:</strong> <code>@dimen/jw_text_xlarge</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/c468d9bf9dec548e2b481030465c872ff3add2402436b968b177485a338fe643-divider.png" /></td>
                <td><strong>Divider</strong></td>
                <td>Divider meant to divide the list from the close button</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWHorizontalDivider.Menu</code><br>
                    <strong>Colors:</strong> <code>@color/jw_separator_non_opaque</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/389e020-close.png" /></td>
                <td><strong>Close</strong></td>
                <td>Close button</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_close</code><br>
                    <strong>Style:</strong> <code>JWText.MenuClose</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Sizes:</strong>
                    <ul>
                        <li><code>@dimen/jw_text_xlarge</code></li>
                        <li><code>@dimen/jw_icon</code></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</span>

<br />
<hr />

## Next Up

**UiGroup.NEXT\_UP**\
**ViewModel**: <a href="https://sdk.jwplayer.com/android/v4/reference/com/jwplayer/pub/ui/viewmodels/NextUpViewModel.html" target="_blank">`NextUpViewModel`</a>

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/2aa5126438bb290260ed126a7e3748a7bd2d696fd58ae9c84b2823e9d0c32a8a-image.png",
        null,
        "NextUpView"
      ],
      "align": "center",
      "sizing": "60% ",
      "caption": "NextUpView"
    }
  ]
}
[/block]

<span class="manual-tbl-font">
    <table>
        <thead>
            <tr>
                <th>Icon</th>
                <th>Component</th>
                <th>Description</th>
                <th>Customization Options</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%" class="icon-cell"></td>
                <td width="10%"><strong> </strong></td>
                <td>The NextUp background</td>
                <td  width="48%">
                    <strong>Resource:</strong> <code>@drawable/bg_jw_next_up</code><br>
                    <strong>Style:</strong> <code>JWView.NextUp</code><br>
                    <strong>Color:</strong> <code>@color/jw_surface_secondary</code><br />
                    <strong>Size:</strong> <code>@dimen/jw_nextup_view_height</code>
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/72a957ac9c71b3a1818761b261606e8c83fada66838d5b4ce4c223a0f22967fd-next-up-poster.png" /></td>
                <td><strong></strong></td>
                <td>Poster image for the next up playlist item as defined by the metadata provided to the player.</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWImage.NextUpPoster</code><br>
                    <strong>Color:</strong> <code>@color/jw_fill_primary</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/0b7d6e6de4ae74f2a4c849fd8021cf2e4e3f2219a3173c44243202ec275cc4f1-next-up-countdown.png" /></td>
                <td><strong></strong></td>
                <td>Countdown indicating that the next video is about to begin</td>
                <td>
                    <strong>Resource:</strong> <code>@string/jwplayer_next_up_countdown</code><br>
                    <strong>Style:</strong> <code>JWText.NextUpCountdown</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/b2113903172a225cf7cd6c4c96858c9aa1aeb8c55b28e232e3f73440db4d79c6-next-up-title.png" /></td>
                <td><strong></strong></td>
                <td>The title of the next playlist item as defined by the metadata provided to the player</td>
                <td>
                    <strong>Resource:</strong> N/A<br>
                    <strong>Style:</strong> <code>JWText.NextUpTitle</code><br>
                    <strong>Color:</strong> <code>@color/jw_labels_primary</code><br>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
            <tr>
                <td class="icon-cell"><img src="https://files.readme.io/8b57ab8-Close.png" /></td>
                <td><strong>Close</strong></td>
                <td>Dismiss button, dismisses the next up prompt</td>
                <td>
                    <strong>Resources:</strong>
                    <ul>
                        <li><code>@drawable/ic_jw_close</code></li>
                        <li><code>@drawable/bg_jw_nextup_close</code></li>
                    </ul>
                    <strong>Style:</strong> <code>JWIcon.NextUpClose</code><br>
                    <strong>Colors:</strong>
                    <ul>
                        <li><code>@color/jw_icons_active</code></li>
                        <li><code>@color/jw_icons_tint</code></li>
                        <li><code>@color/jw_fill_quaternary</code></li>
                    </ul>
                    <strong>Size:</strong> N/A
                </td>
            </tr>
        </tbody>
    </table>
</span>

# Sibling pages

* [Simple Android Customization](https://docs.jwplayer.com/players/docs/simple-android-customization.md)
* [Custom Android UI Implementation](https://docs.jwplayer.com/players/docs/custom-android-ui-implementation.md)