feat(android-edge-to-edge-support): add navigation status bar colors

.changeset/separate-bar-colors.md

@@ -0,0 +1,5 @@
+---
+"@capawesome/capacitor-android-edge-to-edge-support": minor
+---
+
+Add separate methods to set status bar and navigation bar colors independently. Introduces `setStatusBarColor()` and `setNavigationBarColor()` methods, along with corresponding configuration options. The existing `setBackgroundColor()` method is deprecated but remains functional for backward compatibility.

packages/android-edge-to-edge-support/README.md

@@ -40,9 +40,11 @@ Otherwise, the web view will be resized to fit the screen, which may cause issue
 <docgen-config>
 <!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
 
-| Prop                  | Type                | Description                                                                                | Since |
-| --------------------- | ------------------- | ------------------------------------------------------------------------------------------ | ----- |
-| **`backgroundColor`** | <code>string</code> | The hexadecimal color to set as the background color of the status bar and navigation bar. | 7.1.0 |
+| Prop                     | Type                | Description                                                                                | Since |
+| ------------------------ | ------------------- | ------------------------------------------------------------------------------------------ | ----- |
+| **`backgroundColor`**    | <code>string</code> | The hexadecimal color to set as the background color of the status bar and navigation bar. | 7.1.0 |
+| **`statusBarColor`**     | <code>string</code> | The hexadecimal color to set as the background color of the status bar.                    | 7.3.0 |
+| **`navigationBarColor`** | <code>string</code> | The hexadecimal color to set as the background color of the navigation bar.                | 7.3.0 |
 
 ### Examples
 
@@ -52,7 +54,9 @@ In `capacitor.config.json`:
 {
   "plugins": {
     "EdgeToEdge": {
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#ffffff",
+      "statusBarColor": "#ffffff",
+      "navigationBarColor": "#000000"
     }
   }
 }
@@ -69,6 +73,8 @@ const config: CapacitorConfig = {
   plugins: {
     EdgeToEdge: {
       backgroundColor: "#ffffff",
+      statusBarColor: "#ffffff",
+      navigationBarColor: "#000000",
     },
   },
 };
@@ -80,7 +86,7 @@ export default config;
 
 ## Usage
 
-The plugin **only needs to be installed**. It applies insets to the web view to support edge-to-edge display on Android. The plugin also provides a method to set the background color of the status bar and navigation bar. It's recommended to use this method in combination with the [Status Bar](https://capacitorjs.com/docs/apis/status-bar) plugin.
+The plugin **only needs to be installed**. It applies insets to the web view to support edge-to-edge display on Android. The plugin also provides methods to set the background color of the status bar and navigation bar separately or together. It's recommended to use these methods in combination with the [Status Bar](https://capacitorjs.com/docs/apis/status-bar) plugin.
 
 ```typescript
 import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
@@ -99,10 +105,28 @@ const getInsets = async () => {
   console.log('Insets:', result);
 };
 
+// Set both status bar and navigation bar to the same color (deprecated, use setStatusBarColor and setNavigationBarColor instead)
 const setBackgroundColor = async () => {
   await EdgeToEdge.setBackgroundColor({ color: '#ffffff' });
   await StatusBar.setStyle({ style: Style.Light });
 };
+
+// Set status bar and navigation bar colors separately
+const setStatusBarColor = async () => {
+  await EdgeToEdge.setStatusBarColor({ color: '#ffffff' });
+  await StatusBar.setStyle({ style: Style.Light });
+};
+
+const setNavigationBarColor = async () => {
+  await EdgeToEdge.setNavigationBarColor({ color: '#000000' });
+};
+
+// Example: Set different colors for status bar and navigation bar
+const setDifferentColors = async () => {
+  await EdgeToEdge.setStatusBarColor({ color: '#ffffff' });
+  await EdgeToEdge.setNavigationBarColor({ color: '#000000' });
+  await StatusBar.setStyle({ style: Style.Light });
+};
 ```
 
 ## API
