feat: Android Edge-to-Edge styling options (#440)

* feat(android): plugin configs

Define and implement plugin configs.

* feat(android): plugin configs

Remove extra example.

* feat(android): plugin configs

Generate changeset.

* feat(android): plugin configs

Run fmt script.

* feat(android): plugin configs

Move plugin config initialization and add docs to readme.

Author: ebarooni

.changeset/quick-days-count.md

@@ -0,0 +1,5 @@
+---
+'@capawesome/capacitor-android-edge-to-edge-support': minor
+---
+
+feat: support styling options with plugin configs 

packages/android-edge-to-edge-support/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.

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

@@ -11,10 +11,14 @@
 
 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,7 +43,7 @@ private void applyInsets() {
         // 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());

packages/android-edge-to-edge-support/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;
+    }
+}

packages/android-edge-to-edge-support/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 void setBackgroundColor(PluginCall call) {
         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;
+    }
 }

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

@@ -1,3 +1,19 @@
+/// <reference types="@capacitor/cli" />
+
+declare module '@capacitor/cli' {
+  export 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.