![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
Capacitor plugin to support edge-to-edge display on Android.
| Before | After | Before | After |
|---|---|---|---|
 |
 |
 |
 |
npm install @capawesome/capacitor-android-edge-to-edge-support
npx cap sync| 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 |
In capacitor.config.json:
{
"plugins": {
"EdgeToEdge": {
"backgroundColor": "#ffffff"
}
}
}In capacitor.config.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;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 setBackgroundColor = async () => {
await EdgeToEdge.setBackgroundColor({ color: '#ffffff' });
await StatusBar.setStyle({ style: Style.Light });
};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
| 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 |
See CHANGELOG.md.
See LICENSE.