@@ -113,6 +137,8 @@ const setBackgroundColor = async () => {
 * [`disable()`](#disable)
 * [`getInsets()`](#getinsets)
 * [`setBackgroundColor(...)`](#setbackgroundcolor)
+* [`setStatusBarColor(...)`](#setstatusbarcolor)
+* [`setNavigationBarColor(...)`](#setnavigationbarcolor)
 * [Interfaces](#interfaces)
 
 </docgen-index>
@@ -186,6 +212,44 @@ Only available on Android.
 --------------------
 
 
+### setStatusBarColor(...)
+
+```typescript
+setStatusBarColor(options: SetStatusBarColorOptions) => Promise<void>
+```
+
+Set the background color of the status bar.
+
+Only available on Android.
+
+| Param         | Type                                                                          |
+| ------------- | ----------------------------------------------------------------------------- |
+| **`options`** | <code><a href="#setstatusbarcoloroptions">SetStatusBarColorOptions</a></code> |
+
+**Since:** 7.3.0
+
+--------------------
+
+
+### setNavigationBarColor(...)
+
+```typescript
+setNavigationBarColor(options: SetNavigationBarColorOptions) => Promise<void>
+```
+
+Set the background color of the navigation bar.
+
+Only available on Android.
+
+| Param         | Type                                                                                  |
+| ------------- | ------------------------------------------------------------------------------------- |
+| **`options`** | <code><a href="#setnavigationbarcoloroptions">SetNavigationBarColorOptions</a></code> |
+
+**Since:** 7.3.0
+
+--------------------
+
+
 ### Interfaces
 
 
@@ -205,6 +269,20 @@ Only available on Android.
 | ----------- | ------------------- | ------------------------------------------------------------------------------------------ | ----- |
 | **`color`** | <code>string</code> | The hexadecimal color to set as the background color of the status bar and navigation bar. | 7.0.0 |
 
+
+#### SetStatusBarColorOptions
+
+| Prop        | Type                | Description                                                             | Since |
+| ----------- | ------------------- | ----------------------------------------------------------------------- | ----- |
+| **`color`** | <code>string</code> | The hexadecimal color to set as the background color of the status bar. | 7.3.0 |
+
+
+#### SetNavigationBarColorOptions
+
+| Prop        | Type                | Description                                                                 | Since |
+| ----------- | ------------------- | --------------------------------------------------------------------------- | ----- |
+| **`color`** | <code>string</code> | The hexadecimal color to set as the background color of the navigation bar. | 7.3.0 |
+
 </docgen-api>
 
 ## Changelog

packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdge.java

@@ -1,9 +1,13 @@
 package io.capawesome.capacitorjs.plugins.androidedgetoedgesupport;
 
 import android.graphics.Color;
+import android.graphics.drawable.ColorDrawable;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LayerDrawable;
 import android.os.Build;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.Window;
 import androidx.annotation.NonNull;
 import androidx.core.graphics.Insets;
 import androidx.core.view.ViewCompat;
@@ -18,11 +22,17 @@ public class EdgeToEdge {
     @NonNull
     private final EdgeToEdgePlugin plugin;
 
+    private int statusBarColor = Color.WHITE;
+    private int navigationBarColor = Color.WHITE;
+
     public EdgeToEdge(@NonNull EdgeToEdgePlugin plugin, @NonNull EdgeToEdgeConfig config) {
         this.config = config;
         this.plugin = plugin;
-        // Apply insets to disable the edge-to-edge feature
-        setBackgroundColor(config.getBackgroundColor());
+        // Initialize colors from config
+        this.statusBarColor = config.getStatusBarColor();
+        this.navigationBarColor = config.getNavigationBarColor();
+        // Apply insets and colors
+        updateBackgroundColors();
         applyInsets();
     }
 
@@ -40,7 +50,78 @@ public ViewGroup.MarginLayoutParams getInsets() {
     }
 
     public void setBackgroundColor(String color) {
-        setBackgroundColor(Color.parseColor(color));
+        int parsedColor = Color.parseColor(color);
+        setStatusBarColor(parsedColor);
+        setNavigationBarColor(parsedColor);
+    }
+
+    public void setStatusBarColor(String color) {
+        setStatusBarColor(Color.parseColor(color));
+    }
+
+    public void setNavigationBarColor(String color) {
+        setNavigationBarColor(Color.parseColor(color));
+    }
+
+    private void setBackgroundColor(int color) {
+        setStatusBarColor(color);
+        setNavigationBarColor(color);
+    }
+
+    private void setStatusBarColor(int color) {
+        this.statusBarColor = color;
+        updateBackgroundColors();
+    }
+
+    private void setNavigationBarColor(int color) {
+        this.navigationBarColor = color;
+        updateBackgroundColors();
+    }
+
+    private void updateBackgroundColors() {
+        View view = plugin.getBridge().getWebView();
+        // Get parent view
+        ViewGroup parent = (ViewGroup) view.getParent();
+
+        // Get the root window insets to determine status bar and navigation bar sizes
+        WindowInsetsCompat currentInsets = ViewCompat.getRootWindowInsets(view);
+        if (currentInsets != null) {
+            Insets systemBarsInsets = currentInsets.getInsets(
+                WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout()
+            );
+
+            int statusBarHeight = systemBarsInsets.top;
+            int navigationBarHeight = systemBarsInsets.bottom;
+
+            // Create a LayerDrawable with separate colors for status bar and navigation bar areas
+            ColorDrawable statusBarDrawable = new ColorDrawable(statusBarColor);
+            ColorDrawable navigationBarDrawable = new ColorDrawable(navigationBarColor);
+            ColorDrawable middleDrawable = new ColorDrawable(Color.TRANSPARENT);
+
+            // Create layer drawable
+            Drawable[] layers = new Drawable[3];
+            layers[0] = statusBarDrawable;
+            layers[1] = middleDrawable;
+            layers[2] = navigationBarDrawable;
+
+            LayerDrawable layerDrawable = new LayerDrawable(layers);
+
+            // Set layer bounds
+            int parentHeight = parent.getHeight();
+            if (parentHeight > 0) {
+                // Status bar at top
+                layerDrawable.setLayerInset(0, 0, 0, 0, parentHeight - statusBarHeight);
+                // Middle transparent area
+                layerDrawable.setLayerInset(1, 0, statusBarHeight, 0, navigationBarHeight);
+                // Navigation bar at bottom
+                layerDrawable.setLayerInset(2, 0, parentHeight - navigationBarHeight, 0, 0);
+            }
+
+            parent.setBackground(layerDrawable);
+        } else {
+            // Fallback: if we can't determine insets, just set a uniform background
+            parent.setBackgroundColor(statusBarColor);
+        }
     }
 
     private void applyInsets() {
@@ -87,6 +168,9 @@ private void applyInsets() {
 
             v.setLayoutParams(mlp);
 
+            // Update background colors when insets change
+            updateBackgroundColors();
+
             return WindowInsetsCompat.CONSUMED;
         });
     }
@@ -105,12 +189,4 @@ private void removeInsets() {
         // Reset listener
         ViewCompat.setOnApplyWindowInsetsListener(view, null);
     }
-
-    private void setBackgroundColor(int color) {
-        View view = plugin.getBridge().getWebView();
-        // Get parent view
-        ViewGroup parent = (ViewGroup) view.getParent();
-        // Set background color
-        parent.setBackgroundColor(color);
-    }
 }

packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgeConfig.java

@@ -5,6 +5,8 @@
 public class EdgeToEdgeConfig {
 
     private int backgroundColor = Color.WHITE;
+    private int statusBarColor = Color.WHITE;
+    private int navigationBarColor = Color.WHITE;
 
     public int getBackgroundColor() {
         return this.backgroundColor;
@@ -13,4 +15,20 @@ public int getBackgroundColor() {
     public void setBackgroundColor(int backgroundColor) {
         this.backgroundColor = backgroundColor;
     }
+
+    public int getStatusBarColor() {
+        return this.statusBarColor;
+    }
+
+    public void setStatusBarColor(int statusBarColor) {
+        this.statusBarColor = statusBarColor;
+    }
+
+    public int getNavigationBarColor() {
+        return this.navigationBarColor;
+    }
+
+    public void setNavigationBarColor(int navigationBarColor) {
+        this.navigationBarColor = navigationBarColor;
+    }
 }