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

package/README.md

@@ -13,6 +13,22 @@ npm install @capawesome/capacitor-android-edge-to-edge-support
 npx cap sync
 ```
 
+### Android
+
+If you are using the [Capacitor Keyboard](https://capacitorjs.com/docs/apis/keyboard) plugin, make sure to set the `resizeOnFullScreen` property to `false` (default) in your Capacitor Configuration file:
+
+```json
+{
+  "plugins": {
+    "Keyboard": {
+      "resizeOnFullScreen": false
+    }
+  }
+}
+```
+
+Otherwise, the web view will be resized to fit the screen, which may cause issues with this plugin, see [this comment](https://github.com/capawesome-team/capacitor-plugins/issues/490#issuecomment-2826435796).
+
 ## Configuration
 
 <docgen-config>
@@ -74,6 +90,9 @@ const setBackgroundColor = async () => {
 
 <docgen-index>
 
+* [`enable()`](#enable)
+* [`disable()`](#disable)
+* [`getInsets()`](#getinsets)
 * [`setBackgroundColor(...)`](#setbackgroundcolor)
 * [Interfaces](#interfaces)
 
@@ -82,6 +101,53 @@ const setBackgroundColor = async () => {
 <docgen-api>
 <!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
 
+### enable()
+
+```typescript
+enable() => Promise<void>
+```
+
+Enable the edge-to-edge mode.
+
+Only available on Android.
+
+**Since:** 7.2.0
+
+--------------------
+
+
+### disable()
+
+```typescript
+disable() => Promise<void>
+```
+
+Disable the edge-to-edge mode.
+
+Only available on Android.
+
+**Since:** 7.2.0
+
+--------------------
+
+
+### getInsets()
+
+```typescript
+getInsets() => Promise<GetInsetsResult>
+```
+
+Return the insets that are currently applied to the webview.
+
+Only available on Android.
+
+**Returns:** <code>Promise&lt;<a href="#getinsetsresult">GetInsetsResult</a>&gt;</code>
+
+**Since:** 7.2.0
+
+--------------------
+
+
 ### setBackgroundColor(...)
 
 ```typescript
@@ -104,6 +170,16 @@ Only available on Android.
 ### Interfaces
 
 
+#### GetInsetsResult
+
+| Prop         | Type                | Description                                                                  | Since |
+| ------------ | ------------------- | ---------------------------------------------------------------------------- | ----- |
+| **`bottom`** | <code>number</code> | The bottom inset that was applied to the webview. Only available on Android. | 7.2.0 |
+| **`left`**   | <code>number</code> | The left inset that was applied to the webview. Only available on Android.   | 7.2.0 |
+| **`right`**  | <code>number</code> | The right inset that was applied to the webview. Only available on Android.  | 7.2.0 |
+| **`top`**    | <code>number</code> | The top inset that was applied to the webview. Only available on Android.    | 7.2.0 |
+
+
 #### SetBackgroundColorOptions
 
 | Prop        | Type                | Description                                                                                | Since |

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

@@ -8,6 +8,7 @@ import androidx.annotation.NonNull;
 import androidx.core.graphics.Insets;
 import androidx.core.view.ViewCompat;
 import androidx.core.view.WindowInsetsCompat;
