Build a Glassmorphism Music Player in HarmonyOS 6 with Floating Navigation and Immersive Lighting

This article focuses on the upgraded visual-layer capabilities in HarmonyOS 6 (API 23). It demonstrates a complete implementation path for floating navigation, immersive lighting, and a glassmorphism UI, addressing three common pain points: complex safe area adaptation, navigation overlapping content, and inconsistent immersive effects. Keywords: HarmonyOS 6, floating navigation, immersive lighting.

Technical Specification Snapshot

Parameter	Description
Platform	HarmonyOS 6
API Level	API 23
Development Language	ArkTS / ETS
UI Framework	ArkUI
Core Protocols/Capabilities	Fullscreen layout, safe area avoidance, transparent system bars, background blur
GitHub Stars	Not provided in the original article
Core Dependencies	@kit.AbilityKit, @kit.ArkUI, @kit.BasicServicesKit, @kit.SensorServiceKit

HarmonyOS 6 is reshaping the visual interaction model on mobile

HarmonyOS 6 upgrades bottom navigation from a traditional space-occupying component into a floating interaction layer, while bringing the status bar, navigation area, and page background into one unified immersive system. Developers gain more than a better-looking UI—they gain a system-level visual expression toolkit.

The original example centers on a music player and showcases two key capabilities: first, the navigation bar floats above the content without obscuring information; second, background lighting, frosted glass, and safe area expansion work together to create a true fullscreen glassmorphism experience.

AI Visual Insight: The image presents a dark immersive interface paired with a bright primary-color glow. The central content uses a card-focused layout, while the background features a clear blurred diffusion layer. This indicates that the interface emphasizes foreground content, semi-transparent materials, and system-level safe area extension working together as a unified visual design.

The value of floating navigation lies in restructuring layout relationships, not just styling

The biggest change with floating navigation is that navigation no longer compresses the content area. Content can extend all the way to the bottom, while the navigation bar avoids overlap through safe area handling and dynamic padding. This gives video, music, and reading apps a more continuous canvas-like experience.

At the same time, floating navigation supports adjustable opacity, rounded corners, shadows, and blur filters, making it a natural fit for a glassmorphism design language. Compared with traditional tabs, it emphasizes depth, buoyancy, and gesture integration.

// Get the bottom avoidance area height
const avoidArea = mainWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
// Key: add bottom safe spacing for the content area to prevent overlap with the floating navigation
this.bottomAvoidHeight = avoidArea.bottomRect.height

This code reads the system bottom avoidance area and establishes the correct spacing between the floating navigation and the content area.

Correct window-level configuration is the foundation of immersive lighting

Immersive lighting is not a single-component effect. It results from the combined behavior of the window, system bars, background layer, and content layer. If the window is not configured for fullscreen layout, even rich blur, glow, and gradient effects will struggle to produce a cohesive immersive experience.

For that reason, the first step should be configuring fullscreen layout, a transparent background, and transparent system bar properties in EntryAbility.ets, while explicitly enabling system avoidance behavior.

import { window } from '@kit.ArkUI'

async function setupImmersiveWindow(windowStage: window.WindowStage) {
  const mainWindow = windowStage.getMainWindowSync()
  // Key: allow content to extend into the status bar and navigation bar areas
  await mainWindow.setWindowLayoutFullScreen(true)
  // Key: set the window background to transparent so immersive lighting can pass through
  await mainWindow.setWindowBackgroundColor('#00000000')
  // Key: make system bars transparent to maintain visual continuity
  await mainWindow.setWindowSystemBarProperties({
    statusBarColor: '#00000000',
    navigationBarColor: '#00000000',
    statusBarContentColor: '#FFFFFF',
    navigationBarContentColor: '#FFFFFF'
  })
}

This code completes immersive window initialization and serves as the prerequisite for both glassmorphism and lighting-driven backgrounds.

A glassmorphism navigation component should handle blur, lighting, and interaction feedback together

At the component layer, the example combines backgroundBlurStyle(BlurStyle.REGULAR) and backdropFilter() to create a frosted glass base, then uses rounded corners, shadows, and gradient highlights to shape a material-like texture. This combination is more stable than a purely transparent background and more closely matches native system visuals.

