Making native Android apps requires some basic knowledge of Java and it takes some time to learn. But you can use your HTML 5, CSS3,
and Js knowledge to make native Android apps using Apache Cordova, an open source initiative from Apache, Mozilla and Adobe.
Using Apache Cordova, you can access the Android APIs to access native device capabilities such as the camera, accelerometer, NFC beam, Bluetooth from JavaScript. Apache Cordova has a great Js library which is easy to implement in the apps.
Making your First app with Apache Cordova
To start developing apps for Android using Apache Cordova, you need to go through the list of requirements :
- Latest version of Java RE
- Latest version of JDK
- Android Studio
- Latest Cordova SDK
Installing up Android Studio
Download the latest version of Android Studio from Android Developer site. Android Studio is available for different operating systems like Linux, Mac OSX and Windows. The setup file has all the dependents like Android SDK, emulator, Device Bridge. Install the Android Studio setup and Android Studio is ready to use.
Installing Cordova SDK
Now download the latest Cordova SDK from the Apache site. Extract the downloaded file and we will use it later.
Creating the project in Android Studio
Follow these steps to create a project in Android Studio
-
- Open the Android Studio
- Select New Project
- Enter the required name of the project
- Select the required icon from the explorer
- Select Blank activity
- Select Finish
- A blank project is created.
Configuring Project to Cordova
- Now create two blank folders assets/www and libs inside the Andorid project directory
- Go to the downloaded Cordova folder
- Now copy the corodova-”version”.jar file to libs folder in Android project folder
- Copy the corodova-”version”.js file to assets/www folder in Android project folder
- Next, create a file named index.html in the assets/www. This file will be used as the main entry point for your Cordova application’s interface.
- In index.html, add the following HTML code to act as a main part for your app content
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Hello World!
- You need to add the Cordova.jar file as library file.
- Go to libs file in Android Studio, right click the Cordova.jar file and select Add as library.
Update the activity class
Now you are ready to update the Android project to start using Cordova
- Open your main application Activity file. This file will have the same name as your project, followed by the word “Activity”. It will be located under the src folder in the project package that you specified earlier in this process.
- In the main Activity class, add an import statement for
org.apache.cordova.MyApplication
import org.apache.cordova.MyApplication;
- Change the base class from
ActivitytoMyApplication; this is in the class definition following the wordextends:
public class HelloGapActivity extends MyApplication {
- Replace the call to
setContentView()with a reference to load the Cordova interface from the local assets/www/index.html file, which you created earlier
super.loadUrl("file:///android_asset/www/index.html");
Configure the project metainfo
- Begin by opening the AndroidManifest.xml file in your project root. Use the Notepad++ text editor by right-clicking the AndroidManifest.xml file and selecting Open With > Text Editor
- In AndroidManifest.xml, add the following
supports-screenXML node as a child of the rootmanifestnode:
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
- The
supports-screenXML node identifies the screen sizes that are supported by your application. You can change screen and form factor support by altering the contents of this entry. - Copy the following
<uses-permission>XML nodes and paste them as children of the root<manifest>node in the AndroidManifest.xml file:
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
The <uses-permission> XML values identify the features that you want to be enabled for your application. The lines above enable all permissions required for all features of Cordova to function. After you have built your application, you may want to remove any permissions that you are not actually using; this will remove security warnings during application installation.
After you have configured application permissions, you need to modify the existing <activity> node.
- Locate the
<activity>node, which is a child of the<application>XML node. Add the following attribute to the<activity>node:
android:configChanges="orientation|keyboardHidden"
- Next, you need to create a second
<activity>node for theorg.apache.cordova.MyApplicationclass. Add the following<activity>node as a sibling of the existing<activity>XML node:
<activity
android:name="org.apache.cordova.MyApplication"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter></intent-filter>
</activity>
Now the project is ready to build your first Android app.
Running the application
To launch your Cordova application in the emulator, right-click the project configuration, and select Run As > Android Application.
If you don’t have any Android virtual devices set up, you will be need to configure it.
Andorid Studio will have preinstalled emulator configuration so there will hardly be any program.
Download the source code of the above tutorial at github.com/saivarunk/example
