Android Question ExoPlayer change background color from player

scsjc

scsjc

Well-Known Member
Licensed User
Longtime User
Hello,
is possible change the background color from playercontrol from ExoPlayer?
 
Sort by date Sort by votes
Dieter Baumgartner

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

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

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?

Erel said:
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.
Click to expand...
 
Upvote 0
DonManfred

DonManfred

Expert
Licensed User
Longtime User
Roger Taylor said:
Where can I learn how to customize ExoPlayer like this?
Click to expand...
You always should post your question in a new thread. Posting to a (three years old) existing thread is a mistake.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

Erel
  • Article
Android Code Snippet Create ExoPlayer with TextView instead of SurfaceView
Replies
0
Views
258
Erel
Erel
Erel
  • Article
B4A Library ExoPlayer (media3) - video player
Replies
14
Views
6K
Erel
Erel
Erel
  • Article
Android Tutorial ExoPlayer - full screen feature
Replies
4
Views
9K
Erel
Erel
kisoft
  • Question
Android Question ExoPlayer-ID3 metadata how to get data
2
Replies
24
Views
9K
kisoft
kisoft
Erel
  • Locked
  • Article
B4A Library ExoPlayer - MediaPlayer / VideoView Alternative
4 5 6
Replies
105
Views
97K
Erel
Erel
Top