A Contributed Article by Saviant Consulting.

Xamarin helps in the deployment of cross-platform native mobile applications, which provide best user experience and performance. It offers up to 75% code sharable across platforms such as Android, iOS, and Windows. Android mobile applications are developed using either Xamarin Studio or Visual Studio with Xamarin. Android installed.

To improve the maintainability, portability, and testability of mobile applications, it is essential to employ a loosely coupled architectural pattern. MVVM pattern is one such architectural pattern that separates the code development concerns into Model, View, and ViewModel. This pattern stands as the preferred choice for cross-platform mobile application development scenarios. Various open source toolkits such as MVVM Light, MVVM cross, and Intersoft Crosslight are available that bring MVVM style to the mobile app development platform. Thanks to MVVM Light Toolkit, it has become possible to build enterprise-grade apps using MVVM pattern in Xamarin framework.

 

MVVM Light Toolkit helps in accelerating the process of cross-platform Xamarin app development. It decouples the services to create easier and uncluttered mobile applications. This toolkit mainly emphasizes on the "ability to blend" aspect of building applications. Following are the elements of the MVVM Light Toolkit:

1.      View: A front-end user interface, such as Android, iOS or Windows

2.      ViewModel: An entity which exposes the data and its properties

3.      ViewModel Locator: A key element of MVVM Light that registers custom ViewModels and services like Navigation service and Dialogue service

• Navigation Service: This helps to navigate to the different ViewModels irrespective of platform-specific code
• Dialogue Service: This helps to provide custom dialogues or alerts without writing the platform-specific code.

Let's take a walk through how MVVM Light Toolkit ropes in MVVM pattern for the Xamarin Android platform.

In Xamarin mobile application development for Android, the first step is to consume Portable Class Library (PCL) to make code sharable across other platforms. PCL holds the sharable business logic code in the form of ViewModels. While adding PCL in the Xamarin projects, it is necessary to specify the platforms in which the business code will be shared.

As the MVVM Light Toolkit enables Model View ViewModel pattern, the libraries specific to the toolkit have to be added from NuGet to support the PCL functionality. This MVVM library also helps to build a dependency injection for platform specific services. After consuming PCL, the next step is to define properties, methods, and business logic in ViewModels and define UI in View. Further, the final step is to link both these layers through the data binding procedure on Xamarin Android Framework.

The advantage of writing business logic in ViewModel and communicating with View via View Model, leads to separation of concerns and reusability of code across other platforms i.e. Android, iOS and Windows Phone. Thus, MVVM Light Toolkit for Xamarin Android helps in developing truly native mobile apps, which are easy to maintain, test and upgrade.

Native App based mobility solution for Food Services Company using the MVVM Light Toolkit and Xamarin

A leading food service provider based in UK, has deployed a mobile app in their Real-time Supply Chain Visibility project. A Windows phone mobile application was developed using MVVM Light with Xamarin Framework. The mobile app was designed to support the on-field operational staff to make easy delivery of food items in remote areas. The company is now planning to deploy an Android application, which functions similarly to their existing Windows app. As more than 75% of the shared code is ready-to-use in Xamarin, development of Android app will become easy, thus ensuring faster go-to-market.

Sample Data Binding implementation using the MVVM Light toolkit with Xamarin Android Framework

Data binding links the business logic and UI, and provides a clean workflow. The binding principles work based on low coupling levels between View and ViewModel properties, and declarative programming. The bindings are declared at the time of page creation, and can be evaluated on demand. The below code snippet shows a sample binding implementation in Xamarin Android.

 

Sample code snippet of MVVM data binding implementation  

In the code snippet, two functions are majorly used while implementing MVVM data binding:

1.      SetBinding - A function to establish a permanent one-way relationship between ViewModel and View. Here, the binding is established between the ProgressPercentage property of View model and the Android Text View that displays the progress percentage. If the ProgressPercentage Property flag gets changed in the View model due to any business logic or command, the binding helps View to act accordingly.

2.      SetCommand - A function to establish command property upon user action. It provides the ability to bind a View event or action with a written command in ViewModel. That is, user action like tapping the screen, actuates the command to perform business logic, data operations and respond to user actions.