--- description: 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. title: Capacitor Android Edge-to-Edge Support Plugin for Android - Capawesome image: https://capawesome.io/docs/assets/images/social/plugins/android-edge-to-edge-support.png --- [ Skip to content](#capawesomecapacitor-android-edge-to-edge-support) [ 🎉 Introducing **Capawesome Platform** — one platform for Live Updates, Native Builds, App Store Publishing, and Insider SDKs.](https://capawesome.io) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ FAQ ](#faq) * [ Changelog ](#changelog) * [ License ](#license) * [ Android Foreground Service ](/docs/plugins/android-foreground-service/) * [ App Review ](/docs/plugins/app-review/) * [ App Shortcuts ](/docs/plugins/app-shortcuts/) * [ App Update ](/docs/plugins/app-update/) * [ Apple Sign-In ](/docs/plugins/apple-sign-in/) * [ Asset Manager ](/docs/plugins/asset-manager/) * [ Audio Player ](/docs/plugins/audio-player/) * [ Audio Recorder ](/docs/plugins/audio-recorder/) * [ Background Task ](/docs/plugins/background-task/) * [ Badge ](/docs/plugins/badge/) * [ Barometer ](/docs/plugins/barometer/) * [ Biometrics ](/docs/plugins/biometrics/) * [ Bluetooth Low Energy ](/docs/plugins/bluetooth-low-energy/) * [ Cloudinary ](/docs/plugins/cloudinary/) * [ Contacts ](/docs/plugins/contacts/) * [ Datetime Picker ](/docs/plugins/datetime-picker/) * [ File Compressor ](/docs/plugins/file-compressor/) * [ File Opener ](/docs/plugins/file-opener/) * [ File Picker ](/docs/plugins/file-picker/) * [ Firebase ](/docs/plugins/firebase/) * [ Formbricks ](/docs/plugins/formbricks/) * [ Geocoder ](/docs/plugins/geocoder/) * [ Google Sign-In ](/docs/plugins/google-sign-in/) * [ libSQL ](/docs/plugins/libsql/) * [ Live Update ](/docs/plugins/live-update/) * [ Managed Configurations ](/docs/plugins/managed-configurations/) * [ Media Session ](/docs/plugins/media-session/) * [ ML Kit ](/docs/plugins/mlkit/) * [ NFC ](/docs/plugins/nfc/) * [ OAuth ](/docs/plugins/oauth/) * [ Pedometer ](/docs/plugins/pedometer/) * [ Photo Editor ](/docs/plugins/photo-editor/) * [ PostHog ](/docs/plugins/posthog/) * [ Printer ](/docs/plugins/printer/) * [ Purchases ](/docs/plugins/purchases/) * [ RealtimeKit ](/docs/plugins/realtimekit/) * [ Screen Orientation ](/docs/plugins/screen-orientation/) * [ Screenshot ](/docs/plugins/screenshot/) * [ Secure Preferences ](/docs/plugins/secure-preferences/) * [ Speech Recognition ](/docs/plugins/speech-recognition/) * [ Speech Synthesis ](/docs/plugins/speech-synthesis/) * [ Share Target ](/docs/plugins/share-target/) * [ Square Mobile Payments ](/docs/plugins/square-mobile-payments/) * [ SQLite ](/docs/plugins/sqlite/) * [ Superwall ](/docs/plugins/superwall/) * [ Torch ](/docs/plugins/torch/) * [ Wifi ](/docs/plugins/wifi/) * [ Zip ](/docs/plugins/zip/) * [ Cloud ](/docs/cloud/) * [ Live Updates ](/docs/cloud/live-updates/) * Advanced * Integrations * [ Native Builds ](/docs/cloud/native-builds/) * [ Configuration ](/docs/cloud/native-builds/configuration/) * [ Environments ](/docs/cloud/native-builds/environments/) * Guides * [ Sample Projects ](/docs/cloud/native-builds/sample-projects/) * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ Automations ](/docs/cloud/automations/) * [ Assist ](/docs/cloud/assist/) * Account * Organizations * [ Organization and User Management ](/docs/cloud/organizations/memberships/) * [ Single Sign-On (SSO) ](/docs/cloud/organizations/sso/) * [ Teams ](/docs/cloud/organizations/teams/) * [ Two-Factor Authentication ](/docs/cloud/organizations/two-factor-authentication/) * [ Integrations ](/docs/cloud/integrations/) * [ License Keys ](/docs/cloud/license-keys/) * [ Webhooks ](/docs/cloud/webhooks/) * [ Pricing ](https://capawesome.io/pricing/) * [ FAQ ](/docs/cloud/faq/) * [ Support ](/docs/cloud/support/) * [ Contributing ](/docs/contributing/) * [ LLMs ](/docs/llms/) * [ Insiders ](/docs/insiders/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/insiders/support/) * [ FAQ ](/docs/insiders/faq/) * [ Blog ](/blog/) * Categories * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ FAQ ](#faq) * [ Changelog ](#changelog) * [ License ](#license) # @capawesome/capacitor-android-edge-to-edge-support[¶](#capawesomecapacitor-android-edge-to-edge-support "Permanent link") Capacitor plugin to support [edge-to-edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge) display on Android with advanced features like setting the background color of the status bar and navigation bar. [ ![Deliver Live Updates to your Capacitor app with Capawesome Cloud](../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) | Before | After | Before | After | | ------ | ----- | ------ | ----- | **Attention:** Despite its name, this plugin doesn't enable edge-to-edge mode by default. Instead, it preserves the traditional app behavior by applying proper insets to the webview, preventing Android's edge-to-edge changes from affecting apps that haven't been designed to support it. ## Newsletter[¶](#newsletter "Permanent link") Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/). ## Compatibility[¶](#compatibility "Permanent link") | Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 8.x.x | \>=8.x.x | Active support | | 7.x.x | 7.x.x | Deprecated | ## Installation[¶](#installation "Permanent link") You can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command: `[](#%5F%5Fcodelineno-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins ` Then use the following prompt: `` [](#%5F%5Fcodelineno-1-1) Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-android-edge-to-edge-support` plugin in my project. `` If you prefer **Manual Setup**, install the plugin by running the following commands and follow the platform-specific instructions below: `[](#%5F%5Fcodelineno-2-1)npm install @capawesome/capacitor-android-edge-to-edge-support [](#%5F%5Fcodelineno-2-2)npx cap sync ` ### Android[¶](#android "Permanent link") #### Capacitor SystemBars Plugin[¶](#capacitor-systembars-plugin "Permanent link") Make sure to disable the built-in insets handling of the [Capacitor SystemBars](https://capacitorjs.com/docs/apis/system-bars) plugin in your [Capacitor Configuration](https://capacitorjs.com/docs/config) file: `[](#%5F%5Fcodelineno-3-1){ [](#%5F%5Fcodelineno-3-2) "plugins": { [](#%5F%5Fcodelineno-3-3) "SystemBars": { [](#%5F%5Fcodelineno-3-4) "insetsHandling": "disable" [](#%5F%5Fcodelineno-3-5) } [](#%5F%5Fcodelineno-3-6) } [](#%5F%5Fcodelineno-3-7)} ` Please note that this plugin is part of the Capacitor core and the insets handling is **always enabled by default**. #### Capacitor Keyboard Plugin[¶](#capacitor-keyboard-plugin "Permanent link") 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](https://capacitorjs.com/docs/config) file: `[](#%5F%5Fcodelineno-4-1){ [](#%5F%5Fcodelineno-4-2) "plugins": { [](#%5F%5Fcodelineno-4-3) "Keyboard": { [](#%5F%5Fcodelineno-4-4) "resizeOnFullScreen": false [](#%5F%5Fcodelineno-4-5) } [](#%5F%5Fcodelineno-4-6) } [](#%5F%5Fcodelineno-4-7)} ` 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[¶](#configuration "Permanent link") | 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 | | **navigationBarColor** | string | The hexadecimal color to set as the background color of the navigation bar area. Only available on Android. | 8.0.0 | | **statusBarColor** | string | The hexadecimal color to set as the background color of the status bar area. Only available on Android. | 8.0.0 | ### Examples[¶](#examples "Permanent link") In `capacitor.config.json`: `[](#%5F%5Fcodelineno-5-1){ [](#%5F%5Fcodelineno-5-2) "plugins": { [](#%5F%5Fcodelineno-5-3) "EdgeToEdge": { [](#%5F%5Fcodelineno-5-4) "backgroundColor": "#ffffff", [](#%5F%5Fcodelineno-5-5) "navigationBarColor": "#000000", [](#%5F%5Fcodelineno-5-6) "statusBarColor": "#ffffff" [](#%5F%5Fcodelineno-5-7) } [](#%5F%5Fcodelineno-5-8) } [](#%5F%5Fcodelineno-5-9)} ` In `capacitor.config.ts`: `[](#%5F%5Fcodelineno-6-1)/// [](#%5F%5Fcodelineno-6-2) [](#%5F%5Fcodelineno-6-3)import { CapacitorConfig } from '@capacitor/cli'; [](#%5F%5Fcodelineno-6-4) [](#%5F%5Fcodelineno-6-5)const config: CapacitorConfig = { [](#%5F%5Fcodelineno-6-6) plugins: { [](#%5F%5Fcodelineno-6-7) EdgeToEdge: { [](#%5F%5Fcodelineno-6-8) backgroundColor: "#ffffff", [](#%5F%5Fcodelineno-6-9) navigationBarColor: "#000000", [](#%5F%5Fcodelineno-6-10) statusBarColor: "#ffffff", [](#%5F%5Fcodelineno-6-11) }, [](#%5F%5Fcodelineno-6-12) }, [](#%5F%5Fcodelineno-6-13)}; [](#%5F%5Fcodelineno-6-14) [](#%5F%5Fcodelineno-6-15)export default config; ` ## Usage[¶](#usage "Permanent link") 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 [SystemBars](https://capacitorjs.com/docs/apis/system-bars) plugin. `[](#%5F%5Fcodelineno-7-1)import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support'; [](#%5F%5Fcodelineno-7-2)import { SystemBars, SystemBarsStyle } from '@capacitor/core'; [](#%5F%5Fcodelineno-7-3) [](#%5F%5Fcodelineno-7-4)const enable = async () => { [](#%5F%5Fcodelineno-7-5) await EdgeToEdge.enable(); [](#%5F%5Fcodelineno-7-6)}; [](#%5F%5Fcodelineno-7-7) [](#%5F%5Fcodelineno-7-8)const disable = async () => { [](#%5F%5Fcodelineno-7-9) await EdgeToEdge.disable(); [](#%5F%5Fcodelineno-7-10)}; [](#%5F%5Fcodelineno-7-11) [](#%5F%5Fcodelineno-7-12)const getInsets = async () => { [](#%5F%5Fcodelineno-7-13) const result = await EdgeToEdge.getInsets(); [](#%5F%5Fcodelineno-7-14) console.log('Insets:', result); [](#%5F%5Fcodelineno-7-15)}; [](#%5F%5Fcodelineno-7-16) [](#%5F%5Fcodelineno-7-17)const setDarkStyle = async () => { [](#%5F%5Fcodelineno-7-18) await SystemBars.setStyle({ style: SystemBarsStyle.Dark }); [](#%5F%5Fcodelineno-7-19) await EdgeToEdge.setBackgroundColor({ color: '#000000' }); [](#%5F%5Fcodelineno-7-20)}; [](#%5F%5Fcodelineno-7-21) [](#%5F%5Fcodelineno-7-22)const setLightStyle = async () => { [](#%5F%5Fcodelineno-7-23) await SystemBars.setStyle({ style: SystemBarsStyle.Light }); [](#%5F%5Fcodelineno-7-24) await EdgeToEdge.setBackgroundColor({ color: '#FFFFFF' }); [](#%5F%5Fcodelineno-7-25)}; ` ## API[¶](#api "Permanent link") * [disable()](#disable) * [enable()](#enable) * [getInsets()](#getinsets) * [setBackgroundColor(...)](#setbackgroundcolor) * [setNavigationBarColor(...)](#setnavigationbarcolor) * [setStatusBarColor(...)](#setstatusbarcolor) * [Interfaces](#interfaces) ### disable()[¶](#disable "Permanent link") `[](#%5F%5Fcodelineno-8-1)disable() => Promise ` Disable the edge-to-edge mode. Only available on Android. **Since:** 7.2.0 --- ### enable()[¶](#enable "Permanent link") `[](#%5F%5Fcodelineno-9-1)enable() => Promise ` Enable the edge-to-edge mode. Only available on Android. **Since:** 7.2.0 --- ### getInsets()[¶](#getinsets "Permanent link") `[](#%5F%5Fcodelineno-10-1)getInsets() => Promise ` Return the insets that are currently applied to the webview. Only available on Android. **Returns:** `Promise<[GetInsetsResult](#getinsetsresult)>` **Since:** 7.2.0 --- ### setBackgroundColor(...)[¶](#setbackgroundcolor "Permanent link") `[](#%5F%5Fcodelineno-11-1)setBackgroundColor(options: SetBackgroundColorOptions) => Promise ` Set the background color of the status bar and navigation bar. Only available on Android. | Param | Type | | ----------- | ------------------------------------------------------- | | **options** | [SetBackgroundColorOptions](#setbackgroundcoloroptions) | **Since:** 7.0.0 --- ### setNavigationBarColor(...)[¶](#setnavigationbarcolor "Permanent link") `[](#%5F%5Fcodelineno-12-1)setNavigationBarColor(options: SetNavigationBarColorOptions) => Promise ` Set the background color of the navigation bar area. Only available on Android. | Param | Type | | ----------- | ------------------------------------------------------------- | | **options** | [SetNavigationBarColorOptions](#setnavigationbarcoloroptions) | **Since:** 8.0.0 --- ### setStatusBarColor(...)[¶](#setstatusbarcolor "Permanent link") `[](#%5F%5Fcodelineno-13-1)setStatusBarColor(options: SetStatusBarColorOptions) => Promise ` Set the background color of the status bar area. Only available on Android. | Param | Type | | ----------- | ----------------------------------------------------- | | **options** | [SetStatusBarColorOptions](#setstatusbarcoloroptions) | **Since:** 8.0.0 --- ### Interfaces[¶](#interfaces "Permanent link") #### GetInsetsResult[¶](#getinsetsresult "Permanent link") | 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[¶](#setbackgroundcoloroptions "Permanent link") | 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 | #### SetNavigationBarColorOptions[¶](#setnavigationbarcoloroptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | -------------------------------------------------------------------------------- | ----- | | **color** | string | The hexadecimal color to set as the background color of the navigation bar area. | 8.0.0 | #### SetStatusBarColorOptions[¶](#setstatusbarcoloroptions "Permanent link") | Prop | Type | Description | Since | | --------- | ------ | ---------------------------------------------------------------------------- | ----- | | **color** | string | The hexadecimal color to set as the background color of the status bar area. | 8.0.0 | ## FAQ[¶](#faq "Permanent link") ### What about Capacitor 8's built-in edge-to-edge support?[¶](#what-about-capacitor-8s-built-in-edge-to-edge-support "Permanent link") Capacitor 8 introduced native edge-to-edge functionality through the internal `SystemBars` plugin. While this covers many common scenarios, this plugin addresses additional edge cases that aren't yet fully resolved in the Capacitor core implementation. We plan to deprecate this plugin once all edge cases are properly handled in Capacitor core. ### Is this plugin compatible with Capacitor's SystemBars API?[¶](#is-this-plugin-compatible-with-capacitors-systembars-api "Permanent link") Yes, this plugin is partially compatible with the new [SystemBars API](https://capacitorjs.com/docs/apis/system-bars) introduced in Capacitor 8\. For example, methods like `setStyle()` from the SystemBars API are supported and can be used alongside this plugin without conflicts. ## Changelog[¶](#changelog "Permanent link") See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/android-edge-to-edge-support/CHANGELOG.md). ## License[¶](#license "Permanent link") See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/android-edge-to-edge-support/LICENSE). May 17, 2026 Back to top