Time for action – adding a splash screen to your app

In order to add a splash screen to an Android app built with PhoneGap you have to perform the following steps:

  1. In order to prepare the splash screen images for Android, create several versions, one for each screen size, of the splash screen and save them in the res/drawable-screensize folder (please refer to the official documentation available at http://developer.android.com/tools/help/draw9patch.html in order to create 9-patch images).

    Note

    The res folder can contain images, pictures, and so on. Each time a new resource is added to this folder it's automatically defined in the R.java class as static int values so that you can access it easily in your app. The drawable folders are the ones where you can put one image per folder, sized to match the indicated screen density.

  2. In order to prepare the splash screen images for iOS, copy the images into the iOS project's Resources/splash directory. Only add the images for the devices you want to support, such as iPad or iPhone.
  3. Open the Android project and add an XML configuration file named splash_screen.xml in the xml folder containing all the relevant information.
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http: //schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="@drawable/splash"/>
  4. In the main Java file of the Android project, enable the splash screen and delay the loading of the index.html file.
    super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl(Config.getStartUrl());
  5. In the index.js file, after the template loading and parsing, you can optionally add the JavaScript needed to hide the splash screen.
    navigator.splashscreen.hide();

    Tip

    While setting a timeout in Java, if it isn't long enough, the splash screen will disappear before the app is done loading. Anyway, adding it also in the JavaScript files prevents you from having issues with other platforms or undocumented bugs.

  6. Open your command-line tool, navigate to the project root folder, and add the Splashscreen plugin.
    $ cordova plugin add https: //git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

What just happened?

You defined a splash screen that will be visible only until your app is completely ready to run, and displays the UI to the user employing platform-specific settings and the Splashscreen API.

Tip

In iOS copy your splash screen images into the Resources/splash directory of your iOS project and then edit the Cordova.plist file so that the value of AutoHideSplashScreen is false.

Have a go hero – preparing additional app assets

Prepare the assets needed to define the splash screen of your app for all your target platforms. You can get a complete overview of the assets needed for each platform in the online references of each one.

Pop quiz – getting started with mobile apps

Q1. Which is the recommended cordova-cli command to run to emulate your app on a specific target platform?

  1. The command serve.
  2. The command emulate.
  3. The command ripple.

Q2. What is the main advantage of using the module pattern in JavaScript?

  1. Encapsulation.
  2. Code executes faster.
  3. Hide unneeded complexities.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.79.60