When working on a multi-platform mobile app it's hard to decide where to start.

You could start with either the business logic or the user interface.

We will take a user interface first approach and start with Android,

then iOS, and then do some refactoring to build our shared code.

As we build out Android and iOS versions of our app

I'll walk through each of the steps we'll need to take in order to finish our app.

Familiarity with Android or iOS will be helpful, but

not necessary, in order to follow along.

If you'd like to learn more about Android and

iOS development, see the teacher's notes for links to resources that can help.

Let's start with opening MainActivity in the Android project.

All activities must inherit from the activity base class, and

should override onCreate so

that we can execute the setContext method or add elements to the view.

The SetContextView method refers to the resource layout.

So let's take a look at this.

The main AXML will open in its assigner by default but let's switch to the source.

This is an XML file that uses the Android schema

to describe how an Android view is drawn.

You can see the button that was counting our clicks in the template project.

You can remove the Button tag completely, but leave the linear layout so

that we can add our own control.

We can start with the EditText control.

Make sure to set the Android id to something that starts with

@+id and a name.

This will add the people entry to the resource id

namespace as a pointer to this control when compiled.

The at sign indicates it's a pointer and

the +id indicates it should be added to the id resources.

We will need the resource id peopleentry later when we interact with it.

You can add the android:layout_width to match parent and

to layout_height to wrap_content so that size will be reasonable.

Now, add a button with an Android text that uses @ string calculate, like the id.

This is a pointer to a string value with the key calculate.

We need to add the value to the string resource.

Open the string's XML in the resource values folder.

Add a string tag with the name calculate, and

set the content to the string you want to display on the button.

The last control for

now is a TextView which will display the results of our pizza calculation.

This is very simple, but make sure to set the android:id.

Now, let's take a look at the MainActivity again.

Now that we're past the SetContentView, we have a button and a Click event.

Remove them so we can do our own.

Since we don't wanna interact with all three controls,

let's make some variables to hold references to them.

Start with the EditText control and set it to a variable peopleEntry.

To get a reference to the run time instance of the control we

must use the FindById method.

Using the generic version of the method,

we will indicate the type of the control, and pass in the reference ID.

You will notice it's not available in Resources Id if we've not compiled yet.

So to get the references to work, we must build the project so

that all the new Ids and strings can be compiled into the resource namespace.

You can simply right-click on the Android project and

build it or Shift+F6 if the project is already selected.

Now that we have the Resource.Id using intellisense

we can find the rest of the controls in the same way.

Next we want something to happen when we click the calculate button.

So we add a Click event to the control.

Using an in-line delegate is the simplest way to add this event.

First, we need to get a number of people we want to serve

by getting the text value of the peopleEntry control.

Parse the string as an int then simply divide it

by 3 to get the number of pieces needed.

I know this is a very simple calculation, but we can do more later.

Now that we know how many pizzas, set the pizzaCount TextView to the number.

Since it's a string property, we need two string band.

Next, we'll get our development environment ready so

we can debug our app and deploy it onto a simulator or a device.