Exoplayer: how to make custom PlayerControlView in the exoplayer screen like youtube

Created on 12 Oct 2020  路  5Comments  路  Source: google/ExoPlayer

I have two screen like youtube by using Motionlayout:

  1. Full mode player
  2. Mini mode

I'm using exo with DefaultTimeBar, I know this time bar will show/hide belong to controller player.
But can you support method to make DefaultTimeBar always showing, both in two mode of the above screen.
If no way, I have to create my Timebar and by manual update progress matching with player media, can I do it?

Other, can I wrap controller view in ConstraintLayout?, for aim changing size and position of controller item programmatically.
thanks.

Exoplayer Ver: 2.11.4

question

All 5 comments

Other, can I wrap controller view in ConstraintLayout?

The ExoPlayer components are standard views, so that should be possible. I'm not quite sure how scaling behaves, but I would guess the controls are evenly placed when the width gets larger. You probably want to hide some buttons when the view gets really small. It's worth to try out I would say.

For the problem with the DefaultTimeBar:

You are right that the timbar and the other control buttons are always shown or hidden together.

If you don't need the buttons and only want the timebar you can just do a custom layout for the PlayerControlView. Then make the entire PlayerControlView always visible by setting the show_timeout to 0.

Alternatively, you can use a standalone PlayerControlView with a custom layout file and place it anywhere in your activity. Just pass the player to yourStandalonePlayerControlView.setPlayer(player). This seems more efficient than your own Timebar which needs to be kept in sync with the player manually like you mentioned.

@marcbaechinger
thank for supporting.
I found the way to custom layout for the PlayerControlView by passing controller_layout_id in xml file.
but other question: Can I use two PlayerControlView for one PlayerView? Imaging like One for mini, one for full mode

Can I use two PlayerControlView for one PlayerView?

You can only use one PlayerControlView that is part of the PlayerView. But you can place a second PlayerControlView somewhere in you activity layout file, look that component up with findById(id) and then pass the player to setPlayer(player) of that view.

121677069_845353189606862_2558404011609905879_n

Can I use two PlayerControlView for one PlayerView?

You can only use one PlayerControlView that is part of the PlayerView. But you can place a second PlayerControlView somewhere in you activity layout file, look that component up with findById(id) and then pass the player to setPlayer(player) of that view.

I did like that.
But I got a problems with update time bar was split., click play button, the pause button was hidden
I am using MotionLayout, and when trasition complete, Is there invalidate to update UI of the PlayerControlView?
How can I do it?

  override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) {
        if (motionLayout.currentState == R.id.expanded) {
            // expanded
            topActivity.mainMotionLayout.transitionToState(R.id.collapsed)
            topActivity.updateScreenState(ActivityInfo.SCREEN_ORIENTATION_USER, false);
//             TODO: Need invalidate PlayerControlView here
        } else {
            // collapsed
            topActivity.mainMotionLayout.transitionToState(R.id.expanded)
            topActivity.updateScreenState(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT, false);

            updateButtonState()
        }
    }

The problems had only on the vertical screen. In the horizontal screen, without MotionLayout, It seem be OK.

Closing due to inactivity.

Was this page helpful?
0 / 5 - 0 ratings