Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We'll take a look at the Android designer in Visual Studio and briefly at the axml that it generates. Then we'll get a reference to the presentation elements we created in the designer and hook them to our pizza service to handle calculations and return results.
Additional Learning
To learn more about Android development, check out the courses and workshops available on Treehouse.
When working on a multi-platform mobile
app it's hard to decide where to start.
0:00
You could start with either the business
logic or the user interface.
0:06
We will take a user interface first
approach and start with Android,
0:11
then iOS, and then do some
refactoring to build our shared code.
0:15
As we build out Android and
iOS versions of our app
0:20
I'll walk through each of the steps we'll
need to take in order to finish our app.
0:25
Familiarity with Android or
iOS will be helpful, but
0:30
not necessary, in order to follow along.
0:34
If you'd like to learn
more about Android and
0:38
iOS development, see the teacher's notes
for links to resources that can help.
0:40
Let's start with opening
MainActivity in the Android project.
0:46
All activities must inherit from
the activity base class, and
0:50
should override onCreate so
0:53
that we can execute the setContext
method or add elements to the view.
0:56
The SetContextView method
refers to the resource layout.
1:01
So let's take a look at this.
1:05
The main AXML will open in its assigner by
default but let's switch to the source.
1:08
This is an XML file that
uses the Android schema
1:14
to describe how an Android view is drawn.
1:18
You can see the button that was counting
our clicks in the template project.
1:21
You can remove the Button tag completely,
but leave the linear layout so
1:25
that we can add our own control.
1:30
We can start with the EditText control.
1:33
Make sure to set the Android id
to something that starts with
1:35
@+id and a name.
1:38
This will add the people
entry to the resource id
1:42
namespace as a pointer to
this control when compiled.
1:45
The at sign indicates it's a pointer and
1:48
the +id indicates it should
be added to the id resources.
1:51
We will need the resource id peopleentry
later when we interact with it.
1:56
You can add the android:layout_width
to match parent and
2:01
to layout_height to wrap_content so
that size will be reasonable.
2:04
Now, add a button with an Android text
that uses @ string calculate, like the id.
2:09
This is a pointer to a string
value with the key calculate.
2:16
We need to add the value
to the string resource.
2:31
Open the string's XML in
the resource values folder.
2:35
Add a string tag with the name calculate,
and
2:39
set the content to the string you
want to display on the button.
2:41
The last control for
3:01
now is a TextView which will display
the results of our pizza calculation.
3:03
This is very simple, but
make sure to set the android:id.
3:08
Now, let's take a look at
the MainActivity again.
3:17
Now that we're past the SetContentView,
we have a button and a Click event.
3:21
Remove them so we can do our own.
3:26
Since we don't wanna interact
with all three controls,
3:28
let's make some variables
to hold references to them.
3:31
Start with the EditText control and
set it to a variable peopleEntry.
3:35
To get a reference to the run
time instance of the control we
3:41
must use the FindById method.
3:44
Using the generic version of the method,
3:47
we will indicate the type of the control,
and pass in the reference ID.
3:50
You will notice it's not available in
Resources Id if we've not compiled yet.
3:55
So to get the references to work,
we must build the project so
4:38
that all the new Ids and strings can be
compiled into the resource namespace.
4:42
You can simply right-click
on the Android project and
4:47
build it or Shift+F6 if
the project is already selected.
4:50
Now that we have the Resource.Id
using intellisense
4:55
we can find the rest of
the controls in the same way.
4:58
Next we want something to happen
when we click the calculate button.
5:01
So we add a Click event to the control.
5:05
Using an in-line delegate is
the simplest way to add this event.
5:08
First, we need to get a number
of people we want to serve
5:13
by getting the text value
of the peopleEntry control.
5:17
Parse the string as an int
then simply divide it
5:21
by 3 to get the number of pieces needed.
5:24
I know this is a very simple calculation,
but we can do more later.
5:28
Now that we know how many pizzas,
set the pizzaCount TextView to the number.
5:35
Since it's a string property,
we need two string band.
6:01
Next, we'll get our development
environment ready so
6:17
we can debug our app and
deploy it onto a simulator or a device.
6:20
You need to sign up for Treehouse in order to download course files.
Sign up