Android Question ExoPlayer change background color from player

scsjc

Well-Known Member
Licensed User
Longtime User
Hello,
is possible change the background color from playercontrol from ExoPlayer?
 

Dieter Baumgartner

Member
Licensed User
Longtime User
Has anyone managed to change the color of the exoplayer when using the Exoplayer V1.10 lib in B4A V8.0 ?

Whatever i do (change the color of the customview in Designer or use Exoplayerview.color or .background), it always stays black, even if the underneath view is transparent.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
Add this to the manifest editor:

B4X:
CreateResource(values, colors.xml,
<resources>
    <color name="exoplayer_background">#ff0000</color>
</resources>
)
CreateResource(layout,  exo_simple_player_view.xml,

<merge xmlns:android="http://schemas.android.com/apk/res/android">

  <com.google.android.exoplayer2.ui.AspectRatioFrameLayout android:id="@id/exo_content_frame"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center">

    <!-- Video surface will be inserted as the first child of the content frame. -->

    <View android:id="@id/exo_shutter"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/exoplayer_background"/>

    <ImageView android:id="@id/exo_artwork"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

    <com.google.android.exoplayer2.ui.SubtitleView android:id="@id/exo_subtitles"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

  </com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

  <View android:id="@id/exo_controller_placeholder"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

  <FrameLayout android:id="@id/exo_overlay"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

</merge>
)
CreateResource(layout, exo_playback_control_view.xml,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom"
  android:layoutDirection="ltr"
  android:background="@color/exoplayer_background"
  android:orientation="vertical">

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

    <ImageButton android:id="@id/exo_prev"
      style="@style/ExoMediaButton.Previous"/>

    <ImageButton android:id="@id/exo_rew"
      style="@style/ExoMediaButton.Rewind"/>

    <ImageButton android:id="@id/exo_repeat_toggle"
      style="@style/ExoMediaButton"/>

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

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

    <ImageButton android:id="@id/exo_ffwd"
      style="@style/ExoMediaButton.FastForward"/>

    <ImageButton android:id="@id/exo_next"
      style="@style/ExoMediaButton.Next"/>

  </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:textSize="14sp"
      android:textStyle="bold"
      android:paddingLeft="4dp"
      android:paddingRight="4dp"
      android:includeFontPadding="false"
      android:textColor="#FFBEBEBE"/>

    <com.google.android.exoplayer2.ui.DefaultTimeBar
      android:id="@id/exo_progress"
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="26dp"/>

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

</LinearLayout>
)

Set the color in the first resource.
 
Upvote 1

Roger Taylor

Member
Licensed User
Longtime User
Where can I learn how to customize ExoPlayer like this? Actually, how can I learn how to use the manifest file like this? A tutorial would be nice. I've been combing the web on how to set the VR 360 mode and can't find anything. Is there an "exo_surface_type" setting?

Add this to the manifest editor:

B4X:
CreateResource(values, colors.xml,
<resources>
    <color name="exoplayer_background">#ff0000</color>
</resources>
)
CreateResource(layout,  exo_simple_player_view.xml,

<merge xmlns:android="http://schemas.android.com/apk/res/android">

  <com.google.android.exoplayer2.ui.AspectRatioFrameLayout android:id="@id/exo_content_frame"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center">

    <!-- Video surface will be inserted as the first child of the content frame. -->

    <View android:id="@id/exo_shutter"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/exoplayer_background"/>

    <ImageView android:id="@id/exo_artwork"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>

    <com.google.android.exoplayer2.ui.SubtitleView android:id="@id/exo_subtitles"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

  </com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

  <View android:id="@id/exo_controller_placeholder"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

  <FrameLayout android:id="@id/exo_overlay"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

</merge>
)
CreateResource(layout, exo_playback_control_view.xml,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom"
  android:layoutDirection="ltr"
  android:background="@color/exoplayer_background"
  android:orientation="vertical">

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

    <ImageButton android:id="@id/exo_prev"
      style="@style/ExoMediaButton.Previous"/>

    <ImageButton android:id="@id/exo_rew"
      style="@style/ExoMediaButton.Rewind"/>

    <ImageButton android:id="@id/exo_repeat_toggle"
      style="@style/ExoMediaButton"/>

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

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

    <ImageButton android:id="@id/exo_ffwd"
      style="@style/ExoMediaButton.FastForward"/>

    <ImageButton android:id="@id/exo_next"
      style="@style/ExoMediaButton.Next"/>

  </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:textSize="14sp"
      android:textStyle="bold"
      android:paddingLeft="4dp"
      android:paddingRight="4dp"
      android:includeFontPadding="false"
      android:textColor="#FFBEBEBE"/>

    <com.google.android.exoplayer2.ui.DefaultTimeBar
      android:id="@id/exo_progress"
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="26dp"/>

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

</LinearLayout>
)

Set the color in the first resource.
 
Upvote 0

DonManfred

Expert
Licensed User
Longtime User
Where can I learn how to customize ExoPlayer like this?
You always should post your question in a new thread. Posting to a (three years old) existing thread is a mistake.
 
Upvote 0
Top