exoplayer custom controller layout ,엑소 플레이어 컨트롤, 컨트롤러 레이아웃 변경하기 (커스텀 컨트롤러 레이아웃), custom controller layout

변경된 엑소플레이어 레이아웃

exo 플레이어를 이용할 때 컨트롤러 레이아웃을 변경하고 싶을때가 있다.

 

아래와 같이하면 컨트롤러 레이아웃을 변경할 수 있다.

 

우선 custom_control_layout.xml을 만든다.

 

아래를 그대로 붙여넣자. 아래의 id는 라이브러리에서 불러올 때 사용되므로 절대 변경하면 안된다.

 

나머지 부분을 변경하며 자신이 원하는 컨트롤러를 만들어보자!

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@drawable/attachment_document_desc_bg"
    android:layoutDirection="ltr"
    android:orientation="vertical"
    android:paddingStart="20dp"
    android:paddingEnd="20dp"
    tools:targetApi="28">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:orientation="horizontal"
      android:paddingTop="4dp">

    <ImageButton
        android:id="@id/exo_prev"
        style="@style/ExoMediaButton.Previous"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_rew"
        style="@style/ExoMediaButton.Rewind"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_shuffle"
        style="@style/ExoMediaButton.Shuffle"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_repeat_toggle"
        style="@style/ExoMediaButton"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_play"
        style="@style/ExoMediaButton.Play"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_pause"
        style="@style/ExoMediaButton.Pause"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_ffwd"
        style="@style/ExoMediaButton.FastForward"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_next"
        style="@style/ExoMediaButton.Next"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

    <ImageButton
        android:id="@id/exo_vr"
        style="@style/ExoMediaButton.VR"
        android:tint="@color/colorPrimaryDark"
        android:tintMode="src_in" />

  </LinearLayout>

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="4dp"
      android:gravity="center_vertical"
      android:orientation="horizontal">

    <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="#ff323232"
        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"
        app:played_color="@color/colorPrimaryDark"
        app:unplayed_color="@color/gray" />

    <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="#ff323232"
        android:textSize="14sp"
        android:textStyle="bold" />

  </LinearLayout>

</LinearLayout>

 

 

그 후 플레이어 뷰를 띄어주는 layout에서 

 

app:controller_layout_id="@layout/custom_control_layout" 으로 바꿔주면 

자신이 커스텀한 컨트롤러의 레이아웃으로 설정된다.

 

id값을 바꾸지 않았다면 모든 동작도 동일하게 동작하므로 꼭 id값을 바꾸지 않기를 바란다. 

 

 

 

  <com.google.android.exoplayer2.ui.PlayerView
      android:id="@+id/video_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center"
      app:auto_show="true"
      app:controller_layout_id="@layout/exo_controller_view"
      app:fastforward_increment="10000"
      app:repeat_toggle_modes="none"
      app:resize_mode="fixed_width"
      app:rewind_increment="10000"
      app:surface_type="surface_view"
      app:use_controller="true" />

나는 mp3플레이어로 커스텀 해야 했기 때문에 아래와 같이 변경하였다 .

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layoutDirection="ltr"
    android:orientation="vertical"
    android:background="#D9666666"
    android:paddingStart="20dp"
    android:paddingEnd="20dp"
    tools:targetApi="28">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingTop="0dp">


        <ImageButton
            android:id="@id/exo_prev"
            style="@style/ExoMediaButton.Previous"
            android:layout_width="94dp"

            android:layout_height="72dp"
            android:layout_marginLeft="370dp"
            android:tint="#FFFFFF"
            android:tintMode="src_in" />

        <ImageButton
            android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play"
            android:layout_width="94dp"
            android:layout_height="72dp"

            android:tint="#FFFFFF"
            android:tintMode="src_in"
            android:visibility="visible" />

        <ImageButton
            android:id="@id/exo_pause"
            style="@style/ExoMediaButton.Pause"
            android:layout_width="94dp"
            android:layout_height="72dp"
            android:tint="#FFFFFF"
            android:tintMode="src_in"
            android:visibility="gone" />


        <ImageButton
            android:id="@id/exo_next"
            style="@style/ExoMediaButton.Next"
            android:layout_width="94dp"
            android:layout_height="72dp"
            android:tint="#FFFFFF"
            android:tintMode="src_in" />


    </LinearLayout>




    </LinearLayout>

 

여기에 

 

exoplayer를 불러오는 레이아웃에서 (메인 레이아웃)

 

메뉴버튼과 사진 텍스트를 포함시키고

 

exoplayer의 컨트롤바가 작동할 때 즉

 

exoPlayerView.setControllerVisibilityListener(new PlayerControlView.VisibilityListener() {//플레이어 컨트롤러 셋팅
@Override
public void onVisibilityChange(int visibility) {
playListBtn.setVisibility(visibility);
}
});

 

엑소플레이어의 컨트롤러가 사용가능한 상태일 때 리스트 버튼 등을 함께 보이게 하여

 

컨트롤러가 사라지면 함께 사라지도록 만들었다.

 

(버튼의 일반상태는 gone , 컨트롤러가 보일 때만 visibility가 되게 만듬)