@matiasfic/capacitor-android-edge-to-edge-support

@capawesome/capacitor-android-edge-to-edge-support

Capacitor plugin to support edge-to-edge display on Android with advanced features like setting the background color of the status bar and navigation bar.

Before	After	Before	After

Installation

npm install @capawesome/capacitor-android-edge-to-edge-support
npx cap sync

Android

If you are using the Capacitor Keyboard plugin, make sure to set the resizeOnFullScreen property to false (default) in your Capacitor Configuration file:

{
  "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.

Configuration

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

Examples

In capacitor.config.json:

{
  "plugins": {
    "EdgeToEdge": {
      "backgroundColor": "#ffffff"
    }
  }
}

In capacitor.config.ts:

/// <reference types="@matiasfic/capacitor-android-edge-to-edge-support" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    EdgeToEdge: {
      backgroundColor: "#ffffff",
    },
  },
};

export default 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 plugin.

import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
import { StatusBar, Style } from '@capacitor/status-bar';

const enable = async () => {
  await EdgeToEdge.enable();
};

const disable = async () => {
  await EdgeToEdge.disable();
};

const getInsets = async () => {
  const result = await EdgeToEdge.getInsets();
  console.log('Insets:', result);
};

const setBackgroundColor = async () => {
  await EdgeToEdge.setBackgroundColor({ color: '#ffffff' });
  await StatusBar.setStyle({ style: Style.Light });
};

API

• enable()
• disable()
• getInsets()
• setBackgroundColor(...)
• Interfaces

enable()

enable() => Promise<void>

Enable the edge-to-edge mode.

Only available on Android.

Since: 7.2.0

disable()

disable() => Promise<void>

Disable the edge-to-edge mode.

Only available on Android.

Since: 7.2.0

getInsets()

getInsets() => Promise<GetInsetsResult>

Return the insets that are currently applied to the webview.

Only available on Android.

Returns: Promise<GetInsetsResult>

Since: 7.2.0

setBackgroundColor(...)

setBackgroundColor(options: SetBackgroundColorOptions) => Promise<void>

Set the background color of the status bar and navigation bar.

Only available on Android.

Param	Type
options	SetBackgroundColorOptions

Since: 7.0.0

Interfaces

GetInsetsResult

Prop	Type	Description	Since
bottom	number	The bottom inset that was applied to the webview. Only available on Android.	7.2.0
left	number	The left inset that was applied to the webview. Only available on Android.	7.2.0
right	number	The right inset that was applied to the webview. Only available on Android.	7.2.0
top	number	The top inset that was applied to the webview. Only available on Android.	7.2.0

SetBackgroundColorOptions

Prop	Type	Description	Since
color	string	The hexadecimal color to set as the background color of the status bar and navigation bar.	7.0.0

Changelog

See CHANGELOG.md.

License

See LICENSE.