The selected state of a navigation item goes beyond a simple color switch. It introduces a soft glow and lightweight animation, making state feedback feel more spatial. A long press expands an opacity panel, which further reflects the component’s tunability and experimental design direction.

Column()
  .backgroundBlurStyle(BlurStyle.REGULAR) // Key: system-level frosted glass effect
  .opacity(this.navTransparency) // Key: control three levels of transparency
  .backdropFilter($r('sys.blur.20')) // Key: enhance background blur depth
  .borderRadius(24)

This code builds the visual foundation of the floating navigation panel using a glassmorphism style.

The music player page proves that immersive lighting fits content-driven scenarios

The example uses the album’s dominant color as a dynamic lighting source, then creates a glowing background with large-scale blur(120) and reinforces contrast with a dark base layer. The advantage is clear: the interface color changes with the content, so the visual design becomes a data-driven atmosphere layer instead of a static skin.

The top area uses status bar avoidance spacing, the background layer uses expandSafeArea() to extend into system regions, and the cover container and control buttons continue using the same glassmorphism component system. As a result, the page maintains a unified design language from the window level down to individual controls.

Column()
  .backgroundColor(this.currentSong.dominantColor)
  .blur(120) // Key: use large-radius blur to generate background glow
  .opacity(this.lightIntensity)

Column()
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  // Key: extend the background into system safe areas to form a complete immersive canvas

This code creates the dynamic glow background and extends the visual layer into both the status bar and bottom system area.

Adaptation strategy determines whether this UI can scale reliably across devices

From an engineering perspective, safe areas and performance are the two most critical concerns. Floating navigation must read the bottom avoidance height, and immersive headers must read the top status bar area. Do not rely on hardcoded fixed values. Otherwise, layouts will break immediately when switching between phones, tablets, or gesture modes.

Blur, shadows, and infinite animations are also high-cost effects. You should pause animations when the page is not visible and provide fallback paths for high-contrast mode or lower-performance devices—for example, degrading to a solid background with reduced blur.

The key APIs and implementation points can be summarized in one checklist

Capability	API / Method	Purpose
Fullscreen layout	setWindowLayoutFullScreen(true)	Extend content into the system bar regions
Transparent system bars	setWindowSystemBarProperties()	Remove visual separation between the status bar and navigation bar
Safe area avoidance	getWindowAvoidArea()	Dynamically retrieve top/bottom avoidance heights
Background blur	backgroundBlurStyle()	Build a system-level frosted glass effect
Fine-grained filtering	backdropFilter()	Refine the texture of background blur
Safe area expansion	expandSafeArea()	Allow the background to cover non-safe areas

Production guidance should focus on visibility, maintainability, and consistency

If you plan to use this approach in production, prioritize music, gallery, reading, video, and content community apps, because these scenarios depend more heavily on visual atmosphere and canvas continuity. For data-heavy forms or back-office tools, such an aggressive immersive design may not be necessary.

For component structure, it is best to encapsulate window initialization, floating navigation, lighting background, and content page containers separately. This improves reuse across pages while centralizing device adaptation and visual theme management.

FAQ

FAQ 1: Why does floating navigation not cover page content?

Because the page retrieves the bottom avoidance height through getWindowAvoidArea() before rendering, and then adds paddingBottom to the content area. The navigation appears to float, but the layout has already reserved safe space for it.

FAQ 2: Is blur the core of immersive lighting?

No. Blur is only part of the visual outcome. The real core is the combination of a fullscreen window, transparent system bars, safe area expansion, dynamic dominant colors, and clear foreground-background layering.

FAQ 3: Will this glassmorphism approach look the same on real devices and emulators?

Usually not. Frosted glass, transparent system bars, and wide-color visual effects depend more heavily on real device graphics capabilities. You should validate the final visuals and performance on actual HarmonyOS 6 devices.

Core Summary

This article reconstructs the core implementation of floating navigation and immersive lighting in HarmonyOS 6 (API 23), covering fullscreen immersive windows, safe area avoidance, frosted glass navigation, dynamic lighting backgrounds, and a music player case study to help developers quickly ship next-generation glassmorphism UI.