IA08: Android I: Doodle Prototype

Due: Tues, Nov 8, 11:59PM

Assignment Overview
In this assignment, you will design and implement a custom doodle prototype for an Android Phone or Tablet. This assignment is the first of a few on engineering interfaces. We will move quickly. My goal is not for you to become experts in any particular platform but rather to give you a broad understanding of how to build/programming UIs and general knowledge of common UI programming paradigms/approaches. Hopefully, through these assignments, you'll develop an interest and taste for implementing graphical user interfaces.

Your Doodle interface should have two main parts:
  1. a tool panel of widgets that allows the user to select brush size, color, and opacity as well as clear the current sketch and
  2. the doodling canvas itself.

For the former, you will use Android Studio's built-in design toolkit to select, drag-and-drop, and layout widgets visually via the WYSIWYG editor (which also has an XML backend). For the latter, you will build a custom View that overrides the onDraw() method (see YouTube video below). Finally, in addition to the tool panel and doodle interface, you must propose and implement your own new feature. Some ideas:
  • Photo trace doodler: provide load image functionality and allow user to trace over it
  • Save and load functionality
  • Social media share functionality
  • Undo/redo functionality
  • Doodle with accelerometer rather than touch input

This assignment provides concrete, hands-on experience with a state-of-the-art mobile OS (Android) and its development ecosystem. It also provides tangible experience programming UIs using the two common approaches: a WYSIWYG editor and building custom views, and provides exposure to using messaging queues, UI threads, following Android design patterns, using a modern IDE with debugging support, and applying some of the design principles we've been learning in class. Finally, you will receive your first exposure to using git and github, which we will also start using in our team assignments. Version control systems like git and Subversion are critical to software development.

Timeline

  • On Thursday, Oct 27, you must come to class with Android Studio installed on your laptop and prepared for in-class coding activities.

  • On Thursday, Nov 3, you must come to class with an initial interactive prototype of your Doodle interface and a pre-brainstormed list of potential features. At a minimum, your prototype should include a custom View class that allows the user to doodle. You do not have to include a working tool panel (though if you can begin to prototype this, it would be useful). In other words, the user should be able to doodle even if the brush size, color, etc. are not settable yet via your interface. This code must be in github.

  • On Tuesday, Nov 8, you will submit your deliverables via Canvas and github.

What To Do

Install Android Studio and SDKs

The first step is to configure your development environment. We will be using Android Studio for this assignment (download here for both Mac and Windows). The Android Studio installer itself is over 1.1GB for Windows and 400MB for Mac. The installer will also grab the latest version of the Android SDK, which is potentially another ~3.5GB. You must also have the Java Development Kit 7 installed--see this list for other System Requirements. Note: on Windows, I had a pre-existing Java JDK installation and my environment variable JAVA_HOME was set to an old JDK path, which prevented Android Studio from opening (follow this video to fix). When opening Android Studio for the first time, it will also perform some installation steps. I experienced another error here as well on Windows: "the following sdk component was not installed android-23." I clicked the 'retry' button and it seemed to fix itself. I did not experience any installation issues on my Mac.

If you use any websites, videos, or other sources for example code or inspiration, you must list them in your assignment.

Brainstorm Features and Sketch Interface Designs

Before you start building, I want you to brainstorm possible features and sketch some potential interface designs in your sketchbook. As you begin building your prototype, you will likely start thinking of new cool features to add--write these down too. Then, when it's time to add your custom feature, evaluate your list and choose one. You'll turn in a scan (or picture) of your sketchbook pages as a deliverable.

Use Github

You must use git and github for this assignment. You do not need to use your "normal" github account if you do not want to (i.e., it's fine to use a create and use a throwaway CMSC434 account if you'd like--up to you). If you are like me and not a git poweruser, I suggest using a git frontend. Fortunately, github publishes their own frontend that makes interacting with git (and github) quite easy--download the tool here. If you are completely unfamiliar with git and github, start with this tutorial. Feel free to ask questions on Canvas.

