CODEWITHSUNDEEP
androidandroid-layoutyoutube-apiandroid-youtube-api
Tyler C.
Tyler C.

Reputation: 673

Toolbar overlay hidden under system UI in YouTube player fullscreen

I'm using a YouTubePlayerFragment in my activity, and attempting to overlay the player with an app bar (aka action bar) when the player is in fullscreen. I'm following the guidelines and example in the YouTube Player API "Overlay ActionBar Demo" sample application and YouTubePlayerFragment documentation (more detail below).

All of this worked fine when I was extending from Activity and using the core ActionBar. But when I switch to using AppCompatActivity with the support Toolbar, a few issues arise:

It seems as though the player fullscreen mode used to treat the action bar as part of the system UI (along with the status bar and navigation bar), in terms of positioning and overlay, but no longer does so with the Toolbar.

Any thoughts on why this is happening or how I can use the Toolbar to properly overlay the YouTube player in fullscreen mode? I realize the Toolbar is just another view and I could probably force it to resize and reposition under the status bar, and I could set up a listener for system UI changes and show and hide my Toolbar accordingly, but I'm hoping there's a cleaner fix that I'm missing.

Here's a screenshot:

Toolbar overlay YouTube player

More detail: I was able to reproduce this behavior in the "Overlay ActionBar Demo" sample app (ActionBarDemoActivity), with the following changes:

Note that the sample app also does the following (I didn't change these):

Upvotes: 2

Views: 3185

Answers (3)

DevMhd
DevMhd

Reputation: 195

This code will solved your issue. To hide navigation bar and toolbar

   public void fullScreenCall() {
    if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { //lower api
        View v = getActivity().getWindow().getDecorView();
        v.setSystemUiVisibility(View.GONE);
    } else if(Build.VERSION.SDK_INT >= 19) {
        //for new api versions.
        View decorView = getActivity().getWindow().getDecorView();
        int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_FULLSCREEN;
        decorView.setSystemUiVisibility(uiOptions);
    }
}

to back normal mode

public void normalScreenCall() {
    if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
        View v = getActivity().getWindow().getDecorView();
        v.setSystemUiVisibility(View.VISIBLE);
    } else if(Build.VERSION.SDK_INT >= 19) {
        //for new api versions.
        View decorView = getActivity().getWindow().getDecorView();
        decorView.setSystemUiVisibility(0);
    }
}

Upvotes: 2

Tyler C.
Tyler C.

Reputation: 673

I suspect this is a bug. I filed a new bug report for the layout problem, and added a comment to an existing report about the support ActionBar/Toolbar being treated as an illegal overlay.

In the meantime, as a workaround I'm doing the following:

Layout issue

As Troy suggested, I added android:fitsSystemWindows="true" to the Toolbar XML. This fixed the layout in fullscreen, but caused padding to be added to the Toolbar when leaving fullscreen (screenshot). I added logic to the onFullscreen(boolean) method to remove the Toolbar padding (toolbar.setPadding(0, 0, 0, 0)) but this unfortunately still shows white space in place of the padding, which disappears when the layout is next redrawn (e.g., when clicking an item, starting the player, etc). I'm still a little stumped on how to properly set the layout/padding, but the current workaround will do for now.

Illegal overlay issue

Given that showing the Toolbar will pause the YouTube player in fullscreen, I've added logic to only show the Toolbar when the player is already paused. This isn't ideal, as it forces the user to pause the player to see the Toolbar, but it's the best option I can think of.

In onFullscreen(boolean), if we enter fullscreen and the player is playing, the Toolbar is hidden.

public void onFullscreen(boolean isFullscreen) {    
    mFullscreen = isFullscreen;

    if (isFullscreen && youTubePlayer.isPlaying()) {
        toolbar.setVisibility(View.GONE);
    }
    else {
        toolbar.setVisibility(View.VISIBLE);
    }
}

When setting up the player (in onInitializationSuccess()), I added a listener to show and hide the Toolbar on play and pause:

youTubePlayer.setPlaybackEventListener(new YouTubePlayer.PlaybackEventListener() {

    ...

    @Override
    public void onPlaying() { 
        if (mFullscreen) {
            toolbar.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPaused() { 
        if (mFullscreen) {
            toolbar.setVisibility(View.VISIBLE);
        }
    }

});

Upvotes: 2

Troy Perales
Troy Perales

Reputation: 189

Try adding android:fitsSystemWindows="true" to your toolbar in your XML file.

Upvotes: 1

Related Questions