Android Doodle Prototype

Due: Tues, Mar 22, 11:59PM
Point Total: ~10% of your IA grade (3.5% overall)

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: (i) a tool panel of widgets that allows the user to select brush size, color, and opacity as well as clear the current sketch and (ii) 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. 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.

Timeline

  • On Thursday, March 10, 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.

  • On Tuesday, March 22, you will submit your deliverables via Canvas.

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 about 1.1GB for Windows and 350MB 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.

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+ (note: this is less restrictive than what I said in class where I said that you must select Ice Cream Sandwich). 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 this 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, see this 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.

Take a Video

Once you're done coding, take 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 sourcecode on github, and a zip file of the source code (and requisite libraries). 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.

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):

IA07-Android1-GradingRubric_v1_cropped_650w.png

Best of IA07

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 Prototype

The top submission was by Eddie Krahe.

Eddie Krahe

Implemented undo/redo, color randomization, animated drawer for settings, real-time preview of brush, camera integration. Interface appropriately disabled options (e.g., can't hit redo button if no undo) . Very nice UI overall and a great video.



Runners Up

We selected two runners up.

Thomas McHale

Implemented erase, real-time color swatch feedback, background color setting, and a really neat 'reflection' mode.


Stephen Xie

Implemented undo/redo, color inversion, and discrete color swatches for setting brush color. Best use of a poem in CMSC434's history.


Honorable Mentions


Troubleshooting

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

Some of you have emailed to say that you received this error when you tried 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