Add platform-specific content to your Cordova project

  • Article

Tailor your app to specific platforms with images, functions, styles, and configuration files.

Add platform-specific visual assets

Add visual assets such as icons and splash screens for specific device resolutions and platforms to the res folder.

  • The res\icons\platform subfolder contains the app icons for each platform.

  • The res\screens\platform subfolder contains splash screens for each platform.

The file name of each resource provides some information about the asset. For example, the screen-ldpi-portrait.png file in the res\icons\screens\android folder represents a splash screen for a low-resolution screen (ldpi, or 426x320) for an Android device in portrait orientation.

For more information about icon assets, see Icons.

To work with splash screen assets, see the cordova-plugin-splashscreen plugin.

Android supports a scalable type of image called a NinePatch and you can use it as your splashscreen.

To use a NinePatch splashscreen image on Android:

  1. In the config.xml file, change <preference name="SplashScreen" value="screen" /> to <preference name="SplashScreen" value="splash" />

  2. Place the NinePatch image in the following location: res\native\android\res\drawable-nodpi\splash.9.png

    When you build your app, the image gets copied to the right output folder.

Add platform-specific content

You can include platform-specific HTML, CSS, and JavaScript files to the merges folder of your project. The files you add to this folder do one of two things. They add content to a platform-specific build of your app, or, they override non-platform-specific content that uses the same file name.

For more information about using the merges folder, see Using merges to customize each platform in the Apache Cordova documentation.

If you don’t see the merges folder of your project in Solution Explorer, open the shortcut menu for the project in Solution Explorer, choose Add, and then choose Add Platform Specific Code to add the folder.

Add platform-specific configuration files

You can use the res/native folder in your project to inject content into the native project that is generated by Cordova when you build your app. This can be useful when you need to configure your app to support something Cordova itself does not expose. (Plugins that you add to your project will also automatically modify the custom version of these configuration files.)

We recommend that you avoid adding platform-specific configuration files when possible.

The following table provides specific information for each platform.

Platform Notes
Android Place the custom AndroidManifest.xml file in the res/native/android folder to configure settings such as custom intents.

Use the generated version of the file in the platforms/android folder after building a Debug configuration of the project for Android.>
iOS Place a custom build-debug.xcconfig or build-release.xcconfig file in res/native/ios/cordova to override signing identities and other build settings for these configurations.

Place a custom Info.plist file in the res/native/ios/config.xml display name folder to override settings like splashscreens or icons.
The Info.plist filename must be renamed as follows: config.xml display name-Info.plist to update iOS framework keys. You can find a sample version of these and other files in the cordova-ios GitHub repository, or when using the remote agent under the ~/remote-builds/build number/cordovaApp folder on your Mac.
Windows Place the custom package.windows80.appxmanifest (Windows 8.0), package.windows.appxmanifest (Windows 8.1), or package.phone.appxmanifestfile (Windows Phone 8.1) in the res/native/windows folder to override various configuration settings.

Use the generated version of the file in the platforms/windows folder after building a Debug configuration of the project for Windows or Windows Phone (Universal).
Windows Phone 8 Place the custom WMAppManifest.xml file in the res/native/wp8/Properties folder. Use the generated version of the file in the platforms/wp8/Properties folder after building a Debug configuration of the project for Windows Phone 8.