feat(edge-to-edge): support different colors for the navigation bar and status bar

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

@@ -40,9 +40,10 @@ 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 |
+| **`statusBarBackgroundColor`** | <code>string</code> | The hexadecimal color to set as the background color of the status bar and navigation bar. | 7.1.0 |
 
 ### Examples
 
@@ -52,7 +53,8 @@ In `capacitor.config.json`:
 {
   "plugins": {
     "EdgeToEdge": {
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#ffffff",
+      "statusBarBackgroundColor": "#ffffff"
     }
   }
 }
@@ -69,6 +71,7 @@ const config: CapacitorConfig = {
   plugins: {
     EdgeToEdge: {
       backgroundColor: "#ffffff",
+      statusBarBackgroundColor: "#ffffff",
     },
   },
 };
@@ -113,6 +116,7 @@ const setBackgroundColor = async () => {
 * [`disable()`](#disable)
 * [`getInsets()`](#getinsets)
 * [`setBackgroundColor(...)`](#setbackgroundcolor)
+* [`setStatusBarBackgroundColor(...)`](#setstatusbarbackgroundcolor)
 * [Interfaces](#interfaces)
 
 </docgen-index>
@@ -173,7 +177,26 @@ Only available on Android.
 setBackgroundColor(options: SetBackgroundColorOptions) => Promise<void>
 ```
 
-Set the background color of the status bar and navigation bar.
+Set the background color of the navigation bar.
+
+Only available on Android.
+
+| Param         | Type                                                                            |
+| ------------- | ------------------------------------------------------------------------------- |
+| **`options`** | <code><a href="#setbackgroundcoloroptions">SetBackgroundColorOptions</a></code> |
+
+**Since:** 7.0.0
+
+--------------------
+
+
+### setStatusBarBackgroundColor(...)
+
+```typescript
+setStatusBarBackgroundColor(options: SetBackgroundColorOptions) => Promise<void>
+```
+
+Set the background color of the status bar.
 
 Only available on Android.
 

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.app.Activity;
 import android.graphics.Color;
 import android.os.Build;
+import android.util.Log;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
 import androidx.annotation.NonNull;
 import androidx.core.graphics.Insets;
 import androidx.core.view.ViewCompat;
@@ -18,12 +22,15 @@ public class EdgeToEdge {
     @NonNull
     private final EdgeToEdgePlugin plugin;
 
+    private View overlayView;
+
     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());
         applyInsets();
+        setStatusBarBackgroundColor(config.getStatusBarBackgroundColor());
     }
 
     public void enable() {
@@ -43,6 +50,10 @@ public void setBackgroundColor(String color) {
         setBackgroundColor(Color.parseColor(color));
     }
 
+    public void setStatusBarBackgroundColor(String color) {
+        setStatusBarBackgroundColor(Color.parseColor(color));
+    }
+
     private void applyInsets() {
         View view = plugin.getBridge().getWebView();
         // Get parent view
@@ -102,6 +113,11 @@ private void removeInsets() {
         mlp.rightMargin = 0;
         mlp.bottomMargin = 0;
         view.setLayoutParams(mlp);
+        if (overlayView != null) {
+            ViewGroup parentLayout = (ViewGroup) overlayView.getParent();
+            parentLayout.removeView(overlayView);
+            overlayView = null;
+        }
         // Reset listener
         ViewCompat.setOnApplyWindowInsetsListener(view, null);
     }
@@ -113,4 +129,33 @@ private void setBackgroundColor(int color) {
         // Set background color
         parent.setBackgroundColor(color);
     }
+
+    private void setStatusBarBackgroundColor(int color) {
+        View view = plugin.getBridge().getWebView();
+        Activity activity = plugin.getBridge().getActivity();
+        // Create new view
+        View overlay = new View(activity);
+        WindowInsetsCompat currentInsets = ViewCompat.getRootWindowInsets(view);
+        if (currentInsets != null) {
+            int statusBarHeight = currentInsets.getInsets(
+                    WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout()
+            ).top;
+            overlay.setLayoutParams(new FrameLayout.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    statusBarHeight
+            ));
+            overlay.setBackgroundColor(color);
+            // Get root view bridge activity
+            ViewGroup rootView = (ViewGroup) activity.getWindow().getDecorView();
+
+            // Remove previous overlay if exist
+            if (overlayView != null) {
+                rootView.removeView(overlayView);
+            }
+            // Set reference overlay view
+            overlayView = overlay;
+            // Add overlay view
+            rootView.addView(overlay);
+        }
+    }
 }

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

@@ -5,6 +5,7 @@
 public class EdgeToEdgeConfig {
 
     private int backgroundColor = Color.WHITE;
+    private int statusBarBackgroundColor = Color.WHITE;
 
     public int getBackgroundColor() {
         return this.backgroundColor;
@@ -13,4 +14,12 @@ public int getBackgroundColor() {
     public void setBackgroundColor(int backgroundColor) {
         this.backgroundColor = backgroundColor;
     }
+
+    public int getStatusBarBackgroundColor() {
+        return this.statusBarBackgroundColor;
+    }
+
+    public void setStatusBarBackgroundColor(int statusBarBackgroundColor) {
+        this.statusBarBackgroundColor = backgroundColor;
+    }
 }

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

@@ -82,14 +82,36 @@ public void setBackgroundColor(PluginCall call) {
             });
     }
 
+    @PluginMethod
+    public void setStatusBarBackgroundColor(PluginCall call) {
+        String color = call.getString("color");
+        if (color == null) {
+            call.reject(ERROR_COLOR_MISSING);
+            return;
+        }
+        getActivity()
+                .runOnUiThread(() -> {
+                    try {
+                        implementation.setStatusBarBackgroundColor(color);
+                        call.resolve();
+                    } catch (Exception exception) {
+                        call.reject(exception.getMessage());
+                    }
+                });
+    }
+
     private EdgeToEdgeConfig getEdgeToEdgeConfig() {
         EdgeToEdgeConfig config = new EdgeToEdgeConfig();
 
         try {
             String backgroundColor = getConfig().getString("backgroundColor");
+            String statusBarBackgroundColor = getConfig().getString("statusBarBackgroundColor");
             if (backgroundColor != null) {
                 config.setBackgroundColor(Color.parseColor(backgroundColor));
             }
+            if (statusBarBackgroundColor != null) {
+                config.setStatusBarBackgroundColor(Color.parseColor(statusBarBackgroundColor));
+            }
         } catch (Exception exception) {
             Logger.error(TAG, "Set config failed.", exception);
         }

packages/android-edge-to-edge-support/src/definitions.ts

@@ -10,6 +10,13 @@ declare module '@capacitor/cli' {
        * @example "#ffffff"
        */
       backgroundColor?: string;
+      /**
+       * The hexadecimal color to set as the background color of the status bar and navigation bar.
+       *
+       * @since 7.1.0
+       * @example "#ffffff"
+       */
+      statusBarBackgroundColor?: string;
     };
   }
 }
@@ -40,13 +47,21 @@ export interface EdgeToEdgePlugin {
    */
   getInsets(): Promise<GetInsetsResult>;
   /**
-   * Set the background color of the status bar and navigation bar.
+   * Set the background color of the navigation bar.
    *
    * Only available on Android.
    *
    * @since 7.0.0
    */
   setBackgroundColor(options: SetBackgroundColorOptions): Promise<void>;
+  /**
+   * Set the background color of the status bar.
+   *
+   * Only available on Android.
+   *
+   * @since 7.0.0
+   */
+  setStatusBarBackgroundColor(options: SetBackgroundColorOptions): Promise<void>;
 }
 
 /**