@capawesome/capacitor-android-edge-to-edge-support 7.0.1 → 7.1.1

package/README.md

@@ -13,6 +13,49 @@ npm install @capawesome/capacitor-android-edge-to-edge-support
 npx cap sync
 ```
 
+## Configuration
+
+<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 |
+
+### Examples
+
+In `capacitor.config.json`:
+
+```json
+{
+  "plugins": {
+    "EdgeToEdge": {
+      "backgroundColor": "#ffffff"
+    }
+  }
+}
+```
+
+In `capacitor.config.ts`:
+
+```ts
+/// <reference types="@capawesome/capacitor-android-edge-to-edge-support" />
+
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  plugins: {
+    EdgeToEdge: {
+      backgroundColor: "#ffffff",
+    },
+  },
+};
+
+export default config;
+```
+
+</docgen-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.

package/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdge.java

@@ -11,10 +11,14 @@ import androidx.core.view.WindowInsetsCompat;
 
 public class EdgeToEdge {
 
+    @NonNull
+    private final EdgeToEdgeConfig config;
+
     @NonNull
     private final EdgeToEdgePlugin plugin;
 
-    public EdgeToEdge(@NonNull EdgeToEdgePlugin plugin) {
+    public EdgeToEdge(@NonNull EdgeToEdgePlugin plugin, @NonNull EdgeToEdgeConfig config) {
+        this.config = config;
         this.plugin = plugin;
         // Apply insets to disable the edge-to-edge feature
         applyInsets();
@@ -39,28 +43,27 @@ public class EdgeToEdge {
         // Get parent view
         ViewGroup parent = (ViewGroup) view.getParent();
         // Set background color to black
-        parent.setBackgroundColor(Color.WHITE);
+        parent.setBackgroundColor(this.config.getBackgroundColor());
         // Apply insets to disable the edge-to-edge feature
         ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
-            Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
-            Boolean keyboardVisible = windowInsets.isVisible(WindowInsetsCompat.Type.ime());
+            // Retrieve system bars insets (for status/navigation bars)
+            Insets systemBarsInsets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
+            // Retrieve keyboard (IME) insets
+            Insets imeInsets = windowInsets.getInsets(WindowInsetsCompat.Type.ime());
+            boolean keyboardVisible = windowInsets.isVisible(WindowInsetsCompat.Type.ime());
 
             ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
 
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM) {
-                if (keyboardVisible) {
-                    mlp.bottomMargin = 0;
-                } else {
-                    mlp.bottomMargin = insets.bottom;
-                }
-            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
-                mlp.bottomMargin = insets.bottom;
-            }
+            // Apply the appropriate bottom inset: use keyboard inset if visible, else system bars inset
+            mlp.bottomMargin = keyboardVisible ? imeInsets.bottom : systemBarsInsets.bottom;
+
+            // Set the other margins using system bars insets
+            mlp.topMargin = systemBarsInsets.top;
+            mlp.leftMargin = systemBarsInsets.left;
+            mlp.rightMargin = systemBarsInsets.right;
 
-            mlp.leftMargin = insets.left;
-            mlp.rightMargin = insets.right;
-            mlp.topMargin = insets.top;
             v.setLayoutParams(mlp);
+
             return WindowInsetsCompat.CONSUMED;
         });
     }

package/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgeConfig.java

@@ -0,0 +1,16 @@
+package io.capawesome.capacitorjs.plugins.androidedgetoedgesupport;
+
+import android.graphics.Color;
+
+public class EdgeToEdgeConfig {
+
+    private int backgroundColor = Color.WHITE;
+
+    public int getBackgroundColor() {
+        return this.backgroundColor;
+    }
+
+    public void setBackgroundColor(int backgroundColor) {
+        this.backgroundColor = backgroundColor;
+    }
+}

package/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgePlugin.java

@@ -1,5 +1,6 @@
 package io.capawesome.capacitorjs.plugins.androidedgetoedgesupport;
 
+import android.graphics.Color;
 import androidx.annotation.Nullable;
 import com.getcapacitor.Plugin;
 import com.getcapacitor.PluginCall;
@@ -17,7 +18,8 @@ public class EdgeToEdgePlugin extends Plugin {
 
     @Override
     public void load() {
-        implementation = new EdgeToEdge(this);
+        EdgeToEdgeConfig config = getEdgeToEdgeConfig();
+        implementation = new EdgeToEdge(this, config);
     }
 
     @PluginMethod
@@ -30,4 +32,14 @@ public class EdgeToEdgePlugin extends Plugin {
         implementation.setBackgroundColor(color);
         call.resolve();
     }
+
+    private EdgeToEdgeConfig getEdgeToEdgeConfig() {
+        EdgeToEdgeConfig config = new EdgeToEdgeConfig();
+
+        String backgroundColor = getConfig().getString("backgroundColor");
+        if (backgroundColor != null) {
+            config.setBackgroundColor(Color.parseColor(backgroundColor));
+        }
+        return config;
+    }
 }

package/dist/docs.json

@@ -69,5 +69,29 @@
   ],
   "enums": [],
   "typeAliases": [],
-  "pluginConfigs": []
+  "pluginConfigs": [
+    {
+      "name": "EdgeToEdge",
+      "slug": "edgetoedge",
+      "properties": [
+        {
+          "name": "backgroundColor",
+          "tags": [
+            {
+              "text": "7.1.0",
+              "name": "since"
+            },
+            {
+              "text": "\"#ffffff\"",
+              "name": "example"
+            }
+          ],
+          "docs": "The hexadecimal color to set as the background color of the status bar and navigation bar.",
+          "complexTypes": [],
+          "type": "string | undefined"
+        }
+      ],
+      "docs": ""
+    }
+  ]
 }

package/dist/esm/definitions.d.ts

@@ -1,3 +1,16 @@
+declare module '@capacitor/cli' {
+    interface PluginsConfig {
+        EdgeToEdge?: {
+            /**
+             * The hexadecimal color to set as the background color of the status bar and navigation bar.
+             *
+             * @since 7.1.0
+             * @example "#ffffff"
+             */
+            backgroundColor?: string;
+        };
+    }
+}
 export interface EdgeToEdgePlugin {
     /**
      * Set the background color of the status bar and navigation bar.

package/dist/esm/definitions.js

@@ -1,2 +1,3 @@
+/// <reference types="@capacitor/cli" />
 export {};
 //# sourceMappingURL=definitions.js.map

package/dist/esm/definitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":"","sourcesContent":["export interface EdgeToEdgePlugin {\n  /**\n   * Set the background color of the status bar and navigation bar.\n   *\n   * Only available on Android.\n   *\n   * @since 7.0.0\n   */\n  setBackgroundColor(options: SetBackgroundColorOptions): Promise<void>;\n}\n\n/**\n * @since 7.0.0\n */\nexport interface SetBackgroundColorOptions {\n  /**\n   * The hexadecimal color to set as the background color of the status bar and navigation bar.\n   *\n   * @since 7.0.0\n   * @example \"#ffffff\"\n   * @example \"#000000\"\n   */\n  color: string;\n}\n"]}
+{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":"AAAA,wCAAwC","sourcesContent":["/// <reference types=\"@capacitor/cli\" />\n\ndeclare module '@capacitor/cli' {\n  export interface PluginsConfig {\n    EdgeToEdge?: {\n      /**\n       * The hexadecimal color to set as the background color of the status bar and navigation bar.\n       *\n       * @since 7.1.0\n       * @example \"#ffffff\"\n       */\n      backgroundColor?: string;\n    };\n  }\n}\n\nexport interface EdgeToEdgePlugin {\n  /**\n   * Set the background color of the status bar and navigation bar.\n   *\n   * Only available on Android.\n   *\n   * @since 7.0.0\n   */\n  setBackgroundColor(options: SetBackgroundColorOptions): Promise<void>;\n}\n\n/**\n * @since 7.0.0\n */\nexport interface SetBackgroundColorOptions {\n  /**\n   * The hexadecimal color to set as the background color of the status bar and navigation bar.\n   *\n   * @since 7.0.0\n   * @example \"#ffffff\"\n   * @example \"#000000\"\n   */\n  color: string;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capawesome/capacitor-android-edge-to-edge-support",
-  "version": "7.0.1",
+  "version": "7.1.1",
   "description": "Capacitor plugin to support edge-to-edge display on Android.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",