Xamarin and MvvmCross on Android

Recently we had some time trying out Xamarin and MvvmCross in our Mobile Architecture competence area at Jayway and today I will try to share our experience. It will be focused on how to do Mvvm on Android. Final code is available at GitHub.

Xamarin

We start with Xamarin, which is a cross platform environment built upon mono. You write your code in C# and it will run as native code on iOS and Android. You basically share your code with a PCL and you got full Nuget support so you can use your favorite packages. The UI layer is done natively so for Windows Phone you got xaml and for Andorid you got your axml. If you are targeting iOS you need a Mac or you won’t have a designer, you could however build your UI with code. Xamarin comes both as a standalone studio or you could use Visual Studio.

MvvmCross

MvvmCross is a library to enable usage of the Mvvm pattern in Xamarin apps when targeting iOS and Android. With this library it’s really easy to share viewmodels between the apps instead of creating separate for each platform. It also enables bindings on Android and iOS.

MvvmCross is opensource and developed by awesome people.

It’s time for some examples!

Creating a Xamarin project

I’ve already installed Xamarin and will use Visual Studio 2013. I will first create a new solution and when Xamarin is installed it also installs Android project templates and I will choose the Android Ice Cream Sandwich Application template as it is the one with highest API level of the provided templates.

1

To this solution I will then add a Windows Phone 8 project and a PCL with Android checked. 

2

Add a reference to the PCL in both the Android and Windows Phone 8 project and you are good to go.

Adding MvvmCross

It’s time to add the MvvmCross. Open the Nuget Package Manger and search for MvvmCross and install it to all three projects. It will add a bunch of code and a Todo file in each project. Follow the instructions in this file, note that some steps are done automagically when you installed the Nuget package.

Android bindings

In Android it’s really easy to add a binding in the view from the viewmodel. This is the default FirstView.axml:

If we look at the TextView we find the magic in the local:MvxBind property where we specify that we want to bind the Text property on the TextView to the Hello property on the Viewmodel. That’s all that’s needed to create a binding.

Android ObservableCollections with ItemTemplate

First we add a ObservableCollection in our Viewmodel.

And our Person class:

And in our Android project we add a new .axml file into the Resources/Layout folder called item_template.axml. In this file we will declare our template.

It’s just a TextView with a binding. In our view we can then add a list and bind it to the observablecollection and set it to use our template. We will use a MvvmCross control that has support for ItemTemplate:

That’s it, as soon the list has a new item it will update the UI.

Commands

When clicking a button we want to route the click directly to the Viewmodel and this is easily done with declaring a ICommand in our Viewmodel:

This command will show the SecondViewModel with the help of ShowViewModel which is a helper method from MvvmCross.

In our Android view we can create a button and bind the click to this command:

 

Multiple bindings on Android

What about multiple bindings? If we try to add a second binding we will get an error:

To solve this we add a ; in our binding string:

This will bind the Click to our command and the Text to the ButtonText property in our Viewmodel.

Github

Code is available at GitHub.

Resources

http://xamarin.com/

https://github.com/MvvmCross/MvvmCross

 

Leave a Reply