Add MVVM to Your Xamarin Project with MVVMCross: Android

One of the most beautiful things about developing in Xamarin is that you’re allotted all the benefits from working with C#, a language very familiar to many developers working on the Microsoft Stack. For those developers, MVVM (Model-View-ViewModel) is probably already a very well drilled in concept. For those that are new, MVVM is a coding paradigm that allows developers to write code with separation of concerns in mind. The user interface is effectively separated from any logic the program may need. To learn more, check out this awesome blog post on it.

Enter MVVMCross

MVVMCross is an awesome framework that allows for the development of cross platform mobile apps written in Xamarin that also adheres to MVVM. While things like Data-Binding are supported in Xamarin, helpful features of MVVM, like Commanding for instance, aren’t. That’s the need that MVVMCross fills. It allows for the separation of concerns mentioned earlier as well as a reliable and easy way to run independent unit tests on our code. In short, it’s super useful to have.

Getting Started

The first thing to do is start a new Xamarin project. This post already assumes you have Xamarin installed as well as Visual Studio running on your PC. You can grab Xamarin for free here.

Let’s get started by creating a new Portable Class Library project in Xamarin. Name it whatever you like.

new proj

Next up is adding MVVMCross as a NuGet package. Right click your solution and select “Manage NuGet Packages”.

nuget

In the “Browse” section, search for the “MVVMCross Starter Pack” and make sure to download only the starter pack. Once selected, make sure to check all 4 projects in your solution so that the references are in every mobile platform. As you may have noticed, the Windows Phone project only references Windows Phone 8.1, but don’t worry, the next post will detail how to add a Windows 10 UWP project in alongside the others.

nugetinstall

Finally, hit “Install” to add your package. MVVMCross comes ind and generates some boilerplate code to allow you to get started. There are a few steps we’ll have to do in order to get up and running with a project.

For Android

If you attempt to build the app as-is, it’ll fail. The first thing we need to do is head over to our Android project and open the “Setup.cs” file. In the “CreateApp” function, you’ll notice that it returns Core.App(). Replace “Core” with the name of your solution. In my case, it’s just “Sample”.

sample

 

Sweet! That fixes one issue, but you’ll notice that if you attempt to build, your app still won’t run. Instead, you’ll get a wonderful error message stating “No resource found that matches the given name (at ‘icon’ with value ‘@mipmap/icon’).” That’s because we have no “mipmap” folder. The first thing we need to do is delete MainActivity.cs”. That file is auto-generated by Xamarin, but MVVMCross has another entry-point, “FirstView”. Next, head over to the “SplashScreen.cs” file and change the “Icon” value to “@drawable/icon” as drawable is the folder the icon is sitting in.

drawable

Now build and run the Android project. You should be presented with a textbox that says “Hello MVVMCross” and a label that reflects what we type. We did it!!

em

 

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *