> For the complete documentation index, see [llms.txt](https://glitch9.gitbook.io/native-media-player/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://glitch9.gitbook.io/native-media-player/quick-start/ui-components.md).

# UI Components

## How to start

### 1. Create an empty game object

Create an empty object in Unity hierarchy.

###  2. Add a special UI component

Find and add one of the component outlined below to your object created in step 1.

* **Media Button :** standard media buttons such as play, pause, stop, loop and shuffle
* **Volume Bar :** a slider that controls the media volume
* **Seek Bar :** a slider that controls the media position
* **UI Settings** **:** a manager that controls shared UI properties

## **Media Button**

 **Media Button** is an All-In-One component that can create all buttons that **NativeMediaPlayer** currently supports like the image below.

![Media Button can become one of the many buttons](https://blog.kakaocdn.net/dn/bcMYdI/btrD6yEQxrW/kWpGouBfkrlZ0hVX8EkUlk/img.png)

Choose Button Type to determine which button it is, and put in the necessary components such as **Image** and **Events**. Button colors are defined with **UI Settings**, and check **Dark Mode** if you want to use the Dark Mode colors.

 

## **Volume Bar**

![](https://blog.kakaocdn.net/dn/cQ4Q98/btrEbERlQXK/0d5IkUPw4x0EaimgJXKe1K/img.png)

To create a volume bar, create a Unity built-in slider and put that into **Volume Bar**. The slider will behave as volume bar of the **NativeMediaPlayer**. In case you need events, add the events to the slider.

## **Seek Bar**

![](https://blog.kakaocdn.net/dn/55JNR/btrD3SKMM8p/9yFrW42kKXjvwdQ6xZSMh1/img.png)

Seek Bar also needs a Unity built-in slider. Create a slider and put it into **Seek Bar**. The slider will behave as seek bar of the **NativeMediaPlayer**. **Update Interval** is how often seek bar will be updated, and the default value is 0.5f which means that it will be updated every 0.5 seconds. You can add texts that will display the current position and the duration of the current media item.

## **UI Settings**

![](https://blog.kakaocdn.net/dn/bb56qJ/btrD7Gilics/nRxzDKZ3kFPdtfhBjkvqzK/img.png)

**UI Settings** manages all shared properties of **NativeMediaPlayer** UI elements. It only manages UI colors in the current version.