Book Image

Hybrid Mobile Development with Ionic

By : Gaurav Saini
Book Image

Hybrid Mobile Development with Ionic

By: Gaurav Saini

Overview of this book

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps. This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application. By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.
Table of Contents (9 chapters)

Automatically creating icons and splash screen resources

Ionic tools are so beautiful that now you don't have to struggle like we all used to, some years back in hybrid development. You can avoid the headache of adding icons, splash screens, and so on for every platform with different sizes. Now we don't have to deal with all this stress and Ionic have made it possible for us with a single command:

    $ ionic resources

Ionic automatically crops, resizes, and creates icons and splash screens from source images for each platform and it does this in different sizes for different devices such as mobiles, tablets, and so on. All these are generated on Ionic's resizing and cropping servers without any overload from installing libraries or plugins on local machines.

Image sizes and specifications

Ionic resources have some specification of the source image of the icon and splash screen. Images can be either .png files, Photoshop.psd files, or Illustrator .ai files. There is a minimum size requirement for the source images for both. An icon's minimum size should be 192x192 px, and it should not have rounded corners. In case of splash screen, the minimum requirement is 2208x2208 px so that for every platform Ionic can prepare resources. The splash screen's artwork should roughly fit within a center square (1200x1200 px). Additionally, when the orientation preference configuration is set to either landscape or portrait mode, then only the necessary images will be generated.
For creating just icons or splash screen, the ionic resources command has two flags that allow you to create just icons or splash screens, not both:

    $ ionic resources --icon
$ ionic resources --splash

If a proper size is not provided for the source files, this will only create resources that are less than the size of the source image. For example, there might be chances that resources for tablets or high resolution screens are not generated.

Platform specific resources

Ionic provides support for building icons and splash screen resources for various platforms and devices. For building resources, we just need to place the source image inside the resources folder with the name icon.png and splash.png. This way you will get the extracted icons and splash screens for each platform, such as a Native rounded corners icon for iOS, and transparent background for an Android icon.

To summarize the steps:

  1. Add files to the resources folder naming icon.png and splash.png. (.psd and .ai can also be used).
  2. Make sure the minimum size requirements for icon are 192x192 px and for splash 2208x2208 px.
  3. Run the ionic resources command from the CLI.
Different platforms have different ways of styling icons, for example, iOS will apply its rounded corners, that is why we recommend the Ionic source file to be without rounded corners. Also, using the ionic resources command will require at least Cordova 3.6 or more.