Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 `config.xml` and Device Preferences

In this lesson, you'll learn about the config.xml file and how it is used to configure the app. You will also learn how these settings affect the build process for your app.

2.1 `config.xml` and Device Preferences

Hello everyone, this is Reggie Dawson. Welcome to the Publish an App With Cordova course for Tuts+. Building our app in preparation of submitting to an app store is probably the easiest process of the Cordova workflow. It literally takes one command to build the app. The most important part of building our app is making sure that the config.xml file is configured properly. The config.xml file controls the entire look and feel of the app. It contains global, multi-platform and platform-specific preferences. It is important that before you build your app you understand everything that you could accomplish with this file. Let's look at the config.xml file for the project we're about to build. In the companion course to this one, building an app with Cordova, we created the app I will use in this course. This app is an Android app, but we can easily add support for iOS if necessary. Now if you went through the companion course, there may be some repeated information about the config.xml file. But there are also some other details I didn't have the opportunity to go over in the companion course. First, we have the widget element that wraps the entire file. This contains our reverse domain identifier and the version of our app. Then we have our app name that will appear in our home screen and in the app store. There is also a description and author element that specifies a description and contact info that may appear in the app store listing. Then we have the content element that specifies the start page of the app, index.html. Next we have our preference and platform elements. These are related to the SplashScreen plugin. This displays and controls the time the SplashScreen displays. This plugin applies to all platforms. And speaking of platforms, the platform element specifies preferences that will be used for a single platform. For example, in this file, we have specific settings for the Android SplashScreen. This will copy these preferences to the platform's config.xml file. When we prepare our app to build, config.xml files are created for each platform added to the project. We will talk more about individual platform preferences in the next two videos. Next we will take a look at some other preferences that may not have been added to this file but I would like you to know about nonetheless. First, we have our global preference, Fullscreen. If we set this preference in our config.xml file, the app will hide the status bar, making the app take up the fullscreen of the device. The default value of this preference is false. And that is pretty much all the global preferences. Next, we have multi-platform preferences. First, the DisallowOverscroll preference defaults the false and controls whether or not you want the interface to display feedback when you scroll past the end of content. This applies to Android and iOS and behaves differently on each platform. On iOS content it will return to it's original position, while Android has a glowing effect that appears. Then we have our BackgroundColor preference. This preference controls the background color of the app. It supports a four bite hex value and applies to the Android and BlackBerry platforms. Beyond that, this preference serves to override the CSS on all platforms. So, in essence, it really applies to all platforms. Then, we have our HighKeywordFormAccessoryBar preference that hides the additional toolbar that appears above the keyboard on iOS and Blackberry. The default setting is true. Then, we have our Orientation preference. This allows you to lock the orientation of the app regardless if the user rotates their device. The options are default, landscape and portrait. This applies the Android, iOS, Windows Phone 8, Amazon Fire, and Firefox OS. We can also set some platform specific orientations with the platform element on this particular preference. I'm not gonna keep these in my config.xml file, I just wanted to show you some of the other options that you had for this file. And then finally, we have the Cordova whitelist plugin. This plugin specifies what resources the app can connect to. First, we have the access origin="*". This specifies this app can connect to any external resources. If you omit this, the app will not be able to connect to any external resources. Then we have the allow-intents, which control what resources or links your app will be able to open. The first to allow the app to open links to external web sites. The allow-intent tel allows telephone links to open the dialer. The allow-intent sms let's you open the messaging app. The allow-intent mailto allows you to open email links. And then the allow-intent geo allows you to open maps. Then we have our platform specific allow-intents for Android and iOS that allow access to their respective app stores. Now you should have an understanding of this file and how it can affect your final app. In the next video, we will look at Android specific preferences.

Back to the top