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>
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>