[Android/ Kotlin] ExoPlayer2 PlayControlView Custom하기!

 

 

이 전에 썼던 Exoplayer2 사용법에 이어서 이번에는 Custom 하는 것을 해보겠습니다 .

Exoplayer2는 커스텀까지 지원해주기 때문에 정말로 쉽고 편합니다. 갓구글 .. 

간단한 예제로 MusicPlayer를 만들어보겠습니다~

이전에 포스팅 한 것들을 보고오면 좋습니다. 

 

 

https://jangstory.tistory.com/21

[Android/ Java] ExoPlayer 로 동영상 재생하기 !

 

 

https://jangstory.tistory.com/25

[Android/Kotlin ]Exoplayer 동적 playlist 만들기

 

 

PlayControlView Custom

 

먼저 controller_layout을 만들어줍니다 . 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:id="@+id/controller_layout"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/progressLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@id/exo_position"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:textStyle="bold" />

        <com.google.android.exoplayer2.ui.DefaultTimeBar
            android:id="@id/exo_progress"
            android:layout_width="0dp"
            android:layout_height="26dp"
            android:layout_weight="1" />

        <TextView
            android:id="@id/exo_duration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:textColor="@color/white"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="44dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressLayout">

        <ImageButton
            android:id="@id/exo_rew"
            style="@style/ExoMediaButton.Rewind"
            android:layout_marginStart="94dp"
            android:layout_weight="1"
            android:tintMode="src_in"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play"
            android:layout_weight="1"
            android:tintMode="src_in"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/exo_ffwd"
            app:layout_constraintStart_toEndOf="@+id/exo_rew"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@id/exo_pause"
            style="@style/ExoMediaButton.Pause"
            android:layout_weight="1"
            android:tintMode="src_in"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/exo_ffwd"
            app:layout_constraintStart_toEndOf="@+id/exo_rew"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@id/exo_ffwd"
            style="@style/ExoMediaButton.FastForward"
            android:layout_marginEnd="94dp"
            android:layout_weight="1"
            android:tintMode="src_in"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

정해진 id를 사용하는것이 상당히 중요합니다. 

 

id를 exo_position을 갖는 TextView는 현재 미디어콘텐츠가 얼마나 재생되었는지에 대한 시간을 나타냅니다. id를  exo_duration을 갖는 TextView는 현재 미디어 컨텐츠의 총 재생 시간을 나타냅니다.

 

id를 exo_progress를 갖는 DefaultTimeBar는 현재 미디어 컨텐츠가 재생된 시간을 시각적을 확인할 수 있게 하는 UI를 나타내줍니다.

 

메뉴바는 재생, 되감기, 빨리감기 등의 이미지가 필요한 UI들이 들어가 있어 ExoPlayer에서도 ImageButton으로 구성하였습니다.

exo_prev : 이전 미디어 컨텐츠 불러오기

exo_rew : 되감기

exo_play : 재생

exo_pause : 일시정지

exo_ffwd : 빨리감기

exo_next : 다음 미디어 컨텐츠 불러오기

 

저는 prev 와 next는 사용하지 않았습니다. 각자 사용하고싶은 것을 찾아서 사용하면 될것 같습니다 

 

 

activity_main.xml 에서 

 

이부분을 추가해줍니다. 

<com.google.android.exoplayer2.ui.PlayerControlView
    android:id="@+id/playerControlView"
    android:layout_width="match_parent"
    android:layout_height="133dp"
    app:controller_layout_id="@layout/controller_layout"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/singerText"
    app:show_timeout="0"
    app:use_controller="true"/>

 

여기서 중요한건 이부분입니다. 

app:use_controller="true"
app:controller_layout_id="@layout/controller_layout"

 

controller를 사용하고 우리가 만들었던 레이아웃을 넣어주면됩니다.

 

 

마지막으로 MainActivity에서 사용방법은 이전 포스팅들을 보고 사용하면 될 것 같습니다 . 감사합니다!