Using Android Studio with Cordova projects

This article assumes you already have a Cordova project ready to use. So you will use CLI to build the project first as you normally would, including adding an Android platform to the project and running cordova build android. You’ll still need to use the steps outlined in my article to build Cordova apps, including steps for installing plugins, icons, and screens: https://iphonedevlog.wordpress.com/2014/06/20/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-android-apps/

You’ll need the dependencies set up if you’ve never made a Cordova project before. See: https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/

Resources:
https://cordova.apache.org/docs/en/latest/guide/platforms/android/
https://developer.android.com/studio/intro/index.html
https://developer.android.com/studio/install.html 

Download Android Studio

1. Visit here to download the Android Studio (AS) software: https://developer.android.com/studio/index.html At this point, it downloaded v2.2.2.0. This downloaded a 461.8MB dmg (“disk image”) file to /Downloads.

2. Double-click on the dmg file. In the popup, drag the Android Studio icon to the Applications icon within the popup. Exit the popup. You now have a 834.7MB Android Studio file.

3. Start Android Studio by clicking on its name in /Applications. If a popup indicates that there are platform and plugin updates, click on the blue link to get them. In the License Agreement popup, you’ll need to click on each section heading having an arrow dropdown at left then on Accept to get the download started. My download size was 1.82GB!

Run your Project

1. After the download, the AS welcome screen shows. Choose “Import project (Eclipse ADT, Gradle, etc.”

2. Now let’s get your project visible in your device. Set up your device for USB Debugging. If you don’t know how, see this article: https://developer.android.com/studio/run/device.html

3. Connect the device to the computer with a USB cord. Get to the home screen on your device.

4. I got an Android Gradle Plugin Update Recommended screen in AS and clicked Remind me later.

5. To make sure we show that AS sees the latest app changes, click on the Terminal tab at bottom and notice the file URL. It is set to ~/Documents/<your folder system>/myApp/myApp/platforms/android. So type cd ../../ then Enter to move it up to myApp/. Go ahead and build with cordova build android.

6. In AS, when I hit Run > Debug… > android > OK (with my device highlighted), a notice popped up asking me if it’s OK to use USB Debugging. I hit OK in the device.

A notice popped up saying, “Application Installation Failed.” I needed to uninstall the earlier version of the APK in the device that I had created with Cordova CLI. I clicked on OK for AS to uninstall the application and continue the install.

7. I switched to the AS screen and clicked on 5: Debug at bottom to watch the activity. I moved around the app and the console updated. If you don’t see the console window open, then View > Tool Windows > Debug. You can also see verbose updates with 6: Android Monitor.

Look along the left edge of the window opposite the console and hover over each colored icon in the two columns to check their functions. For instance, “Use Soft Wraps” will help you read all the code without scrolling left/right. The universal red square Stop/Quit icon will stop/disconnect the debug process. The trash can will clear the screen.

Every time you make changes to the www folder and want to view the changes through AS, the changes need to be synced with AS. AS does not use the /www folder, so it won’t see your changes until you switch to the Terminal and do cordova build android to update the /platforms/android files that AS does use. Then Run… > Run ‘android’ OK to see the changes in your device. Then click on 4: Run under the Terminal to see the console updates.

Explore the Program

1. You can use the terminal from within AS. View > Tool Windows > Terminal. You can perform Cordova commands on your project there. Cordova recommends that you do NOT edit your code in the IDE. Editing with AS will edit the code in the /platforms folder of your project (not /www), and thus changes will be overwritten. Instead, edit the /www folder and copy over your changes by running cordova build android as noted above.

2. You can decide what aspects of your files AS should or should check with Inspections.
Android Studio > Preferences > Inspections: Android, Android Lint.

To do a code lint on your project, select the project name and Analyze > Inspect Code. Select Whole Project and click OK. Results will appear below neatly categorized. Clicking on exclamation point symbols will show more information and links about it. Drill down to Spelling > www and see if any spelling errors are critical in your own files.

3. Want to change to a darker color scheme? Click on Android Studio > Preferences > Appearance & Behavior > Appearance, Theme: Darkula.

4. Set up your external image editor.
Android Studio > Preferences > Images, External Editor: Images.
If you double-click on an image in your project (such as /www/img/logo.png) it will open in the Editor pane. Right-click on the image and select Jump to External Editor to open it in the editor you specified.

5. Show line numbers in Editor.
Android Studio > Preferences > Editor > General > Appearance: Show line numbers.

6. Improve startup speed by disabling plugins you won’t use or need. Restart AS to enable changes.
Android Studio > Preferences > Plugins.

7. File > Project Structure is where you’ll indicate your Android SDK and JDK locations. If you update your JDK, you can update this page.

Configure an emulator: AVD Manager

I recommend using a real device for checking your work rather than using the onscreen device emulator – it’s more accurate.

1. We’ll configure an emulator called an AVD, or Android Virtual Device.
Tools > Android > AVD Manager.

2. Create Virtual Device …

3. Follow the prompts to Finish, then hit the triangular Play button. The emulator should start. A Run panel opens in AS showing its output. To quit, click on its name at upper left, then Quit.

Configure your app for APK creation

Resources:
https://developer.android.com/studio/run/device.html
https://cordova.apache.org/docs/en/latest/guide/platforms/android/
https://developer.android.com/studio/run/index.html

Monitor app activity with the Android Device Monitor

You can monitor the activity of the app on your Android device with the Android Device Monitor.
Tools > Android > Android Device Monitor
Plug in your USB device. You may need to set PTP = connect as camera, or MTP = connect as media device on the device.
Run > Edit Configurations, +, Android Tests, Target: USB Device, OK.

Set up your connected device for debugging

Plug your device into the computer for doing a USB debug.

1. Run… > Debug.
2. Click on your configuration.
3. Fill out the Edit configuration screen:
Module: choose your app name.
Deploy: “Default APK”
Deployment Target Options: USB Device or Emulator.
Debug

Create an unsigned (debug version) APK

1. You may want to do a last-minute check before making an apk file:

Analyze > Inspect Code …

2. Build > Build APK.

3. You should find it output at /android/build/outputs/apk/android-debug.apk.

Create a Signed (release version) APK

1. You may want to make sure the code is correct before making an apk file:

Analyze > Inspect Code …

2. Build > Generate Signed APK … Follow the prompts to create or choose an existing keystore.

3. The output goes to /platforms/android/android-release.apk. The status bar at bottom will tell you if there are any errors; you’ll find them in the 0: Messages console.