CODEWITHSUNDEEP
androidmediacontrollerexoplayer
Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

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

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 enter image description here

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>

Upvotes: 3

Views: 10294

Answers (1)

Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

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

Upvotes: 8

Related Questions