Android ExoPlayer , Play/Pause button in the middle of VideoPlayer

Question

Im using Exoplayer for playing the videos in my Android App. I want to place the play/pause button in the middle of the video player view(Like the one in the image below). How to achieve this

Im just inflating a new layout in place of Android default mediaController. Im wondering is it the correct way to get the below kind of image layout

media_controller.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#CC000000"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="4dip"
    android:orientation="horizontal">


    <ImageButton android:id="@+id/pause"
        style="@android:style/MediaButton.Play"
        android:layout_gravity="center_horizontal"
        android:contentDescription="play/pause" />

    <TextView android:id="@+id/time_current"
        android:textSize="14sp"
        android:textStyle="bold"
        android:paddingTop="4dip"
        android:paddingLeft="4dip"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="4dip" />

    <SeekBar
        android:id="@+id/mediacontroller_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="32dip" />

    <TextView android:id="@+id/time"
        android:textSize="14sp"
        android:textStyle="bold"
        android:paddingTop="4dip"
        android:paddingRight="4dip"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="4dip" />

</LinearLayout>

have you tried creating buttons and adding them to your layout? — Bartek Lipinski
can you post your layout and show me where exactly did you try adding those buttons? — Bartek Lipinski

Sasank Sunkavalli Sasank Sunkavalli · Accepted Answer · 2016-12-19T13:21:50

This can be achieved in Exoplayer 2.1.0 . The Exoplayer library has a way to define our own custom layouts for Media Controller playbacks, It is called as PlayBackControllerView. It can be achieved by overriding layout files. To customize these layouts, an application can define layout files with the same names in its own res/layout* directories. These layout files override the ones provided by the ExoPlayer library. We can achieve this by creating exo_playback_control_view.xml file in the application’s res/layout directory.

exo_playback_control_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_gravity="bottom"
   android:layoutDirection="ltr"
   android:background="#22000000">

   <LinearLayout
      android:id="@+id/play_pause_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:paddingTop="4dp"
      android:orientation="horizontal"
      android:gravity="center">

       <ImageButton android:id="@id/exo_play"
          style="@style/ExoMediaButton.Play"/>

       <ImageButton android:id="@id/exo_pause"
          style="@style/ExoMediaButton.Pause"/>

   </LinearLayout>

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

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

      <SeekBar android:id="@id/exo_progress"
          android:layout_width="0dp"
          android:layout_weight="1"
          android:layout_height="32dp"
          android:focusable="false"
          style="?android:attr/progressBarStyleHorizontal"/>

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

  </LinearLayout>

</RelativeLayout>

Ref : Customizing Exoplayer's UI components

Android ExoPlayer , Play/Pause button in the middle of VideoPlayer

1 Answers