Fix navigation bar color on Sunmi POS devices

[swedishfrenchpress]

Problem

The navigation bar (system bar with back arrow, home button, and recent apps button) remained green on Sunmi POS terminals regardless of the selected theme. This issue occurred when switching between themes (Bitcoin orange, obsidian, green, white). The navigation bar would only update correctly after toggling dark mode on/off, which was a workaround but not a proper solution.

Root Cause

The app was using TRANSPARENT for navigationBarColor throughout the codebase. While transparent navigation bars work well on most modern Android devices, Sunmi POS devices don't properly support transparent navigation bars. When transparency is requested, these devices fall back to showing a system default color (green in this case) instead of allowing the app's background to show through.

Solution

Changed the navigation bar from TRANSPARENT to the actual theme background colors. The navigation bar now dynamically matches the active theme color, ensuring consistency across all devices including Sunmi POS terminals.

Changes Made

Core Theme Management

• ThemeManager.kt: Changed navigationBarColor from TRANSPARENT to the resolved backgroundColor based on the current theme
• ModernPOSActivity.kt: Updated to use theme background color instead of transparent, and fixed icon appearance logic to properly handle light/dark themes

Edge-to-Edge Helper

• MultiInsetEdgeToEdge.kt: Added backgroundColor parameter (defaults to Color.WHITE) to allow activities to specify their navigation bar color

Activity-Specific Fixes

• TipSelectionActivity.kt: Changed from TRANSPARENT to solid white
• WithdrawSuccessActivity.kt: Changed from TRANSPARENT to solid white
• PaymentReceivedActivity.kt: Changed from TRANSPARENT to solid white
• PaymentFailureActivity.kt: Changed from TRANSPARENT to solid white

Theme Resources

• values/themes.xml: Changed navigation bar from @android:color/transparent to @color/color_bg_white
• values-night/themes.xml: Changed navigation bar from @android:color/transparent to @color/dark_windowBackground

Testing

✅ Navigation bar now correctly matches theme colors:

• Green theme: Navigation bar is green
• Bitcoin orange theme: Navigation bar is Bitcoin orange (#F7931A)
• Obsidian theme: Navigation bar is dark (#0B1215)
• White theme: Navigation bar is white

✅ Works consistently on Sunmi POS devices without requiring dark mode toggle

✅ All activities now have properly themed navigation bars

Technical Notes

• This fix maintains edge-to-edge display while ensuring compatibility with devices that don't support transparent system bars
• The navigation bar color is now dynamically resolved based on the active theme selection
• Icon colors (light/dark) are properly set based on the theme background color

Files Changed

• app/src/main/java/com/electricdreams/numo/ui/theme/ThemeManager.kt
• app/src/main/java/com/electricdreams/numo/ModernPOSActivity.kt
• app/src/main/java/com/electricdreams/numo/feature/MultiInsetEdgeToEdge.kt
• app/src/main/java/com/electricdreams/numo/feature/tips/TipSelectionActivity.kt
• app/src/main/java/com/electricdreams/numo/feature/settings/WithdrawSuccessActivity.kt
• app/src/main/java/com/electricdreams/numo/PaymentReceivedActivity.kt
• app/src/main/java/com/electricdreams/numo/PaymentFailureActivity.kt
• app/src/main/res/values/themes.xml
• app/src/main/res/values-night/themes.xml

[swedishfrenchpress]

Detailed Code Review Comments

🔧 Core Fix: ThemeManager.kt

Before:

activity.window.navigationBarColor = android.graphics.Color.TRANSPARENT

After:

activity.window.navigationBarColor = backgroundColor

Why this matters: This is the central fix. By using the actual backgroundColor (which is resolved from the theme), the navigation bar now dynamically matches whatever theme is active. The backgroundColor is already being calculated correctly for each theme (green, Bitcoin orange, obsidian, white), so we just needed to apply it to the navigation bar instead of using transparent.

---

🎨 ModernPOSActivity.kt - Window Setup

Key changes:

1. Changed from TRANSPARENT to bgColor for both status and navigation bars
2. Fixed icon appearance logic to properly determine light/dark icons based on theme

Why this matters: The setupWindowSettings() method runs early in the activity lifecycle, so it needs to use the correct background color from the start. The icon appearance fix ensures that navigation bar icons are visible (light icons on dark backgrounds, dark icons on light backgrounds).

---

🛠️ MultiInsetEdgeToEdge.kt - Helper Function Enhancement

Added parameter:

fun enableEdgeToEdgeWithPill(
    activity: Activity,
    lightNavIcons: Boolean = true,
    backgroundColor: Int = Color.WHITE  // ← New parameter
)

Why this matters: This helper is used by many activities throughout the app. By adding a backgroundColor parameter with a sensible default (white), we maintain backward compatibility while allowing activities to specify their own colors if needed. All existing call sites continue to work without modification.

---

📱 Activity-Specific Fixes

All the activity fixes (TipSelectionActivity, WithdrawSuccessActivity, PaymentReceivedActivity, PaymentFailureActivity) follow the same pattern:

Before:

window.navigationBarColor = android.graphics.Color.TRANSPARENT

After:

val bgColor = android.graphics.Color.WHITE
window.navigationBarColor = bgColor

Why this matters: These activities all have white backgrounds, so using solid white ensures the navigation bar blends seamlessly. The explicit variable makes the intent clear and allows for easy future changes if needed.

---

🎨 Theme Resource Updates

values/themes.xml and values-night/themes.xml:

Before:

<item name="android:navigationBarColor">@android:color/transparent</item>

After:

<item name="android:navigationBarColor">@color/color_bg_white</item>
<!-- or @color/dark_windowBackground for night theme -->

Why this matters: These XML theme definitions are the fallback/default values. By setting them to solid colors instead of transparent, we ensure that even if programmatic updates fail, the navigation bar will still have a reasonable color instead of falling back to the device's default green.

---

Device Compatibility Note

This fix specifically addresses Sunmi POS devices, but it also improves compatibility across all Android devices. Some older or specialized Android devices (POS terminals, kiosks, etc.) may not properly support transparent system bars. Using solid colors ensures consistent behavior across all devices while maintaining the visual design intent.

[swedishfrenchpress]

Testing & Verification Steps

✅ How to Test This Fix

1. On Sunmi POS Device:

   • Switch between themes (Settings → Theme)
   • Verify navigation bar color matches the selected theme:
     • Green theme → Green navigation bar
     • Bitcoin orange theme → Orange navigation bar (#F7931A)
     • Obsidian theme → Dark navigation bar (#0B1215)
     • White theme → White navigation bar
   • Navigation bar should update immediately without requiring dark mode toggle

2. On Other Android Devices:

   • Verify navigation bar still works correctly
   • Check that edge-to-edge display is maintained
   • Ensure navigation bar icons are visible (light icons on dark backgrounds, dark icons on light backgrounds)

3. Test All Activities:

   • Main POS screen (ModernPOSActivity)
   • Payment received screen
   • Payment failure screen
   • Tip selection screen
   • Withdrawal success screen
   • All other activities using the edge-to-edge helper

🔍 What to Look For

• ✅ Navigation bar color matches theme background color
• ✅ No green navigation bar appearing (the original bug)
• ✅ Navigation bar updates immediately when theme changes
• ✅ No need to toggle dark mode to fix navigation bar color
• ✅ Navigation bar icons are visible and properly contrasted

📸 Before/After

Before: Navigation bar always green on Sunmi POS, regardless of theme
After: Navigation bar dynamically matches the active theme color

This fix ensures consistent theming across all Android devices, with special attention to POS terminal compatibility.

[swedishfrenchpress]

color-example-fix.mp4

video of running through a few themes on light and dark mode.

note: seperate dark mode issued spotted. on settings view the top and bottom navbars are white when darkmode is turned on.

[swedishfrenchpress]

this has been fixed by @lollerfirst in #130. we can cancel this PR.