Use New Ways to Develop Android Apps

Use New ways Android Apps to Develop

This article clears the air about the general perception that Android apps must be written only in Java. Advances in the mobile development environment have made it possible to create hybrid apps without working with Java, by using cross-platform tools such as PhoneGap.

Android is currently the most widely used mobile operating system in the industry, across the world. It came into existence in 2007 and, ever since, there has been a boom in Android-based smartphones. This has not only resulted in a large number of devices and apps entering the market, but has also created a whole new world of programming for developers. The Android API is exposed in Java, and those who are well versed with Java do not find it much of a challenge to develop Android apps. But for those who do not know Java, it is difficult to jump into Android app development. This is why new ways to develop Android apps are being sought, which has paved the path for hybrid mobile apps.

The mobile development environment has evolved greatly since 2007 and has witnessed a number of new trends. Among them is the birth and evolution of hybrid mobile apps. Mobile apps are broadly categorised as native apps, Web apps and hybrid apps (see Figures 1 and 2). Native apps are developed using the underlying native technology of the mobile platform. For instance, in our case, native Android apps are developed using Java. Web apps, or specifically, mobile Web apps are those that are optimised to be viewed from smartphones. These are normal Web applications developed using HTML5, CSS and JavaScript, and have been modified to be rendered perfectly in various form factors, including those at the lower end in the smartphone space. Hybrid apps utilise the best of both worlds. It is the general opinion that Web development is easier with technologies like HTML5, CSS3 and JavaScript, and the developer base is much

Figure 1: Native vs hybrid vs Web

Web App Hybrid App Native App

Figure 2: Native vs hybrid vs Web

This is your user interface. It is a web browser instance. 100% width & 100% height

Figure 3: Webview container

larger compared to, say, Java alone. Hence, a way was found to package the Web application code and run them as apps on mobile devices. This is how hybrid mobile apps have found their way into the industry. Hybrid mobile apps are nothing but HTML5, CSS3 and JavaScript code wrapped in a webview container and packaged as native apps.

To illustrate the concept of hybrid apps in more depth, let’s try and understand how it all actually works. In general, each mobile platform offers a webview container—a UI control/element that helps the user to render HTML5 code inside it. At times, there is a need to show some website or other Web pages within the context of a native app. This is when webview is most useful, and it’s this functionality that has opened the doors to hybrid apps. A hybrid app is nothing but a webview control that fits the entire page (Figure 3). So if I were to express this in an ‘Android way’, it would be something like what follows:

<?xml version="1.0" encoding="utf-8"?> <WebViewxmlns:android="http://schemas.android.com/apk/ res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" />

Those familiar with Android development will be able to make sense of the above code snippet. In Android native development, we usually declare the UI controls and elements in that Activity’s XML file. So, for our sample Activity, using the above code, I have created a webview control that fits the entire screen (fill_parent for both layout_height and layout_width). Now, one can write the entire code like it’s a Web application and exploit this webview to render the Web page. The Android developers’ page has a comprehensive tutorial on how to use webview to make an application: http://developer.android.com/ guide/webapps/webview.html

In the past few years, a lot of cross-platform tools (CPTs) have emerged for making hybrid apps that let you code in a different language and package your code for Android devices, iOS devices, etc. Most of these tools offer coding languages such as HTML5, CSS3 and JavaScript. Their underlying architecture is almost similar to what we’ve just discussed. With hybrid apps, the biggest myth is related to performance and accessing device-specific

Figure 4: PhoneGap architecture

features, especially hardware jquery-mobile features like the camera, GPS, etc. With the ever evolving js mobile platforms and hybrid stylesdevelopment frameworks, performance is no longer a Index concern. Figure 5: Sample folder structure

Coming to accessing device-specific features, there are various CPTs that have JavaScript wrappers, which expose such functionality so that one can access the hardware of the device using JavaScript code. One such CPT is PhoneGap (now known as Cordova). It does two major things - it helps to package the Web page code and expose it as a native application, and it also provides JavaScript wrappers that offer access to the device hardware (Figure 4). These wrappers have a pretty simple underlying concept. Let us consider the example of Android. If I need to access the camera of an Android device, I can use the Camera API. Now, to write a wrapper, one needs to write a library that inherently calls the Camera API. There are a lot of ways to achieve this. The wrappers are customised, the webview is customised, but internally, the method used is on lines similar to what’s been discussed here.

We will now look at a way in which one can create a hybrid app. I will not cover the code because, essentially, it is a normal Web page. Instead, I will focus on how to package it. The most important thing here is to ensure that your Web application follows SPA (Single Page Architecture). One can have multiple and external HTML5 pages, but that is generally not how hybrid apps are designed. The easiest way to package a Web app as a hybrid app is to use build. phonegap.com. For instance, let us consider the folder structure shown in Figure 5 (I’ve used jQuery Mobile, which is a popular framework for making hybrid mobile apps and mobile Web apps). Now, we need to zip this into a single zip file. Then, this file needs to be uploaded on build.phonegap.com. There is a lot more involved behind the scenes, such as the config.xml, but for now, we can skip that.. Once the zip is uploaded, the cloud platform will automatically generate a hybrid app for us, for this particular build (see Figure 6—I’ve used the Ionic framework, another hybrid development framework based on AngularJS).

Experienced developers of native apps might prefer to use Eclipse and the Android SDK as the hybrid way might seem a bit complex to them. They can directly create a sample Android app, and have a single Activity, for which they can define a webview control and then perform the HTML5 magic there. Those interested in cross-platform development can definitely jump into

Figure 6: PhoneGap build

hybrid development. For such developers, PhoneGap is a nice place to begin, and just reading a sample of what’s available there (http://phonegap.com/2012/05/02/ phonegap-explained-visually/) can help a lot in understanding PhoneGap and how it works.

By: Manit Singh Kalsi

The author works as a mobile evangelist in the Mobility Centre of Excellence at Genpact Headstrong Capital Markets. He is a Java and JavaScript developer, who enjoys exploring new technologies and frameworks. When not coding, he is either strumming his guitar or playing video games. Follow him @manitsinghkalsi.

PACKWEB PACK WEB HOSTING

P ro X www.packwebhosting.com

0-98769-44977

Time to go PRO now

support@packwebhosting.com

A Leading Web & Email Hosting Provider Specialists in Hosting Sites built with OpenSource

Technologies

Wordpress Magento

ProX Plans

Have a High Traffic Website? Considering VPS/Server? Visit prox.packwebhosting.com

Joomla Drupal

• cPanel Hosting • One Click Installation • Solid Support • Multiple Hosting Plans

Why Us?

• 4000+ Hosting • 6500+ Domains

• 2000+ Clients • 11+ Years Experience Trust Us. Trust our Ability.