--- 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/sdks/capacitor/android-edge-to-edge-support.png --- [Skip to content ](#capacitor-android-edge-to-edge-support-plugin) [πŸ” Introducing the **Capacitor Vault** plugin β€” store secrets behind biometrics or a device passcode. ](/blog/announcing-the-capacitor-vault-plugin/) * [ SDKs ](/docs/sdks/) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) * [ Android Foreground Service ](/docs/sdks/capacitor/android-foreground-service/) * [ Android Intent Launcher ](/docs/sdks/capacitor/android-intent-launcher/) * [ Android SMS Retriever ](/docs/sdks/capacitor/android-sms-retriever/) * [ App Icon ](/docs/sdks/capacitor/app-icon/) * [ App Integrity ](/docs/sdks/capacitor/app-integrity/) * [ App Language ](/docs/sdks/capacitor/app-language/) * [ App Launcher ](/docs/sdks/capacitor/app-launcher/) * [ App Review ](/docs/sdks/capacitor/app-review/) * [ App Shortcuts ](/docs/sdks/capacitor/app-shortcuts/) * [ App Tracking Transparency ](/docs/sdks/capacitor/app-tracking-transparency/) * [ App Update ](/docs/sdks/capacitor/app-update/) * [ Apple Sign-In ](/docs/sdks/capacitor/apple-sign-in/) * [ Asset Manager ](/docs/sdks/capacitor/asset-manager/) * [ Audio Player ](/docs/sdks/capacitor/audio-player/) * [ Audio Recorder ](/docs/sdks/capacitor/audio-recorder/) * [ Audio Session ](/docs/sdks/capacitor/audio-session/) * [ Background Task ](/docs/sdks/capacitor/background-task/) * [ Badge ](/docs/sdks/capacitor/badge/) * [ Barometer ](/docs/sdks/capacitor/barometer/) * [ Battery ](/docs/sdks/capacitor/battery/) * [ Biometrics ](/docs/sdks/capacitor/biometrics/) * [ Bluetooth Low Energy ](/docs/sdks/capacitor/bluetooth-low-energy/) * [ Clipboard ](/docs/sdks/capacitor/clipboard/) * [ Cloudinary ](/docs/sdks/capacitor/cloudinary/) * [ Compass ](/docs/sdks/capacitor/compass/) * [ Contacts ](/docs/sdks/capacitor/contacts/) * [ Datetime Picker ](/docs/sdks/capacitor/datetime-picker/) * [ Device Info ](/docs/sdks/capacitor/device-info/) * [ Dialog ](/docs/sdks/capacitor/dialog/) * [ Exif ](/docs/sdks/capacitor/exif/) * [ Facebook Sign-In ](/docs/sdks/capacitor/facebook-sign-in/) * [ File Compressor ](/docs/sdks/capacitor/file-compressor/) * [ File Opener ](/docs/sdks/capacitor/file-opener/) * [ File Picker ](/docs/sdks/capacitor/file-picker/) * [ Firebase ](/docs/sdks/capacitor/firebase/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * [ Haptics ](/docs/sdks/capacitor/haptics/) * [ Home Indicator ](/docs/sdks/capacitor/home-indicator/) * [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Light Sensor ](/docs/sdks/capacitor/light-sensor/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ Network ](/docs/sdks/capacitor/network/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/) * [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Permissions ](/docs/sdks/capacitor/permissions/) * [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screen Reader ](/docs/sdks/capacitor/screen-reader/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ System WebView ](/docs/sdks/capacitor/system-webview/) * [ Text Interaction ](/docs/sdks/capacitor/text-interaction/) * [ Text Zoom ](/docs/sdks/capacitor/text-zoom/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Toast ](/docs/sdks/capacitor/toast/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ FAQ ](#faq) * [ Related Plugins ](#related-plugins) * [ Newsletter ](#newsletter) * [ Changelog ](#changelog) * [ License ](#license) # Capacitor Android Edge-to-Edge Support Plugin[ΒΆ](#capacitor-android-edge-to-edge-support-plugin "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. ## Use Cases[ΒΆ](#use-cases "Permanent link") The Android Edge-to-Edge Support plugin is typically used whenever an app needs to deal with Android's edge-to-edge display behavior, for example: * **Preserving traditional layouts**: Prevent Android's edge-to-edge changes from affecting apps that haven't been designed to support it by applying proper insets to the web view. * **Styling the system bars**: Set the background color of the status bar and navigation bar so they match your app's design. * **Switching between light and dark themes**: Update the system bar background colors together with the [SystemBars](https://capacitorjs.com/docs/apis/system-bars) plugin when the user changes the theme. * **Custom inset handling**: Read the insets that are currently applied to the web view to fine-tune your own layout. ## 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 applies insets to the web view automatically once installed; the following examples show how to enable or disable the edge-to-edge mode, read the applied insets, and set the system bar colors for light and dark themes. ### Enable or disable the edge-to-edge mode[ΒΆ](#enable-or-disable-the-edge-to-edge-mode "Permanent link") Enable or disable the edge-to-edge mode at runtime. Only available on Android: `[](#%5F%5Fcodelineno-7-1)import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support'; [](#%5F%5Fcodelineno-7-2) [](#%5F%5Fcodelineno-7-3)const enable = async () => { [](#%5F%5Fcodelineno-7-4) await EdgeToEdge.enable(); [](#%5F%5Fcodelineno-7-5)}; [](#%5F%5Fcodelineno-7-6) [](#%5F%5Fcodelineno-7-7)const disable = async () => { [](#%5F%5Fcodelineno-7-8) await EdgeToEdge.disable(); [](#%5F%5Fcodelineno-7-9)}; ` ### Get the applied insets[ΒΆ](#get-the-applied-insets "Permanent link") Read the insets that are currently applied to the web view, for example to fine-tune your own layout. Only available on Android: `[](#%5F%5Fcodelineno-8-1)import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support'; [](#%5F%5Fcodelineno-8-2) [](#%5F%5Fcodelineno-8-3)const getInsets = async () => { [](#%5F%5Fcodelineno-8-4) const result = await EdgeToEdge.getInsets(); [](#%5F%5Fcodelineno-8-5) console.log('Insets:', result); [](#%5F%5Fcodelineno-8-6)}; ` ### Set the system bar colors for light and dark themes[ΒΆ](#set-the-system-bar-colors-for-light-and-dark-themes "Permanent link") Set the background color of the status bar and navigation bar, for example when the user switches between a light and a dark theme. It's recommended to combine this with the `setStyle(...)` method of the [SystemBars](https://capacitorjs.com/docs/apis/system-bars) plugin so the system bar icons remain readable: `[](#%5F%5Fcodelineno-9-1)import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support'; [](#%5F%5Fcodelineno-9-2)import { SystemBars, SystemBarsStyle } from '@capacitor/core'; [](#%5F%5Fcodelineno-9-3) [](#%5F%5Fcodelineno-9-4)const setDarkStyle = async () => { [](#%5F%5Fcodelineno-9-5) await SystemBars.setStyle({ style: SystemBarsStyle.Dark }); [](#%5F%5Fcodelineno-9-6) await EdgeToEdge.setBackgroundColor({ color: '#000000' }); [](#%5F%5Fcodelineno-9-7)}; [](#%5F%5Fcodelineno-9-8) [](#%5F%5Fcodelineno-9-9)const setLightStyle = async () => { [](#%5F%5Fcodelineno-9-10) await SystemBars.setStyle({ style: SystemBarsStyle.Light }); [](#%5F%5Fcodelineno-9-11) await EdgeToEdge.setBackgroundColor({ color: '#FFFFFF' }); [](#%5F%5Fcodelineno-9-12)}; ` ## API[ΒΆ](#api "Permanent link") * [disable()](#disable) * [enable()](#enable) * [getInsets()](#getinsets) * [setBackgroundColor(...)](#setbackgroundcolor) * [setNavigationBarColor(...)](#setnavigationbarcolor) * [setStatusBarColor(...)](#setstatusbarcolor) * [Interfaces](#interfaces) ### disable()[ΒΆ](#disable "Permanent link") `[](#%5F%5Fcodelineno-10-1)disable() => Promise ` Disable the edge-to-edge mode. Only available on Android. **Since:** 7.2.0 --- ### enable()[ΒΆ](#enable "Permanent link") `[](#%5F%5Fcodelineno-11-1)enable() => Promise ` Enable the edge-to-edge mode. Only available on Android. **Since:** 7.2.0 --- ### getInsets()[ΒΆ](#getinsets "Permanent link") `[](#%5F%5Fcodelineno-12-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-13-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-14-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-15-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. ### Does this plugin enable edge-to-edge mode by default?[ΒΆ](#does-this-plugin-enable-edge-to-edge-mode-by-default "Permanent link") No, 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 web view, preventing Android's edge-to-edge changes from affecting apps that haven't been designed to support it. You can still enable or disable the edge-to-edge mode at runtime using the `enable()` and `disable()` methods. ### Why does my layout break when the keyboard is displayed?[ΒΆ](#why-does-my-layout-break-when-the-keyboard-is-displayed "Permanent link") If you are using the [Capacitor Keyboard](https://capacitorjs.com/docs/apis/keyboard) plugin, make sure the `resizeOnFullScreen` property is set to `false` (the default) in your Capacitor configuration file. Otherwise, the web view will be resized to fit the screen, which may cause issues with this plugin. See the [Installation](#installation) section for more information. ### Does this plugin work on iOS or Web?[ΒΆ](#does-this-plugin-work-on-ios-or-web "Permanent link") No, this plugin only provides an Android implementation, as the name suggests. All methods are only available on Android since it addresses Android's edge-to-edge display behavior. ## Related Plugins[ΒΆ](#related-plugins "Permanent link") * [Android Dark Mode Support](https://capawesome.io/docs/sdks/capacitor/android-dark-mode-support/): Support dark mode on Android via the `prefers-color-scheme` CSS media feature. * [Navigation Bar](https://capawesome.io/docs/sdks/capacitor/navigation-bar/): Set the background color and button style of the navigation bar. * [Home Indicator](https://capawesome.io/docs/sdks/capacitor/home-indicator/): Hide and show the iOS home indicator. ## 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/). ## 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). July 8, 2026 Back to top ```json {"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/#article", "headline": "Capacitor Android Edge-to-Edge Support Plugin for Android", "name": "Capacitor Android Edge-to-Edge Support Plugin for Android", "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.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/#software", "name": "Capacitor Android Edge-to-Edge Support Plugin for Android", "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.", "url": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]} {"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "What about Capacitor 8's built-in edge-to-edge support?", "acceptedAnswer": {"@type": "Answer", "text": "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."}}, {"@type": "Question", "name": "Is this plugin compatible with Capacitor's SystemBars API?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, this plugin is partially compatible with the new SystemBars API introduced in Capacitor 8. For example, methods like setStyle() from the SystemBars API are supported and can be used alongside this plugin without conflicts."}}, {"@type": "Question", "name": "Does this plugin enable edge-to-edge mode by default?", "acceptedAnswer": {"@type": "Answer", "text": "No, 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 web view, preventing Android's edge-to-edge changes from affecting apps that haven't been designed to support it. You can still enable or disable the edge-to-edge mode at runtime using the enable() and disable() methods."}}, {"@type": "Question", "name": "Why does my layout break when the keyboard is displayed?", "acceptedAnswer": {"@type": "Answer", "text": "If you are using the Capacitor Keyboard plugin, make sure the resizeOnFullScreen property is set to false (the default) in your Capacitor configuration file. Otherwise, the web view will be resized to fit the screen, which may cause issues with this plugin. See the Installation section for more information."}}, {"@type": "Question", "name": "Does this plugin work on iOS or Web?", "acceptedAnswer": {"@type": "Answer", "text": "No, this plugin only provides an Android implementation, as the name suggests. All methods are only available on Android since it addresses Android's edge-to-edge display behavior."}}], "url": "https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/"} ```