diff --git a/packages/android-edge-to-edge-support/README.md b/packages/android-edge-to-edge-support/README.md index 21b0b5f2..49ab39a3 100644 --- a/packages/android-edge-to-edge-support/README.md +++ b/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 -| Prop | Type | Description | Since | -| --------------------- | ------------------- | ------------------------------------------------------------------------------------------ | ----- | -| **`backgroundColor`** | string | The hexadecimal color to set as the background color of the status bar and navigation bar. | 7.1.0 | +| Prop | Type | Description | Since | +| ------------------------------ | ------------------- | ------------------------------------------------------------------------------------------ | ----- | +| **`backgroundColor`** | string | The hexadecimal color to set as the background color of the status bar and navigation bar. | 7.1.0 | +| **`statusBarBackgroundColor`** | string | 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) @@ -173,7 +177,26 @@ Only available on Android. setBackgroundColor(options: SetBackgroundColorOptions) => Promise ``` -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`** | SetBackgroundColorOptions | + +**Since:** 7.0.0 + +-------------------- + + +### setStatusBarBackgroundColor(...) + +```typescript +setStatusBarBackgroundColor(options: SetBackgroundColorOptions) => Promise +``` + +Set the background color of the status bar. Only available on Android. diff --git a/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdge.java b/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdge.java index e90c4545..af78d0fe 100644 --- a/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdge.java +++ b/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); + } + } } diff --git a/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgeConfig.java b/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgeConfig.java index 437b71d8..4d643026 100644 --- a/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgeConfig.java +++ b/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; + } } diff --git a/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgePlugin.java b/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgePlugin.java index 755f8beb..375feefd 100644 --- a/packages/android-edge-to-edge-support/android/src/main/java/io/capawesome/capacitorjs/plugins/androidedgetoedgesupport/EdgeToEdgePlugin.java +++ b/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); } diff --git a/packages/android-edge-to-edge-support/src/definitions.ts b/packages/android-edge-to-edge-support/src/definitions.ts index 6d855165..08a1bd7f 100644 --- a/packages/android-edge-to-edge-support/src/definitions.ts +++ b/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; /** - * 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; + /** + * Set the background color of the status bar. + * + * Only available on Android. + * + * @since 7.0.0 + */ + setStatusBarBackgroundColor(options: SetBackgroundColorOptions): Promise; } /**