+import com.getcapacitor.Logger;
 
 public class EdgeToEdge {
 
@@ -21,30 +22,48 @@ public class EdgeToEdge {
         this.config = config;
         this.plugin = plugin;
         // Apply insets to disable the edge-to-edge feature
+        setBackgroundColor(config.getBackgroundColor());
         applyInsets();
     }
 
-    public void setBackgroundColor(String color) {
+    public void enable() {
+        applyInsets();
+    }
+
+    public void disable() {
+        removeInsets();
+    }
+
+    public ViewGroup.MarginLayoutParams getInsets() {
         View view = plugin.getBridge().getWebView();
-        if (view == null) {
-            return;
-        }
-        // Get parent view
-        ViewGroup parent = (ViewGroup) view.getParent();
-        // Set background color to black
-        parent.setBackgroundColor(Color.parseColor(color));
+        return (ViewGroup.MarginLayoutParams) view.getLayoutParams();
+    }
+
+    public void setBackgroundColor(String color) {
+        setBackgroundColor(Color.parseColor(color));
     }
 
     private void applyInsets() {
         View view = plugin.getBridge().getWebView();
-        if (view == null) {
-            return;
-        }
         // Get parent view
         ViewGroup parent = (ViewGroup) view.getParent();
-        // Set background color to black
-        parent.setBackgroundColor(this.config.getBackgroundColor());
-        // Apply insets to disable the edge-to-edge feature
+        // Set insets
+        WindowInsetsCompat currentInsets = ViewCompat.getRootWindowInsets(view);
+        if (currentInsets != null) {
+            Insets systemBarsInsets = currentInsets.getInsets(WindowInsetsCompat.Type.systemBars());
+            Insets imeInsets = currentInsets.getInsets(WindowInsetsCompat.Type.ime());
+            boolean keyboardVisible = currentInsets.isVisible(WindowInsetsCompat.Type.ime());
+
+            ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
+
+            mlp.bottomMargin = keyboardVisible ? imeInsets.bottom : systemBarsInsets.bottom;
+            mlp.topMargin = systemBarsInsets.top;
+            mlp.leftMargin = systemBarsInsets.left;
+            mlp.rightMargin = systemBarsInsets.right;
+
+            view.setLayoutParams(mlp);
+        }
+        // Set listener
         ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
             // Retrieve system bars insets (for status/navigation bars)
             Insets systemBarsInsets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
@@ -67,4 +86,27 @@ public class EdgeToEdge {
             return WindowInsetsCompat.CONSUMED;
         });
     }
+
+    private void removeInsets() {
+        View view = plugin.getBridge().getWebView();
+        // Get parent view
+        ViewGroup parent = (ViewGroup) view.getParent();
+        // Reset insets
+        ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
+        mlp.topMargin = 0;
+        mlp.leftMargin = 0;
+        mlp.rightMargin = 0;
+        mlp.bottomMargin = 0;
+        view.setLayoutParams(mlp);
+        // 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);
+    }
 }

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

@@ -1,7 +1,9 @@
 package io.capawesome.capacitorjs.plugins.androidedgetoedgesupport;
 
 import android.graphics.Color;
+import android.view.ViewGroup;
 import androidx.annotation.Nullable;
+import com.getcapacitor.JSObject;
 import com.getcapacitor.Plugin;
 import com.getcapacitor.PluginCall;
 import com.getcapacitor.PluginMethod;
