Top

Grial UIKit review

Grial UIKit review

A few weeks ago we got access to the Regular version of Grial UIKit for Xamarin.Forms. Grial UIKit comes with more than 30 awesome Xamarin.Forms’ XAML screens which showcase this Xamarin Component, as well as, support for customization capabilities of Xamarin default controls, providing and unified Grial Theme that looks and feels great on every platform.

icon_114x114

Introduction

Here, in Plain Concepts, we are always eager to leverage every platform in which we develop our apps for.

We try to know as close as we could the strengths and weaknesses of the native UI frameworks of our platform apps, its customization capabilities, etc…

That’s the reason why Grial UIKit grabbed our attention, so I decided to analize it from the following perspectives:

  • Size
  • Dependencies
  • Number of controls and screens
  • Degrees of freedom when it comes to customization
  • Performance
  • Animations
  • Binding support and MVVM design
  • Multiplatform suport

Let’s start with it.

Analysis

Size

In this point, Grial UIKit really shines.

Grial UIKit consist in 3 binaries, a PCL (Profile78), a Xamarin.iOS Unified binary and a Xamarin.Android one.

Their corresponding sizes are:

  • UXDivers.Artina.Shared.dll (PCL): 17 KB
  • UXDivers.Artina.Shared.iOS.dll: 12 KB
  • UXDivers.Artina.Shared.Droid.dll: 25 KB

They are great if you want to include Grial UIKit in your apps and pose no overhead at all.

I’m really glad UXDivers guys (Grial UKit developers) take care of this important aspect.

Along with those binaries, we also got a Grial UIKit sample solution.
It comes with more than 30 XAML screens, showcasing beautiful interfaces, with a delighful and carefulness design from the visual aspect and the code perspective.

This sample is composed of 3 projects, the first one is a PCL named Grial, with the styles definition, XAML views and cells, converters and VM’s for views.
The second is a Xamarin.Android project and the third is a Xamarin.iOS one, both making use of the PCL described above.

As I mentioned previously, XAML contained in the PCL is delicious, well formatted, with a reasonable length, with separation of concerns and good arrangement.

We are facing screens designed by XAML purists.

Dependencies

Let’s move to the dependency topic.

