Aug 1, 2012

Let's start coding ... NOT! - Instant Mustache #3

This article is part of a series of articles about the development process of Instant Mustache, a fun camera app that adds mustaches to all faces using face detection. Click here to get a chronological list of all published articles about Instant Mustache.

In the last two articles about Instant Mustache we've talked a lot and it's about time to start coding! Yet I’ve to disappoint you for now. There still will be no code in this article. Before we’ll start coding we’ve to define what we actually need or want. From the last article we already know there will be two screens. But what we don’t know yet is how they should look like. So how will we figure out how the (very simple) UI will look like? Of course we can fire up our code editor or visual editor but there’s a much faster way to get results: Good old paper.

I won’t talk about paper prototypes or UI development and user testing here. But there’s a better resource for that. The Android UI Patterns blog has a lot of articles published covering a variety of Android UI topics. Here we are going to just sketch some screens, play around and hopefully come up with an idea of how the app will feel like when it’s finally developed. As said before I'll use paper for that. Other people may like to use software for creating mockups (Fluid UI seems to be a nice online tool for that). It's up to you what works the best for you. For me paper is the easiest way to try different ideas without the limitations of a software tool. But the important thing is: We won't write a lot of code that we need to throw away again after we realize that our initial idea may not be as good as we thought.

The following photo shows a bunch of discarded drawings I came up with during brainstorming the UI:

The camera screen (CameraActivity)
The first screen the user will see after launching the app will be the camera screen. There are two main components we need: A camera preview and a button to take a photo. In addition to that we may want to reserve some space for future features like switching between cameras and mustaches.

Let's take a look at the the final version of the camera screen as I've drawn it:

The following decisions I've made during drawing and experimenting:

  • I want the app to have an ActionBar. To be consistent I also want the ActionBar in the camera screen. I don't know yet if it's useful to show the app title "Instant Mustache" in the ActionBar as I've drawn it. It's quite long and may take up too much space. Furthermore the overflow menu drawn here may not be visible as we have no menu entries defined yet.
  • The camera picture will be a square. We'll have to define a picture ratio and a square may fit quite nice into the screen. The darker areas on the screen will grow or shrink depending on the screen size of the device and always center the camera preview.
  • There will be a bar at the bottom of the screen which will house the button for taking a picture. Here we will have enough space for adding more functionality in later releases.
  • Almost all activities showing a camera preview are fixed in their orientation. While moving the phone around to take a photo you don't want the phone to destroy the current activity, do the rotation and re-create the activity. Especially because the camera picture will be oriented correctly anyways because you are rotating the camera inside the phone as well. To satisfy the previous points we will fixate the orientation to portrait mode.

The photo screen (PhotoActivity)
After taking a photo you will see another screen showing the photo you've taken and you'll have the option to share the photo with other apps on your phone.

That's how my final version of the photo screen looks like:


The first version of this screen will be really simple:
  • At the top we'll have the ActionBar again. To share the photo we'll add a ShareActionProvider that shows a list of available share targets as well as the most used app as an icon right beside it.
  • Below the ActionBar we'll show the taken photo and that's everything for now.
What's next?
Now we've defined how our two screens will look like. In the next article we are going to launch our IDE and start writing the CameraActivity. I am curious to know what you think about the UI as described here and if you have other ideas. Let me know in the comments or on Google+.


  1. Looks very clean and simple. Can't wait for new one.

  2. Great read and a very interesting look at a real-world workflow - thanks for the Fluid UI mention too! You could always scan these in and upload them into Fluid UI to make a clickable version that runs on the phone? Best of both worlds - sketches made interactive :)