Nov.25

Building an App with Xamarin, Part 1

So I started to play around the Xamarin tools recently and thought I would post my progress as I go along. I’m a late comer to the mobile app field. Most of my work has been web based to-date. However, I really like the concept of Xamarin because it allows me to use some current skills (C#) and merge it with mobile apps.

This post will be very basic so if you’re proficient with Xamarin you may want to wait until the future posts come out. Follow me on Twitter (@JeremyFoltz) or sign up to get the posts delivered directly to your inbox.

When you create an new project using the provided templates, your project will look something like this:

ProjectTree

Here’s how it all breaks down:

Screen Layout

The *.axml files under the layout directory are the screens or layouts (aptly named!) of your app.

MainAXMLYou’ll notice that this page is super simple. It only has a single button and the button’s text the record_message string. This threw me a bit at first because it didn’t make much sense for the button’s text to be “string/record_message”. Then I saw the Strings.xml file and it all made sense.

StringsXML

Ah ha! There is  a string called “record_message”. So this is were you set the text for the various controls and buttons. So how does this screen look?

MainAXMLContent

The Glue

So what holds it all together? That would be the MainActivity.cs file. It’s at the bottom of that project tree above. It handles (as the name would suggest) all of the activity for the Main page such as handling button clicks/tabs, opening new screens, etc.
MainActivity

Notice the code on line 27. It’s setting the button’s (myButton) click handler to count each time the button is tapped.

Run It!

MyFirstAndroidApp

MyFirstAndroid app shows up on the bottom row.

You can run the app in an emulator for testing purposes so you don’t even need to have a device handy for basic testing. Here’s what our super simple Android app looks like.

My app shows up on the screen at the bottom with a default Android image.

MainScreen

Remember that click even handler we added in the MainActivity.cs file? Well, if we click the button, here is what happens.

MainClickEvent

Opening a New Screen

So let’s tweak our little app to make the button open a new screen.

Create the axml file:NewMessage

Now, let’s create the class for NewMessage:
NewMessageCS

And voila! We have a second screen with a button.
NewMessageScreenCapture

Wrapping Up

I know this post was very simple but hopefully it helps someone just getting started with Android developement using the Xamarin tools. If you have any questions or things you would like to see in the upcoming series, please give me a shout!

Programming,Mobile
Share this Story:
  • facebook
  • twitter
  • gplus

About Jeremy Foltz

Leave a comment

Comment