We are again taken by surprise. No external dependecies, except for obviously, Xamarin.Forms. This is another desirable characteristic to have, to avoid the infamous Dependency Hell (https://en.wikipedia.org/wiki/Dependency_hell), that you all have suffered.

The contributed XAML in the PCL project is not much coupled with the project itself, just with the styles defined in the App.xaml. In the Xamarin.Android project, we have a heavy native theme personalization (based on Holo.Light) to adapt it to the Grial Theme. In the Xamarin.iOS one, this native theme personalization comes in the form of an Appearance.cs file.

Appearance.cs

Appearance.cs

This will speed up us when we reuse screens or just parts of these XAML files in our personal projects.

Number of controls and screens

We will now enumerate the Grial UIKit screens categories shipped in the sample project ,which could serve us as inspiration for our apps.

  • Articles
  • Dashboards
  • Ecommerce
  • Logins
  • Messages
  • Navigation
  • Social
  • Walkthrough
  • Common
  • Settings
  • Theme

Let’s move now to the analysis of the controls we have available with Grial UIKit. We see them platform by platform, first the common ones.

The PCL metadata shows that the only control with new capabilities we have available is CircleImage, with a couple of public properties (BorderColor and BorderThickness). To use this control in Android or iOS we will need to register the corresponding renderer.

[code language=”csharp”]
// CircleImage renderer
[assembly: ExportRenderer(typeof(UXDivers.Artina.Shared.CircleImage), typeof(UXDivers.Artina.Shared.ImageCircleRenderer))]

[/code]

According to our analysis, all Grial UIKit renderers extend the corresponding Xamarin.Forms ones. Therefore, we see that more than a set of new controls, in reality, we are facing a wide extension of the default Xamarin.Forms ones. Those are brought with renderers that inherit from those in Xamarin.Forms, and modify their appearance.

Other components available in the PCL are: Converters, Behaviors and Properties, all of them for the following controls: Entry, TableView, ProgressBar, Slider and Switch. Properties allow us to specify, using dependency properties, their appearance.

In Android, we have the following renderers which customize the appearance of the following Xamarin.Forms’ controls, depending on the selected topic on Android (accent colors, colors, state, etc.)

• Entry
• TableView
• Editor
• Label
• Switch
• ActivityIndicator
• ProgressBar
• Slider
• SearchBar

Regarding Xamarin.Forms’ cells, Grid UIKit also provides renderers for the following Cells:

• TextCell
• EntryCell
• ViewCell
• SwitchCell
• ImageCell

These renderers, in addition to changing internal properties of these controls to meet the look and feel specified in the Properties available in the PCL, adapt their appearance for smaller versions of Android API 21, which is very convenient.

Like CircleImage control renderers, we need to register them for visual customizations on Xamarin.Forms’ controls to be done.

In Android:

[code language=”csharp”]
// Common renderers
[assembly: ExportRenderer(typeof(Entry), typeof(UXDivers.Artina.Shared.ArtinaEntryRenderer))]
[assembly: ExportRenderer(typeof(TableView), typeof(UXDivers.Artina.Shared.ArtinaTableViewRenderer))]

[/code]
[code language=”csharp”]
// Cell Renderers (common)
[assembly: ExportRenderer(typeof(TextCell), typeof(UXDivers.Artina.Shared.ArtinaTextCellRenderer))]
[assembly: ExportRenderer(typeof(EntryCell), typeof(UXDivers.Artina.Shared.ArtinaEntryCellRenderer))]
[assembly: ExportRenderer(typeof(ViewCell), typeof(UXDivers.Artina.Shared.ArtinaViewCellRenderer))]
[assembly: ExportRenderer(typeof(SwitchCell), typeof(UXDivers.Artina.Shared.ArtinaSwitchCellRenderer))]
[assembly: ExportRenderer(typeof(ImageCell), typeof(UXDivers.Artina.Shared.ArtinaImageCellRenderer))]

[/code]
[code language=”csharp”]
// Android renderers
[assembly: ExportRenderer(typeof(Editor), typeof(UXDivers.Artina.Shared.ArtinaEditorRenderer))]
[assembly: ExportRenderer(typeof(Switch), typeof(UXDivers.Artina.Shared.ArtinaSwitchRenderer))]
[assembly: ExportRenderer(typeof(ActivityIndicator), typeof(UXDivers.Artina.Shared.ArtinaActivityIndicatorRenderer))]
[assembly: ExportRenderer(typeof(ProgressBar), typeof(UXDivers.Artina.Shared.ArtinaProgressBarRenderer))]
[assembly: ExportRenderer(typeof(Slider), typeof(UXDivers.Artina.Shared.ArtinaSliderRenderer))]
[assembly: ExportRenderer(typeof(SearchBar), typeof(UXDivers.Artina.Shared.ArtinaSearchBarRenderer))]

[/code]

In iOS, we see less coverage regarding renderers available on Android; we have the following:

• Entry
• TableView

And, as the cells, we have the same support available in Android.
We see, therefore, that not much infrastructure in iOS is necessary to customize the controls that Xamarin.Forms maps and meet the characteristics you specify in the Properties, in addition to those made in the file Appearance.cs.

Grial UIKit, in its regular version, provides a new control, CircleImage, based on the Xamarin.Forms’s Image control, which enables us to set border color and thickness.

There are plenty of Android native libs which provides Rounded Image controls with tons of options, as https://github.com/vinc3m1/RoundedImageView.

I miss more customization capabilities in CircleImage, as I found on the forementioned Android lib.

Likewise, Properties and Grial UIKit own renderers, adapt the appearance of most Xamarin.Forms’ controls colors and behavior specified in native topics (Holo theme, Material Design look and feel, etc.) in Android and iOS, which conforms the Grial Theme.

It also provides some Converters, ability to customize fonts used in the Label control and validation Behaviors that may be useful.

Degrees of freedom when it comes to customization

This section is closely related to the previous analysis and it is very important not to fall into the trap of engaging an UI framework that makes it impossible to remove it from your project with ease, or it controls you too much. In this point, Grial overcomes the exam again.

As we have seen, Grial UIKit extends the functionality of the default controls using renderers. We can inherit from them, are not sealed, and therefore we can extend its functionality, customizing many more native control features that Xamarin.Forms maps.

We have control over the Android styles.xml file to further customize Android native stuff and iOS file by editing the Apearance.cs one.

Performance

No performance penalty is observed while using the sample app in Android and iOS devices, what I see as a good point considering the level of customization that has undergone. Then, we have no surprises in this regard.

Just highlight one aspect in our tests on devices, we see the same performance problems as most Xamarin.Forms controls present regarding to loading of list items and load times of XAML files.

These tests were done with the 1.4.4.6449 version of Xamarin.Forms, without enabling the assembly-level attribute, XamlCompilation, therefore I assume that as this sample does an extensive use of XAML, we expect a noticeable improvement in performance if this attributte were used.

[code language=”csharp”]
[assembly: XamlCompilation (XamlCompilationOptions.Compile)]

[/code]

More info on this Xamarin.Forms feature: https://developer.xamarin.com/guides/cross-platform/xamarin-forms/user-interface/xaml-basics/xamlc/

Animations

While the sample provides some customization over the default Xamarin.Forms’ controls, animations and some custom parallax animations, I miss Grial UIKit controls to incorporate this functionality as an standard.

There are a few Android controls which provide built-in parallax animation, as ParallaxScroll (https://github.com/nirhart/ParallaxScroll).

View post on imgur.com

Chat message list on iOS

View post on imgur.com

Parallax effects in Android

Binding support and MVVM design

Regarding this point, Grial UIKit delivers what it promises.

Most of the screens use View Models to bind data, although we still see some code-behind to handle app actions in the sample app. It also allows us to use Xamarin.Forms binding system in their controls (CircleImage).

Grial provides Properties for certain controls, which are Xamarin’s BindableProperty, so we can use them seamlessly into our files and bind XAML ones to those from our VM’s.

Multiplatform suport

In this section, is remarkable the lack of support for Windows Phone.

Xamarin.Forms supports it and we believe it can be decisive if we plan to carry our apps to Windows Phone. While the market share of Windows Phone is small and not worthwhile, we believe Grial does no make profit of this Xamarin.Forms advantage.

Conclusions

We prefer the reader to draw their own conclusions and, of course, expand on comments from our blog with your experiences and, if needed, correct us ours.

Finally, just highlight again the Grial UIKit sample that goes along with the binaries, the number of screens and options shown in are awesome. The sample is, if anything, more important than the binary, in the sense that gives ideas the way in which interfaces are designed with Xamarin.Forms and Grial UIKit.

Summary

To summarize, Grial UIKit is a really well done Xamarin.Forms component, offers a nice customization of its controls, with support in the case of Android for devices with API Level <21 and on iOS starting from iOS 8+.

Our verdict is: a component crafted with care for designers and devs. We encourage you to acquire Grial UIKit for your projects:

http://grialkit.com/

Juan Antonio Cano

Post a Comment