Build the Prototype

  1. Start by opening Android Studio and selecting 'Empty Activity.' You can name your project anything that you want--but I suggest using a relevant name like Doodler or CMSC434Doodler. When asked to select a target API, you can select any API from Ice Cream Sandwich onwards--in other words, API 15+. To help you understand the project files that Android Studio automatically creates and how to use the Android Emulator (and other important workflow functionality), I suggest working through the official 'Building Your First App' tutorial on the Android website.

  2. Use the WYSIWYG editor to construct the overall layout and initial tool panel. Don't worry, you'll iterate on this... but this is the best place to start. I suggest putting in a 'clear sketch' button early on to make it easy to clear Doodles and test other functionality. To learn about how to use the WYSIWYG editor, see my video on Rapidly Prototyping a Calculator App in Android. Note: the video was recorded in 2048 x 1280, so you must watch it in the highest HD setting on YouTube to be able to see the code, text, etc. You can download the code for this example on github (link).



  3. Build an initial custom View. I suggest calling it DoodleView. This View will handle touch events and drawing (point rendering). To help you with this, I created a second video entitled Quick Intro to Creating a Custom View in Android. As before, you must watch this in the highest resolution setting possible on YouTube. See also Android's documentation on Canvas and Drawables and Custom Drawing .



  4. Hook-up interaction between tool panel and DoodleView. For some hints on how to do this, see the calculator app video above. Iterate on the design of the tool panel as you begin to discover features in Android and ideate as you code (you'll likely think of lots of possibilities as you begin prototyping in code, opening up new potential avenues to pursue). Test (you're the user) and iterate.

  5. Now, add in your custom feature. Again, test and iterate.

Record a Demo Video

Once you're done coding, record a ~1-to-2 minute video showing off the required features plus your custom feature. Clearly explain the interface using oral narration (to save time for this assignment, you do not need to add captions--unless you want to). You can record either the emulator or your app running on an actual Android phone or tablet.

Deliverables

On Canvas, you will submit:
  • a link to your YouTube video,
  • a PDF of scans/photos of your brainstormed list of features and interface sketches,
  • a link to the source code on github. The github root should contain a readme that describes how to run your program and lists references to online sources that you used to build your prototype.
  • a zip file of the source code (and requisite libraries)

Creating a README.md file in github: To create a readme file, the easiest way is to go to your github repo with your webbrowser, select the root folder (top-level), click the button 'New file' and type README.md in the filename textbox and write the markdown in the larger textfield. For help, read Getting Started with Writing and Formatting on GitHub and the Markdown Cheetsheet.

Rubric

You can download the rubric here (a screenshot below, which you can click to enlarge, is included for your convenience):


IA08-Android1-GradingRubric_v1_cropped_650w.png

