Status Bar Reappears After Returning from Background in Fullscreen Video Mode

#harmonyos #fullscreenvideo #statusbar #onpageshow

Read the original article：Status Bar Reappears After Returning from Background in Fullscreen Video Mode

Context

In a video page that supports both portrait and landscape modes, users can switch orientations to toggle between standard and fullscreen views. When entering fullscreen, the status bar is hidden to maximize video display. However, after returning from the background (or waking the screen), the status bar reappears and pushes the video content downward, disrupting the fullscreen experience.

Description

HarmonyOS allows developers to control screen orientation using setPreferredOrientation(). Initialization of video parameters is typically done in the aboutToAppear() lifecycle method. For actions that need to occur every time the page returns to the foreground, onPageShow() is used.

To hide the status bar during fullscreen playback, developers can use setWindowSystemBarEnable() to disable the status bar and setWindowSystemBarProperties() to configure its appearance.

Solution

The issue stems from placing status bar initialization logic inside onPageShow(). Since this method is triggered every time the page returns to the foreground—including after screen wake or background recovery—it overrides the fullscreen setting and re-enables the status bar.

To fix this, move the status bar configuration to aboutToAppear(), which is only called once when the page is first created. This prevents repeated status bar resets and preserves fullscreen mode.

Corrected Code Example:

aboutToAppear(): void {
  let SystemBarProperties: window.SystemBarProperties = {
    statusBarColor: '#FFFFFF',
    statusBarContentColor: '#000000'
  };
  let windowClass: window.Window | undefined = undefined;
  try {
    let promise = window.getLastWindow((this.getUIContext().getHostContext()));
    promise.then((data) => {
      windowClass = data;
      windowClass.setWindowSystemBarEnable(['status']);
      windowClass.setWindowSystemBarProperties(SystemBarProperties);
    }).catch((err: BusinessError) => {
      console.error('getLastWindow error');
    });
  } catch (e) {
    console.error('setScreenOrientation error');
  }
}

Key Takeaways

Avoid placing status bar configuration in onPageShow() if fullscreen mode is required.
Use aboutToAppear() for one-time initialization to prevent repeated UI resets.
Returning from background or waking the screen triggers onPageShow(), which can unintentionally override fullscreen settings.
Proper lifecycle method usage ensures consistent fullscreen behavior and better user experience.

DEV Community