<img src="https://img.shields.io/badge/%20-ENTERPRISE-%23B10031" style="float:left"/><br /><img src="https://img.shields.io/badge/Android-V4-009727?logo=android" style="float:left"/><br />

An engaging app experience is not driven solely by media and player functionality. In many use cases, you have added a video player to enhance the user's experience of your app -- not to showcase the video player.

You can use the Android SDK to customize the appearance of the player to create an engaging app experience.

<br /> <hr />

## Add a branding image

The JWP Android SDK enables you to add a branding image (logo or watermark) to the player.

Android screen with a JWP branding logo

Android screen with a JWP branding logo

  1. Use `LogoConfig.Builder()` to create and name a `logoConfig` object.

  2. Define the elements of the `logoConfig`.

  3. Add `logoConfig` to the player configuration.

<br />

## Customize an existing element

Use the following steps to customize an existing UI element:

  1. Hide the original `JWPlayer` UI element.

  2. Build a new custom UI element to replace the hidden UI element.

  3. (Optional) Hook the new UI element up to the JWPlayer viewmodels to receive events from the SDK.

For unique use cases you can opt to ignore the JWPlayer viewmodels and manually implement event listeners to craft the exact experience you desire for users of your application.

<br />

Below is an example hiding a default JWPlayer UI element followed by several examples showing how to replace existing UI elements with custom ones.

<br />

### Hide specific UI elements

**Sample Use Case**: _Assume you want to hide individual UI elements._

**Solution**: Use the `UiConfig`. A `UiConfig` is attached to every `PlayerConfig` object that determines if the element will be visible. By default, every player config has a `UiConfig` with all `uigroups` set to visible.

<br />

### Replace a UI Element with a custom implementation

**Sample Use Case**: _Assume you want to replace a UI element with your own implementation._


  1. Hide the control bar as explained in the [Hide specific UI elements](🔗) section.

  2. Create a custom control bar.

  3. Get and add the JW Controlbar ViewModel to the player view.

<br />

### Connect a custom control bar to our existing viewmodels

**Sample Use Case**: _Assume you want to connect a custom control bar to existing viewmodels._

**Solution**: Inside the `ControlBarView`, you can set up listeners to react to events coming from the JWPlayer view. Much of the necessary work has been handled for you by the `ViewModel`. Each `UiGroup` has a publicly accessible, associated view model that allows custom implementation without delving into the underlying specifics for different situations.

The following example shows how to set up the custom controlbar to listen to events coming from the `Controlbar ViewModel`.

<br />

### Customize styling controls

**Sample Use Case**: _Assume you want to change the title text on the overlay screen to an italics text style and 12 dp text size._

**Solution**: To override styles, you must know the style name. The title text on the overlay screen is defined by `Text.Overlay.Title`.

<br />