Building an Android UI

Posted: Monday, October 20
Due: Tuesday, November 11, 7AM Friday, November 14, 11:59PM (extension as voted on by class)
Point Total: This assignment is worth approximately 5% of your overall grade.
This assignment is to be completed with one CMSC434 partner of your choice.

Assignment Overview

In this assignment, you will design and implement a custom clock application for Android using two common programmatic approaches: first, using the Android Studio built-in design toolkit (Figure 1) to select, drag-and-drop, and layout widgets visually (along with XML); second, using a custom view that overrides the onDraw() method (Figure 2). Both clock implementations must show and update the current time (in real-time). While the WYSIWYG visual editor is convenient, relatively easy-to-understand, and useful for a wide range of tasks, the built-in widgets are rather limited. Most applications combine off-the-shelf widgets (e.g., textboxes, dropdown menus, buttons) with their own views.

Figure1-AndroidGraphicalUIBuilder.png

Figure2-AndroidCustomViews.png

This assignment gives you tangible, hands-on experience with a state-of-the-art mobile OS (Android) and its development ecosystem. It also provides you with tangible experience programming UIs using the two aforementioned common approaches (WYSIWYG and custom views) along with experience using messaging queues, UI threads, following design patterns, using a modern IDE with debugging support, and applying some of the IxD principles we've been learning in class.

Although this assignment is filed under "individual assignments," you are to do this assignment with a partner. You must tell me who you are partnering with by the end-of-day Thursday, October 23.

Assignment Parts

As you will be working with a partner on this assignment, you must git (a source control system) and host your code on github.
  1. You will build the first clock using Android Studio's visual design tool, XML, and Java programming. This clock must show the current time and date, must be easily readable, and must update at least once a second. Update: we basically covered how to do this in Lecture 15 in class (obviously, you need to adapt it to show the current time and date. The code we made during class can be downloaded here.
    You can also watch this quick video I recorded about how to open the project in Android Studio. Please post to Canvas or email me if you run into any issues.
  2. The second clock must be implemented by deriving your own View class, overriding the onDraw function, and programmatically drawing the clock. Be creative. You have absolute, pixel-level control here. Before you begin, I want you to sketch 10 different ways of visualizing time. You will scan in these sketches and turn them in with your assignment. You can watch this YouTube video I recorded showing step-by-step instructions of how to create a simple custom View (for a Doodle app). The code from this example can be downloaded here.



  3. You must implement a persistent Settings activity using fragments to allow the user to customize their clock views (e.g., the timezone, 24 hour vs. 12 hour clock display, color, etc.). The settings should save across openings/closings of the app (hence, persistent). Note: as mentioned in class, you do not actually have to use a fragment to implement persistent settings. So, you can pursue your own solution here but the key is that it must be persistent.

  4. You must brainstorm and implement one new feature not specified above. For example, in the application I showed in class, my ClockGridView downloads the sunrise and sunset times from a web API and visualizes them in the clock. What will you add? Some ideas: alarm functionality (careful, the alarm should persist even if you close the app--so you should implement this as a service), some cool transition animation between numbers changing, a movement logger.

  5. Once you've finished your implementation, you will record a demonstration with voiceover (and/or captions) and upload it to YouTube. The video should describe in detail the above four requirements.

Deliverables

On Canvas, you will submit a link to your YouTube video, a github link to the sourcecode, 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. Note: some students were struggling with using Git (unfortunately) and though I think a source control system--Git, Subversion, etc.--is really an essential part of programming, I did not expect this to be a barrier to completing this assignment. Thus, if you absolutely need to, rather than hosting your code on github, you can simply upload a zip file of your source code.

Resources

  1. Application Fundamentals, developer.android.com
  2. Activities, developer.android.com
  3. Layouts, developer.android.com
  4. Getting Started, developer.android.com
  5. Building a Simple User Interface, developer.android.com
  6. Best Practices for User Interface, developer.android.com
  7. Best Practices for Interaction and Engagement, developer.android.com
  8. User Interface, developer.android.com