Common Libraries Used in Xamarin Forms App Development

Introduction

In this article, we will discuss the libraries that are commonly used in mobile app development. The libraries discussed herein are from the perspective of developing an overall solution. They also suggest the common practices followed in app development.

Description

The following are the commonly used libraries:

FreshMVVM

The apps developed these days use the MVVM pattern. This pattern helps in segregating the logic from the user interface which, in turn, results in clean and maintainable code. There are different MVVM toolkits available—MVVM Light and FreshMVVM. FreshMVVM is one of the popular and simpler toolkits used to implement the MVVM pattern in Xamarin forms.

FreshIOC

In addition, the FreshMVVM package also includes an IOC (Inversion of Control) container. This helps in registering and resolving the different services used in the app.

For example, there is a requirement to share text messages. Because sharing is a platform-level feature, this needs to be implemented in Android and iOS projects. To communicate from Xamarin forms to the platform level projects, we will use dependency service and dependency injection.

We first define an interface, ‘IShareInfo.cs,’ in the Xamarin Forms project. This interface has a method named ‘ShareText’. The interface then is registered with the IOC container in App.Xaml.cs:

FreshIOC.Container.Register(DependencyService
   .Get<IShareInfo>());
var shareService = FreshIOC.Container.Resolve<IShareInfo>();
MainPage = new ShareMessageAppPage(shareService);

This service then is passed as a parameter to the page model’s constructor or to the code behind. In this example, the constructor of the code behind is as shown next:

IShareInfo _shareInfo;
public ShareMessageAppPage(IShareInfo shareInfo)
{
   InitializeComponent();
   _shareInfo = shareInfo;
}

FFImageLoading

The FFImageLoading library provides a quick way to load and cache images. It supports images as a URL, from resource files, and also from stream content. It also supports SVG image formats. In addition, it also provides image transformations, such as round images. It has the provision to display a placeholder image while the image is being loaded and also to display an error image when the image is not found.

To use FFImageLoading, add the NuGet package to the Xamarin Forms project and, in the XAML, file add the references for the FFImageLoading as shown in the next code snippet:

xmlns:ffimg="clr-namespace:FFImageLoading.Forms;
   assembly=FFImageLoading.Forms"
xmlns_ffimgsvg="clr-namespace:FFImageLoading.Svg.Forms;
   assembly=FFImageLoading.Svg.Forms"
xmlns_ffimgtransform="clr-namespace:FFImageLoading
   .Transformations;assembly=FFImageLoading.Transformations"

Here’s how you can display a normal image as a circular image:

<ffimg:CachedImage WidthRequest="120"
HeightRequest="120"
Aspect="AspectFill"
LoadingPlaceholder="placeholder.gif"
Source="{Binding ImageUrl}">
<ffimg:CachedImage.Transformations>
<ffimgtransform:CircleTransformation />
</ffimg:CachedImage.Transformations>
</ffimg:CachedImage>

To display an image in SVG format, use the following code:

<ffimgsvg:SvgCachedImage WidthRequest="20"
HeightRequest="20"
Source="image.svg" />

ModernHTTPClient

HTTP calls are networking calls and are platform specific. iOS uses NSURLSession to do HTTP calls and Android uses OkHttp. ModernHTTPClient hides the platform-level complexities and makes it simple to call from the Xamarin Forms project. We still use the HttpClient of the System.Net.Http, and pass an object of NativeMessageHandler, a class in ModernHttpClient. Here’s an example:

var httpClient = new HttpClient(new NativeMessageHandler());

NativeMessageHandler also can be used with OAuth authentication by using ThinkTecture. Add the package ‘Thinktecture.IdentityModel.Client’ to the Xamarin Forms project. When creating the OAuth2Client object. pass the message handler as an object. Here’s a way to do that:

var handler = new NativeMessageHandler()
{
   AutomaticDecompression = DecompressionMethods.GZip
};

return new OAuth2Client(<Uri address>, clientId,
   clientSecret, handler,
OAuth2Client.ClientAuthenticationStyle.BasicAuthentication);

Where Uri address is the endpoint URL for authentication, clientId is the string that uniquely identifies the app, clientSecret is also a string. The handler is an instance of NativeMessageHandler (ModernHttpClient). And, the last parameter is the authentication style, which is set to Basic.

FlowListView

Flowlistview is another helpful library that helps in displaying the multiple records in a row (in multiple columns). The default list allows only one record per row.

Telerik Suite

Telerik provides a list of controls for Xamarin Forms and also for platform-level projects. The sideDrawer, chart, and list view are a few of the controls that can serve many requirements. Side drawer can be used to display different sets of options or action items. It also can be used for context menus. There are a variety of chart options provided by Telerik. However, it’s a paid set of controls.

GCM Client Component

Push notifications is one of the most common features of a mobile app. To enable push notifications on Android, we need a GCM Client component added to the Android project. We define a class that inherits from the GCMServiceBase and is decorated with a Service tag.

[Service]   // You must use the Service tag
public class DemoGcmService : GcmServiceBase
GcmClient.Register(Context, SENDER_IDS);

GcmClient.Register uses the project ID registered in the firebase console site. This then can be integrated with the Azure notification hub to send notifications.

Summary

In this article, we reviewed the common NuGet packages and components that can be used in app development. The FreshMVVM package helps you to follow the recommended pattern when developing apps. OAuth authentication is also a common scenario when accessing APIs from the app.

References

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read