PlaybackOverlayActivity & PlaybackOverlayFragment
– Android TV application hands on tutorial 7

PlaybackOverview1-2015-07-14-200711

PlaybackOverlayActivity & PlaybackOverlayFragment – Theory

I will explain about only UI part in this chapter, video control is explained in next chapter.

We will implement UI for handling video contents.

 

PlaybackOverlayActivity & PlaybackOverlayFragment – Implementation

Creating PlaybackOverlayActivity & PlaybackOverlayFragment is the same way as in introduced previously.

PlaybackOverlayActivity

New → Activity → BlankActivity

Activity Name: PlaybackOverlayActivity
Layout Name: activity_playback_overlay
 …

This PlaybackOverlayActivity will refer activity_playback_overlay.xml file in res/layout folder. It is constructed in 2 layer – VideoView in the back and PlaybackOverlayFragment in the front. VideoView is the view which we will play video contents, and PlaybackOverlayFragment will show the UI for controlling video, which we will focus on in this chapter. Implementat activity_playback_overlay.xml as follows.

We don’t need any modification for PlaybackOverlayActivity for now.

 

PlaybackOverlayFragment

New -> Java Class -> Name: PlaybackOverlayFragment

This PlaybackOverlayFragment is subclass of android.support.v17.leanback.app.PlaybackOverlayFragment which provides us component to make video control UI.

It works very similar to VideoDetailsFragment, so you just need to call setAdapter(adapter), after setting rows in adapter. For PlaybackOverlayFragment, we need to set instance of “PlaybackControlsRow”, which shows the video control UI, to first row element of adapter.

PlaybackOverview1

So let’s study “PlaybackControlsRow” and its Presenter, “PlaybackControlsRowPresenter”. We need to specify following in each instance.

  • PlaybackControlsRow
    • PrimaryActionsAdapter      – It owns icons for main row
    • SecondaryActionsAdapter – It owns icons for sub row

      Note that PlaybackControlsRow class provides us many useful default icons for video control. We only need to instantiate its inner class.

  • PlaybackControlsRowPresenter
    • DescriptionPresenter – It is Presenter for displaying item details on the top of PrimaryActions bar. 

PlaybackOverview2

Above photo explains internal construction of PlaybackControlsRow – PlaybackControlsRowpresenter. Constructor of PlaybackControlsRowPresenter takes argument of  DescriptionPresenter object, which determines how to show video details. This time, we will reuse DetailsDescriptionPresenter, which we made in previous chapter to show item details in DetailsFragment. PlaybackControlsRow have 2 rows inside to set the actions, PrimaryActionsAdapter and SecondaryActionsAdapter. We can set “actions” icon in these actionsadapters. See above photos for the available actions and these icons.

Sample implementation of PlaybackOverlayFragment is following.

 

To launch PlaybackOverlayAcitivity from DetailsActivity, let’s implement setOnActionClickedListener.

Build and Run

PlaybackOverview1-2015-07-14-200711

Background VideoView is not implemented yet and black. But we can see Video control UI is already done!

Source code is on github.

 

I will continue to implement video controls using this UI in next chapter.

Sponsored Links

4 responses

  1. Hey, nice tutorial!

    I’m developing an Android TV app and I’m using Leanback guidelines to do it. However, since the 23 version, a timer was added to the PlaybackControlsRow. The video that is playing is a live stream, so it doesn’t make sense to have a “currentTime” view there.

    Any thoughts on how I can remove it?

    Thanks 😉

    • Hi David,

      – setTotalTime
      – setCurrentTime
      – setBufferedProgress
      methods are related to show time bar.

      If I remember correctly, time bar don’t appear if you don’t call all of these methods.

      • Hey, thanks for your reply!

        Actually, that was true in the Leanback version you made this. I don’t know why but with the last updates, the currentTime started to be displayed always. I even downloaded your source code and update the Leanback version. By jumping from 23.0.0 to 23.1.0 the currentTime appear. When I put back to the Leanback version you developed in, the currentTime disappeared. Since I couldn’t downgrade the Leanback version in my project, I wasn’t able to find out where was the modification between the two versions.

        However, I did something that maybe is not the best approach:

        final FrameLayout layout = (FrameLayout)findViewById(R.id.playback_controls_fragment);
        ViewTreeObserver vto = layout.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
        layout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        layout.findViewById(R.id.current_time).setVisibility(View.GONE);
        }
        });

        Feel free to delete this comment if you don’t like it 😉

        Thanks a lot,
        David

        • Hi David, thank you for your update information sharing & countermeasure for this behavior.
          I didn’t know that there was a change in the latest version.

          It seems that leanback library is also still in development, some of the behavior may change in future.

Leave a Reply

Your email address will not be published.