Thursday, November 21, 2013

Boil an egg app - step by step (step 2 – Layouts)

 

    After doing part 1, it’s time for coding – let’s write down the layouts used:

layouts

it’s easy to see that we have only a single layout, however – we have two:

main_layout

splash_layout

the splash layout is pretty much a nifty way to show the user something that will make him a bit excited, it’s not mandatory, but it’s really nice.

let’s review the splash screen and the main layout screen, the 2 files can be found at:

https://www.dropbox.com/sh/cieiqif3lpzip2n/gC0jqfrBR6

Basically it’s a single LinearLayout containing an ImageView with the src directed to a png file in the drawables directory called splash.

let’s review the main_layout layout:

damn! seems like a complicated layout – no, it’s not – being a long xml doesn’t make it complicated, it just means it has a lot of views.

lines 8-44 : header, intro text, and label for choosing an egg

lines 46-150 : basically the layouts for choosing an egg size buttons, buttons for choosing egg type and the start/reset buttons.

lines 152-180: the label and the TextView for the actual timer.

copy it and try to run just to follow the components using the designer, you’ll see it’s very simple.

on the next post, we’ll cover the Java parts.