Note:
When completing this Android assignment, please remember to try and implement as many of the standard features as possible without using found code or external libraries; code libraries should only be used to help implement experimental features and you should expect to have to do more than just call built-in functionality (e.g., using a twitter plugin to post tweets that only requires you to call a function like tweet(acct, msg) isn't really demonstrating that *you* have implemented a custom feature). Students should also provide citations to work they do end up using as a reference including links to sources on popular coding Q&A community sites (e.g., Stack Overflow). If you are found to have relied too heavily on external resources or fail to cite these resources, you will receive very poor grades on the Android assignments.

Best of IA08

Matt and I would like to recognize a subset of submissions as the best in class. Top submissions were selected based on their implementation of the required features and the quality, complexity, and cleverness of the special feature. We have three categories: top overall, runners up, and honorable mentions. Great job award recipients!

Top Doodle Prototypes
The top submissions were by Maria Furman and Mark Creamer. Maria and Mark had excellent videos and implemented great features; we encourage you to check out their videos (and the videos of the other award winners below).


Maria Furman


Mark Creamer

Runners Up
We selected two runners up.

Honorable Mentions

Troubleshooting

Cannot launch AVD in emulator: x86 emulation currently requires hardware acceleration

In previous semester, some students experienced this error when trying to launch an Android emulator:
CannotLaunchAVDEmulator.png

To fix this, load the Standalone Android SDK Manager. If you're not sure how to do this, open Android Studio then select Tools -> Android -> SDK Manager from the file menu. This will open the following dialog in Android Studio, but we need to launch the standalone SDK Manager. To do this, select the "Launch Standalone SDK Manager" hyperlink (circled below).

AndroidStandaloneManager.png

In the Android SDK Manager, scroll to the bottom of the window and click 'Extras' to expand (if it's not already). Check to see if the Intel x86 Emulator Accelerator (HAXM installer) is installed. If it's not (like the screenshot below), click the checkbox and then the Install button.
InstallIntelx86Emulator.png


After the HAXM is installed, quit and relaunch Android Studio and try running the Android emulator. It should work this time--if not, try restarting your computer and try again. The Intel website has a nice walk-through of the HAXM installation process along with a number of useful debugging tricks [link].

More HAXM Help

If you still cannot get the HAXM to install, you have three options: (i) run your emulator without hardware acceleration (which is a fine, albeit slow solution), (ii) try to understand why the HAXM is failing so that you can fix it, (iii) use an alternative Android emulator like GenyMotion. Note: I have no experience with GenyMotion or other external, unofficial emulators so I cannot vouch for that approach.

Running Emulator Without Hardware Acceleration

To run your emulator without hardware acceleration, you can select a non-x86 emulator like ARM.

Trying to Debug HAXM Installation

On my Windows 10 computer, my Android Emulators suddenly stopped working. When I tried to launch them, I got the dreaded 'Cannot launch AVD in emulator. ERROR: x86 emulation currently requires hardware acceleration..." This was quite strange, I thought, because I have HAXM installed and my emulators were previously working. Perhaps a Windows Update caused a problem? Though I'm not sure what happened, I can walk you through my solution.
  1. I double checked in the SDK manager that "Intel x86 Emulator Accelerator (HAXM installer)" was marked as installed. It was.
  2. I then carefully read through the Intel documentation for installing HAXM (link).
  3. I then read the "Configuring VM Acceleration on Windows" official Android documentation, which recommends manually installing the Intel HAXM. You can find the installer here: <sdk>/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.exe. On my machine, this was: C:\Users\jon\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm-android.exe.
  4. However, when I tried to install this, the installer failed and said something similar to "This computer does not support Intel Virtualization (VT-x). HAXM cannot be installed. Please refer to the Intel HAXM documentation for more information." This seemed particularly weird because my emulators were working with HAXM before...
  5. So my next step was to verify that my cpu does indeed support Intel Virtualization. I did this two ways: first, I checked my bios for the hardware virtualization settings and these were all enabled. Second, I downloaded the Intel Processor Identification Utility (link) that shows the capabilities of your cpu.
  6. Strangely, the Intel Processor Identification Utility said that my processor, the Intel Xeon E3-1270, does not support virtualization... but I knew that it did (unfortunately, I do not have a screenshot of this)! Indeed, the Intel documentation for this processor says that virtualization is supported (link)
    IntelVirtualizationSupport.png
  7. After searching online, I came across a few posts that indicated that Windows Hyper-V was the culprit (e.g., this StackOverflow post) preventing the Intel HAXM installer from working. To disable Hyper-V, follow these instructions and restart your computer.
    UncheckingHyperV.png

  8. After doing that, the Intel Processor Identification Utility stated that my cpu supports virtualization (see below) and I was able to rerun the HAXM installer and actually get my emulators to work again. Whew!CPUTool.png

The following sdk component was not installed android-23

When opening Android Studio for the first time, it will also perform some installation steps. I experienced another error here as well on Windows: "the following sdk component was not installed android-23." I clicked the 'retry' button and it seemed to fix itself. I had this same problem on both of my Windows machines (one running Win10, the other Win7). I did not experience any installation issues on my Mac.
CouldNotInstallAndroid-23.png

The following classes could not be instantiated...

After I first installed Android Studio and loaded a Blank Activity, the auto-generated template code did not render correctly in the Preview pane (see image below). I received this same error in Android Studio on Windows and Mac. After searching online and trying a few things (e.g., downloading and installing the 4.0.3 SDK, downloading and installing Android Support Library (note the path name), and playing around with various app themes), I never came up with a satisfactory solution. So, we will be using an 'Empty Activity' rather than a 'Blank Activity' in this assignment.

Android Studio throws an exception rendering the Design view

I ran into this error when testing code on my Windows 7 machine, which has a different configuration from my Win10 and Macbook Air that I also use for testing and teaching Android. The problem was that Android N (Preview) was selected in the Preview pane rather than Android 6.0. Once I forced Android Studio to use the right API for rendering the interface previews, the error went away. This Stackoverflow post helped! :)

The full error:
Rendering Problems
Exception raised during rendering: com.android.ide.common.rendering.api.LayoutlibCallback.getXmlFileParser(Ljava/lang/String;)Lorg/xmlpull/v1/XmlPullParser;

Here's how I fixed it:
AndroidPreviewInterfaceProblem.png

After I switched to Android 6.0, the interface properly previewed in Android Studio:
AndroidPreviewInterfaceFix.png