A look to Grial UI Kit V2

The main goal of Grial is to offer a set of controls and templates for Xamarin.Forms that lets you to create rich and beautiful user interfaces in an easy way.

Many thanks to UXDivers guys, they provided us of a license to take a look to their product 🙂

 

It has support for:

• Android 4.1+ (API Level 16).
• iOS 8.0+.

And includes:

• Templates and predefined views
• Controls
• Effects
• Animations
• Themes
• Icons

What’s new?

 

From previous to current version, new page templates, controls and three new themes have been added, with animations and tablets support.

Project creation

 

One of the new features is related with project creation. We can access to an administration portal called Grial Admin.

From this panel, we can create new applications giving them a name. Thus, we can download two type of projects:

• Full: It contains all samples and controls provided by Grial.
• Starter: Minimal project supporting Grial, with its libraries.

Both provide the same namespace and application name that we typed in the previous step.

After downloading the project, we should configure the access to NuGet packages adding a new repository to our Visual Studio settings. Just open Options > Tools > NuGet Package Manager > Package Sources.

 

It will be necessary to enter a correct user and password to have access to this repository.

 

Tablet optimizations

 

Now, you have also the chance to adapt different form factors for phones and tablets.

 

 

 

Apart from predefined templates, ready to work like a charm in both phone and tables, we can use now some new Responsive helper class. This helper defines the following properties:

• Default: Applies to all cases. This is the default value.
• Portrait: Applies to all devices in vertical orientation.
• Landscape: Applies to all devices in horizontal orientation.
• PortraitPhone: Applies only to phones in vertical orientation.
• PortraitTablet: Applies only to tables in vertical orientation.
• PortraitDesktop: Applies only on desktop devices in vertical orientation.
• LandscapePhone: Applies to phones in horizontal orientation.
• LandscapeTablet: Applies to tablets in horizontal orientation.
• LandscapeDesktop: Applies to desktop devices in horizontal orientation.

Here you have a code snippet to have an idea of how it works:

 


<Label
Text="{
artina:OnOrientationString
Portrait=IsPortrait,
Landscape=IsLandscape
}"
IsVisible="{
artina:OnOrientationBool
Default=true,
PortraitDesktop=false
}"
"/>

 

This text will be displayed in a different way depending on device orientation and it will be always visible in any case, except in vertical desktop mode. As you can see, it’s very easy to adapt your user interface to different orientations and devices using this approach.

Themes

 

There are some new predefined themes and build tasks that makes it possible to change your app theme even in runtime.

New controls

 

This is the controls added in this new release:

• TabControl: Tab control supported for both iOS and Android, that you can configure to be displayed on top or bottom of your page. It’s highly customizable.
• Badge: Numeric badge icon.
• CircleIcon: Circular images.
• Timeline: List with time line format.
• Rating: The classic rating control using stars.
• Repeater: List control with scroll customization, element size, etc.
• Walkthroughs: Easy way to create wizards.
• FontIcons: It lets you to show icons using a font as base. 1500+ icons already included.
• Lottie Animations: Included support to Lottie animations.

Grial analysis

 

In this section, some metrics will be commented before exploring given solution.

Package size

 

Grial is based on a set of different libraries.

PCL

• UXDivers.Artina.Shared.dll (50KB)
• UXDivers.Artina.Shared.Base.dll (13KB)

iOS

• UXDivers.Artina.Shared.iOS.dll (19KB)
• UXDivers.Artina.Shared.Base.iOS.dll (12KB)

Android

• UXDivers.Artina.Shared.Droid.dll (31KB)
• UXDivers.Artina.Shared.Base.Droid.dll (14KB)

To use effects, we should add other library:

PCL

• UXDivers.Effects.dll (7KB)

iOS

• UXDivers.Effects.iOS.dll (8KB)

Android

• UXDivers.Effects.Droid.dll (93KB)

And the same happens with some controls:

PCL

• UXDivers.Artina.Shared.Tab.dll (20KB) – Control TabControl
• UXDivers.Artina.Shared.Repeater.dll (17KB) – Control Repeater

Dependencies

 

To improve general performance, some new dependencies have been added:

• FFImageLoading
• Lottie Xamarin.Forms
• WebP.Touch (iOS)
• Xamarin.Forms (of course!)

In the PCL project, we found a XAML code that is well decoupled, only having some direct dependencies with the styles defined in App.xaml file. For Xamarin.Android project, we can find some customization from native themes. For Xamarin.iOS project, we have also look and feel customization located at ThemeColors.cs file.

Performance

 

Grial uses XAML compilation, cell recycling in list views and other features included in Xamarin.Forms to improve the performance. After some tests in emulators and physical devices, and using Xamarin Profiler to study some metrics, we have not found any problems or penalties related with this aspect.

 

MVVM

 

Pages with different templates, layouts and controls are related to a ViewModel class. Pattern implementation and separation of concerns are perfectly defined, making it easy to use this pattern and apply it to Grial components. For example, controls like TabControl, add some dependency properties to control behavior and appearance of this component.

 

Cross platform support

 

We have support for iOS and Android, with robust and very close rendering of each view for each platform and condition. The bad part is that we don’t have support for UWP (Universal Windows Platform), a platform that makes it possible to create apps for Windows 10 devices like PCs, tablets, phone, Xbox One, Surface Hub, IoT or HoloLens.

 

In conclusion, thanks to Grial we have access to a lot of templates with common use views, and for sure are necessary in most of our customer applications (product detail view, sign in, register, chat, settings page, etc.) with a nice design and excellent support to different platforms and form factors. Provided themes and new controls are great too! No doubts, it’s a good choice to improve development and delivery time to our Xamarin developments :).

 

Note: this post is a translation from original post from my team mate Javier Suárez. Thanks!

 

More information

• Grial UI Kit
• Grial UI Kit documentation
• Some screenshots
• Our previous post: Grial UIKit Review