Places Demo Part II

In the first part of this series I went over the image Martin and Chen produced, in this part I'll review the path that needs to be taken in order to take this image and make it into an actual application fit for all devices.

The first part is divide & conquer, we need to divide the image into its basic elements:
Backgrounds
Component looks
Content

Photoshop makes this division relatively easy since it already divides elements to layers, although often these layers make sense in photoshop and not within our application. So reviewing this image:

We have the following elements in the background:

• Gradient from 00d8fe to black:

• Translucent texture image, notice that this image is translucent and it appears here on the background of the blog. When layered on the gradient it will look quite different:
  

Effectively these two come together to form a background like this:

Notice the color at the top its actually the area where the title bar background should reside, that is a part of the title component design.

The components within the design are far more complex, there are easy elements such as the title:

And the list background:

Which are both pretty easy. It gets complicated when looking at an element like this:

Obviously the word Bars is part of the foreground its just here for visualization. As you can see the round portion of the cup fits snugly into the button, because it contains and icon and is aligned perfectly to that icon it can't be separated from that icon.
Yet because it aligns to the button and the button needs to grow with the text within it we might end up with something that looks like that:

Which is obviously very far from the original design! There is no way to actually solve this problem that would be truly satisfying so we will make some compromises.
We will treat this element as the component:

And we will always scale the icon on the left to fit that element so it will be covered perfectly. Its not an ideal solution since it requires scaling the background image which can cause degradation.

The rest of the images and the text within the application are really just the content, this separation is critical since elements that are background elements should be incorporated in the theme and elements that represent content should be incorporated into the UI.

In the next post I will start explaining how to move this logic into the resource editor and create the UI for this demo.