Building a Xamarin Android app - part 1

Jim Bennett | Jan 13, 2016

I’ve got a bit of time off between finishing my career as a slave to the world of finance IT and starting a new and exciting job as a Xamarin mobile app developer in New Zealand, so I thought I’d try to brush up on my Xamarin.Android knowledge as in the past I’ve mainly focused on iOS.

So to help me do this, I’ve decided to build and publish an app, and document the process. So over the next few posts I’ll be covering the development of Stupendous Counter - the most amazing counter app ever!

Stupendous Counter

The purpose of this app is simple - to count things. Think of it as an automated version of something like this:

Click counter

Obviously being an app it should be a bit more advanced, so I’ll be adding multiple named counters, count history with fancy charts, location based counts and other funky tools.


First thing to do is to design the UI and flow of the app. I find this a good way to start as it gives me a feel for the views I need to create, the structure of the data I need to store and manipulate and allows me to test the UI out on paper before committing to writing code.

I’ve been playing with a few tools to aid in design, and currently using Fluid UI. It has a free tier that allows wireframe design, which is what I’ve been using. As well as allowing you to wireframe your UI, you can also setup transitions between screens to test out your UI flow.

The design I’ve come up with is a fairly boring, bog standard Android app with all the usual bits - a navigation drawer that’s poor UI, a hamburger menu and a floating action button that does something you don’t do very often.

Here’s a screenshot of the final design for the first version of the app: Final UI design

And heres the transitions:

UI transitions

For the colour scheme I used Material Palette which is an awesome tool for choosing colours that work well together in a material design app or website. As a traditional developer I’m bad at design and UI so I enlisted the help of my 3 year old daughter to choose the colours - a process that took ages as she was enjoying ‘playing colours on daddy’s computer’.

Colour scheme

Let’s get coding

And the best way to write code? Get a tool to do it. To create the basic app structure with styles, navigation buttons etc. you need a lot of boiler plate code. Luckily James Montemagno from Xamarin has done the hard work for us with his Xamarin.Android templates for Visual Studio. These templates provide the boiler plate code for a basic AppCompat app, or an AppCompat app with a navigation drawer.

New project types

To start with, I’m going to create a Navigation Drawer App called StupendousCounter.Droid. Note the name ends in .Droid, not .Android - otherwise you get a load of namespace clashes with the Android namespace).

Keep calm and .Droid it

Once the app is created, it looks like this:

Initial navigation drawer app

First thing to do is to make it more like what I’m after. The App name is wrong, the colours don’t match the scheme chosen by my daughter.


Setting the colours is easy. In the template there is already a style defined in Resources/values/styles.xml which references colours defined in Resources/values/colors.xml. In the colors.xml file are a set of colour properties that match the output from Material Palette:

Colour values from material palette

These colours can be downloaded as an XML file and the values copied in - you can’t just drop the xml file in as the names don’t write match - for example it’s primaryDark in the template generated code and primary_dark in the material Palette output, but it’s pretty obvious which value to copy into each field. Once done the app looks a bit more like what we’re after:

Correctly coloured app

App name

The App name is in two parts - first the app name in the manifest file which defines the name given in the app settings, second the activity name that appears on the launcher. The app name in the manifest file (Properties\AndroidManifest.xml) is defined as android:label="@string/app_name", so correctly referring to a strings resource file located at Resouces\values\strings.xml. This is the recommended way to handle all text in your app so that you can easily localise it as described on the Android developer docs. Setting the app name is therefore nice and easy, just change the strings.xml to have <string name="app_name">Stupendous Counter</string>. You may need to restart you emulator after re-deploying the app - XAP doesn’t update the name in the settings until you restart.

The main activity is not set up like this though - the template creates it with a hard-coded label of “Home”. I’d like this to match the app name so it’s consistent, so it’s a simple case of changing it to match the manifest: [Activity(Label = "@string/app_name", ...)]. Android uses the @ symbol to indicate a resource, so this syntax will correctly load the activities label from the string resources.

Once done it looks like this:

App settings


App icon

Done! Now we have a nice navigation drawer based app shell with the right name and the correct colours. In the next part we’ll start adding some functionality. The code for this is on Github here: The code in the Part1 branch is the code for this part. The changes we make in later blog posts will be in other branches.

Some useful bits

Here’s a couple of useful tips I cam across when writing this:

Debugging XAP when using a VM

My developer setup is a MacBook Pro running Windows 10 through Parallels and using Visual Studio 2015, with Xamarin Android Player installed as a Mac app, not a windows App (I use it from Xamarin Studio running on the Mac as well, so saving space/download time when upgrading etc. by only having it once). It’s pretty easy to run and debug Android apps on a player running natively on the Mac from VS on a Windows VM - instructions are here.

Big shoutout to Cockos

The animated Gifs in this blog post were captured using LICEcap from Cockos, an awesome free .Gif capture tool.

And as a side line I'll also be listing the music I'm listening to when developing. Right now I'm listening to 'The Shocking Miss Emerald' by Caro Emerald.

Note - this is an affiliate link - if you click here and buy I get a small cut.