@@ -13,7 +15,6 @@ public class EdgeToEdgePlugin extends Plugin {
     private static final String ERROR_COLOR_MISSING = "color must be provided.";
     private static final String TAG = "EdgeToEdge";
 
-    @Nullable
     private EdgeToEdge implementation;
 
     @Override
@@ -22,6 +23,35 @@ public class EdgeToEdgePlugin extends Plugin {
         implementation = new EdgeToEdge(this, config);
     }
 
+    @PluginMethod
+    public void enable(PluginCall call) {
+        getActivity()
+            .runOnUiThread(() -> {
+                implementation.enable();
+                call.resolve();
+            });
+    }
+
+    @PluginMethod
+    public void disable(PluginCall call) {
+        getActivity()
+            .runOnUiThread(() -> {
+                implementation.disable();
+                call.resolve();
+            });
+    }
+
+    @PluginMethod
+    public void getInsets(PluginCall call) {
+        ViewGroup.MarginLayoutParams insets = implementation.getInsets();
+        JSObject result = new JSObject();
+        result.put("bottom", insets.bottomMargin);
+        result.put("left", insets.leftMargin);
+        result.put("right", insets.rightMargin);
+        result.put("top", insets.topMargin);
+        call.resolve(result);
+    }
+
     @PluginMethod
     public void setBackgroundColor(PluginCall call) {
         String color = call.getString("color");

package/dist/docs.json

@@ -5,6 +5,53 @@
     "docs": "",
     "tags": [],
     "methods": [
+      {
+        "name": "enable",
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "returns": "Promise<void>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.2.0"
+          }
+        ],
+        "docs": "Enable the edge-to-edge mode.\n\nOnly available on Android.",
+        "complexTypes": [],
+        "slug": "enable"
+      },
+      {
+        "name": "disable",
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "returns": "Promise<void>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.2.0"
+          }
+        ],
+        "docs": "Disable the edge-to-edge mode.\n\nOnly available on Android.",
+        "complexTypes": [],
+        "slug": "disable"
+      },
+      {
+        "name": "getInsets",
+        "signature": "() => Promise<GetInsetsResult>",
+        "parameters": [],
+        "returns": "Promise<GetInsetsResult>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "7.2.0"
+          }
+        ],
+        "docs": "Return the insets that are currently applied to the webview.\n\nOnly available on Android.",
+        "complexTypes": [
+          "GetInsetsResult"
+        ],
+        "slug": "getinsets"
+      },
       {
         "name": "setBackgroundColor",
         "signature": "(options: SetBackgroundColorOptions) => Promise<void>",
@@ -32,6 +79,68 @@
     "properties": []
   },
   "interfaces": [
+    {
+      "name": "GetInsetsResult",
+      "slug": "getinsetsresult",
+      "docs": "",
+      "tags": [
+        {
+          "text": "7.2.0",
+          "name": "since"
+        }
+      ],
+      "methods": [],
+      "properties": [
+        {
+          "name": "bottom",
+          "tags": [
+            {
+              "text": "7.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The bottom inset that was applied to the webview.\n\nOnly available on Android.",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "left",
+          "tags": [
+            {
+              "text": "7.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The left inset that was applied to the webview.\n\nOnly available on Android.",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "right",
+          "tags": [
+            {
+              "text": "7.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The right inset that was applied to the webview.\n\nOnly available on Android.",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "top",
+          "tags": [
+            {
+              "text": "7.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The top inset that was applied to the webview.\n\nOnly available on Android.",
+          "complexTypes": [],
+          "type": "number"
+        }
+      ]
+    },
     {
       "name": "SetBackgroundColorOptions",
       "slug": "setbackgroundcoloroptions",

package/dist/esm/definitions.d.ts

@@ -12,6 +12,30 @@ declare module '@capacitor/cli' {
     }
 }
 export interface EdgeToEdgePlugin {
+    /**
+     * Enable the edge-to-edge mode.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    enable(): Promise<void>;
+    /**
+     * Disable the edge-to-edge mode.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    disable(): Promise<void>;
+    /**
+     * Return the insets that are currently applied to the webview.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    getInsets(): Promise<GetInsetsResult>;
     /**
      * Set the background color of the status bar and navigation bar.
      *
@@ -21,6 +45,43 @@ export interface EdgeToEdgePlugin {
      */
     setBackgroundColor(options: SetBackgroundColorOptions): Promise<void>;
 }
+/**
+ * @since 7.2.0
+ */
+export interface GetInsetsResult {
+    /**
+     * The bottom inset that was applied to the webview.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    bottom: number;
+    /**
+     * The left inset that was applied to the webview.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    left: number;
+    /**
+     * The right inset that was applied to the webview.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    right: number;
+    /**
+     * The top inset that was applied to the webview.
+     *
+     * Only available on Android.
+     *
+     * @since 7.2.0
+     */
+    top: number;
+}
 /**
  * @since 7.0.0
  */

package/dist/esm/definitions.js.map

@@ -1 +1 @@
-{"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"]}
+{"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   * Enable the edge-to-edge mode.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  enable(): Promise<void>;\n  /**\n   * Disable the edge-to-edge mode.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  disable(): Promise<void>;\n  /**\n   * Return the insets that are currently applied to the webview.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  getInsets(): Promise<GetInsetsResult>;\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.2.0\n */\nexport interface GetInsetsResult {\n  /**\n   * The bottom inset that was applied to the webview.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  bottom: number;\n  /**\n   * The left inset that was applied to the webview.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  left: number;\n  /**\n   * The right inset that was applied to the webview.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  right: number;\n  /**\n   * The top inset that was applied to the webview.\n   *\n   * Only available on Android.\n   *\n   * @since 7.2.0\n   */\n  top: number;\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.1.1",
+  "version": "7.2.0",
   "description": "Capacitor plugin to support edge-to-edge display on Android.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",