Memory

[ANDROID] ExoPlayer Controller Layout Custom하기 (r2.12.2) 본문

IT/ANDROID

[ANDROID] ExoPlayer Controller Layout Custom하기 (r2.12.2)

_JinHa_ 2021. 1. 23. 13:58
반응형

<이전 글>

 

2021/01/12 - [IT/ANDROID] - [ANDROID/KOTLIN] ExoPlayer로 동영상 실행하기 (r2.12.2)

 

[ANDROID/KOTLIN] ExoPlayer로 동영상 실행하기 (r2.12.2)

ExoPlayer 공식 홈페이지 exoplayer.dev/hello-world.html Hello world! - ExoPlayer exoplayer.dev XML ... CODE ( ViewBinding 사용중 ) class VideoDetailActivity : A..

jinha3211.tistory.com

XML (exo_playback_control_view.xml) - Custom ExoPlayer Controller Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/constraintL_control"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_80000000">

    <ImageButton
        android:id="@id/exo_rew"
        style="@style/ExoMediaButton.Rewind"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:background="@null"
        android:contentDescription="@string/previous"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/constraintL_start_pause"
        app:layout_constraintEnd_toStartOf="@+id/constraintL_start_pause"
        app:layout_constraintTop_toTopOf="@+id/constraintL_start_pause"
        app:srcCompat="@drawable/selector_video_previous" />


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintL_start_pause"
        android:layout_width="64dp"
        android:layout_height="64dp"
        app:layout_constraintBottom_toBottomOf="@+id/exo_progress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:contentDescription="@string/start"
            android:padding="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/ic_media_play"/>

        <ImageButton
            android:id="@id/exo_pause"
            style="@style/ExoMediaButton.Pause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:contentDescription="@string/pause"
            android:padding="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:drawable/ic_media_pause" />

    </androidx.constraintlayout.widget.ConstraintLayout>


    <ImageButton
        android:id="@id/exo_ffwd"
        style="@style/ExoMediaButton.FastForward"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:background="@null"
        android:contentDescription="@string/next"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/constraintL_start_pause"
        app:layout_constraintStart_toEndOf="@+id/constraintL_start_pause"
        app:layout_constraintTop_toTopOf="@+id/constraintL_start_pause"
        app:srcCompat="@drawable/selector_video_next" />

    <com.google.android.exoplayer2.ui.DefaultTimeBar
        android:id="@+id/exo_progress"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/exo_position"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/text_example"
        android:textColor="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/exo_progress"
        app:layout_constraintEnd_toStartOf="@+id/exo_duration"
        app:layout_constraintStart_toStartOf="@+id/exo_progress" />

    <TextView
        android:id="@+id/exo_duration"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="@string/text_example"
        android:textAlignment="textEnd"
        android:textColor="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/exo_progress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/exo_position" />

</androidx.constraintlayout.widget.ConstraintLayout>

※ ExoPlayer 내부에 설정되어있는 id를 사용해야 정상 동작됩니다.

<item name="exo_ad_overlay" type="id"/>
<item name="exo_artwork" type="id"/>
<item name="exo_buffering" type="id"/>
<item name="exo_content_frame" type="id"/>
<item name="exo_controller" type="id"/>
<item name="exo_controller_placeholder" type="id"/>
<item name="exo_duration" type="id"/>
<item name="exo_error_message" type="id"/>
<item name="exo_ffwd" type="id"/>
<item name="exo_next" type="id"/>
<item name="exo_overlay" type="id"/>
<item name="exo_pause" type="id"/>
<item name="exo_play" type="id"/>
<item name="exo_position" type="id"/>
<item name="exo_prev" type="id"/>
<item name="exo_progress" type="id"/>
<item name="exo_repeat_toggle" type="id"/>
<item name="exo_rew" type="id"/>
<item name="exo_shuffle" type="id"/>
<item name="exo_shutter" type="id"/>
<item name="exo_subtitles" type="id"/>
<item name="exo_vr" type="id"/>

 

XML (activity_video_detail.xml) - ExoPlayer 가 포함된 레이아웃

controller_layout_id에 바꾸고자 하는 레이아웃를 넣어준다!

app:controller_layout_id="@layout/exo_playback_control_view"
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    tools:context=".activity.VideoDetailActivity">

    <FrameLayout
        android:id="@+id/frameL_video_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- 기본
             빨리감기 / 되감기 : 15초
         -->
        <!-- Custom
            show_timeout : PlayerView사용자가 마지막으로 상호 작용 한 후 컨트롤이 숨겨지기 전까지의 지연 시간
             빨리감기(fastforward_increment) / 되감기(rewind_increment) : 10초
        -->
        <com.google.android.exoplayer2.ui.PlayerView
            android:id="@+id/exoPlayerV_video_detail"
            android:layout_width="match_parent"
            android:layout_height="210dp"
            app:controller_layout_id="@layout/exo_playback_control_view"
            app:fastforward_increment="10000"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:resize_mode="zoom"
            app:rewind_increment="10000"
            app:show_timeout="10000" />

        <ImageButton
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:contentDescription="@string/icon_back"
            android:padding="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ico_back_white" />
    </FrameLayout>
    
    ...
    
</LinearLayout>

 

 

 

[참고]

 

출처 - 

 

무작정 앱만들기 -6 (ExoPlayer로 간단한 뮤직 플레이어를 만들어보자)

medium.com/@sunminlee89/%EB%AC%B4%EC%9E%91%EC%A0%95-%EC%95%B1%EB%A7%8C%EB%93%A4%EA%B8%B0-6-exoplayer%EB%A1%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%EB%AE%A4%EC%A7%81-%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90-46e6b2594601

 

무작정 앱만들기-6(ExoPlayer로 간단한 뮤직 플레이어를 만들어보자)

이번 포스팅의 최종 목표 화면

medium.com

여러 개의 영상을 Exoplayer로 순차 재상하기

medium.com/hongbeomi-dev/%EC%97%AC%EB%9F%AC-%EA%B0%9C%EC%9D%98-%EC%98%81%EC%83%81%EC%9D%84-exoplayer%EB%A1%9C-%EC%88%9C%EC%B0%A8-%EC%9E%AC%EC%83%9D%ED%95%98%EA%B8%B0-e04025321b2f

 

여러 개의 영상을 Exoplayer로 순차 재생하기

What is ExoPlayer?

medium.com

 

반응형
저작자표시 비영리 동일조건

'IT > ANDROID' 카테고리의 다른 글

[ANDROID/KOTLIN] 일주일 날짜 구하기  (1) 2021.01.23
[ANDROID/KOTLIN] 태블릿 기기인지 코드로 확인하는 방법  (0) 2021.01.23
[ANDROID] ExoPlayer 영상 꽉차게 표시하기  (0) 2021.01.19
[ANDROID/KOTLIN] ExoPlayer로 YouTube 영상 실행하기  (2) 2021.01.18
[ANDROID/KOTLIN] ExoPlayer로 동영상 실행하기 (r2.12.2)  (0) 2021.01.12
'IT/ANDROID' Related Articles more