Android Exoplayer UI 커스터마이징

 

구글에서 오픈소스로 제공하는 Exoplayer 라는 미디어 플레이어가 있다.

이번에 내 마음대로 플레이어를 커스터마이징 하며 Exoplayer에 대해 알아가 보도록 하겠다.

 

Exoplayer를 사용하는 이유는 여러가지겠지만, 가장 큰 이유는 쉽게 커스터마이징이 가능하기 때문이라고 생각한다.

시중에 있는 여러 다른 플레이어들은 색이나 재생 버튼 등을 마음대로 하기 쉽지 않지만, 이 Exoplayer는 개발자나 기획자 마음대로 바꿀 수 있어 많이 사용하는 것 같다.

 

먼저 Exoplayer를 프로젝트에 추가하려면 아래의 2줄을 gradle에 추가하면 된다.

    implementation 'com.google.android.exoplayer:exoplayer-core:2.11.3'
    implementation 'com.google.android.exoplayer:exoplayer-ui:2.11.3'

 

이제 환경은 다 구축됐으니 UI를 커스터마이징 해보자.

 

일단 컨트롤러 부분을 커스텀 할것이다.

난 컨트롤러에 앞으로 감기, 재생, 일시정지, 뒤로 감기, 타임 바 기능을 구현할 것이다.

 

일단 타임 바를 먼저 만들어 보자.

    <com.google.android.exoplayer2.ui.DefaultTimeBar
        android:id="@id/exo_progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:show_timeout="10000"
        android:layout_above="@id/controllerlayout"
        app:played_color="#4caf50" 초록
        android:background="#462153" 보라/>

여기서 가장 중요한 점은 id를 exo_progress로 맞춰 주어야 한다는 것이다.
그래야 내부에서 플레이어의 타임 바로 인식하고 알아서 재생중인 컨텐츠에 맞게 타임 바를 맞춰준다.

 

몇 가지 속성에 대해 정리해 보자면

 - show_timeout : 사용자가 아무 동작이 없을 때 몇초 후에 컨트롤 바가 내려갈지 지정

 - played_color : 아래 사진에서 초록색 부분 색 지정

 - background : 아래 사진에서 보라색 부분 색 지정

 

타임 바

 

이제 타임 바 아래에 있을 버튼들을 구현해 보자

<LinearLayout
        android:id="@+id/controllerlayout"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:background="#000000"
        android:layout_height="70dp">

        <Button
            android:layout_weight="1"
            android:id="@+id/exo_rew"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:background="?android:selectableItemBackground"
            android:text="앞으로"
            android:textSize="20dp"
            android:textColor="#FFFFFF" />

        <Button
            android:layout_weight="1"
            android:id="@+id/exo_play"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:background="?android:selectableItemBackground"
            android:text="재생"
            android:textSize="20dp"
            android:textColor="#FFFFFF" />

        <Button
            android:layout_weight="1"
            android:id="@+id/exo_pause"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:background="?android:selectableItemBackground"
            android:text="정지"
            android:textSize="20dp"
            android:textColor="#FFFFFF" />

        <Button
            android:layout_weight="1"
            android:id="@+id/exo_ffwd"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_gravity="center_vertical"
            android:background="?android:selectableItemBackground"
            android:text="뒤로"
            android:textSize="20dp"
            android:textColor="#FFFFFF" />

    </LinearLayout>

컨셉을 한글 플레이어로 잡아서 다른 그림 대신 글자만 들어가게 만들어 보았다.

그림은 Button 대신 ImageButton을 이용하면 된다.

 

이것도 타임 바와 크게 다르지 않고 Exoplayer에서 지정해놓은 id만 맞춰주면 알아서 기능이 대입된다.

 

 - exo_rew : 앞으로 감기

 - exo_play : 재생

 - exo_pause : 일시정지

 - exo_ffwd : 뒤로 감기

 

재생과 일시정지 버튼은 상황에 맞게 알아서 변경된다

재생 버튼을 누르면 해당 버튼이 일시정지 버튼으로 변경되고 일시정지 버튼을 누르면 재생 버튼으로 변경되는 식이다.

 

완성본은 아래와 같다.

 

완성

 

이제 가장 중요한 영상이 재생되는 부분을 보자.

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/playerView"
    android:layout_gravity="bottom"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    app:controller_layout_id="@layout/custom_controlview"
    app:use_controller="true" />

PlayerView에서 영상이 재생된다.

 

PlayerView는 위의 컨트롤러 부분과 다르게 id가 정해져있지 않아 원하는대로 지으면 된다.

 

여기서 중요한 점은 controller_layout_id 를 지정해주는 것이다.

앞에서 만든 소중한 컨트롤러를 적용하지 않는다면 아무 의미가 없어지기 때문에 controller_layout_id 속성에 아까 내가 만들어 놓은 컨트롤러를 적용해주고 use_controller 속성을 true로 해주면 플레이어에 컨트롤러 적용까지 끝이 난다.