Testing Telerik UI for Xamarin

Disclaimer: This post is not sponsored and contains my honest review of the product.

A month ago Sam Basu from Telerik/Progress asked me to check out Telerik Xamarin UI tools and write a blog post about my experience. I didn’t have a chance to check out that Xamarin UI Component suite before, so I thought it was a good opportunity to do so.

I started by signing up for a trial. It was really easy: I just created a new Telerik account (if you already have one, it’ll be even faster) and then was redirected to an automatic download page. By default, you’re getting an .exe file to setup Telerik Xamarin UI, but there’re three other options:

  • MSI installer for Windows
  • Zip archive for manual installation on any platform
  • PKG installer for Mac

I’m using Visual Studio 2019 on Windows 10, so I used the .exe file for a guided setup of the component suite. After the installation new Telerik Xamarin UI Application will be available in the create menu, but it’s not required for using the Telerik controls.

Telerik packages in NuGet

I decided to create just a regular Xamarin.Forms solution, so I could try a couple of controls from the Telerik Xamarin UI library. After creating a new solution it’s important to add Telerik NuGet source: https://nuget.telerik.com/nuget in Visual Studio. When the package source is connected, you’ll be able to search for “Telerik.UI.for.Xamarin” packages and see something like that in the NuGet package manager window:

Yes, there will be a lot of options. When I saw them, I felt a little intimidated, maybe because I’m used to Xamarin.Essentials being just one package. It’s great that there’re options to install components separately or all together as just one library. There’re also packages marked “Trial” and “Lite” making that really long list even longer. When I created my solution in Visual Studio I didn’t know what components I would want to use, so I installed just “Telerik.UI.for.Xamarin”. Later I found out if following controls are not used in the solution, then “Lite” package can be used:

  • RadDataGrid
  • RadPath
  • RadRating
  • RadBusyIndicator
  • RadGauge
  • RadPdfViewer
  • RadMap
  • RadImageEditor

Those components are relying on SkiaSharp, so when you need to use them the full version of the component library has to be installed along with the SkiaSharp library.

Here’s what I noticed about the solution size:

  • without the Telerik library(clean Xamarin.Forms solution) – 15.5mb/17.3mb on disk
  • with the library – 42.4mb/44.2mb on disk

That’s a big difference! So, if you need to use just a couple of small components, it’ll be much better to install separate packages (“lite” if possible) otherwise your solution and the final app will be huge and it’s never a good thing.

I decided to try several components from the library: barcode, button, popup and a calendar. Getting started documentation pages online provide detailed instructions on how you can setup each component. I created a separate page for the barcode, button, and the popup and manually added those components to the page using XAML. It was easy to follow the samples in the documentation online. Mostly I was just playing with the components without trying anything too complex.

Application UI
Application UI

I was really happy with the barcode generator. Now there’s no need to use online generators and the value (in string format) can be easily updated right in XAML or in the C# backend file. Through the Symbology property, it’s possible to set the symbology that will be used to convert the value of the control into a visual barcode representation. The component supports the most commonly used symbologies such as:

  • EAN13
  • EAN8
  • UPC-A
  • UPC-E
  • Code39
  • QRCode
  • PDF417

Next, I created a button to display a popup. Again the documentation and sample projects provide enough information to start using the component. You can create very pretty buttons with color or image background, curved edges, creative styling. Unfortunately it took me some time to figure out how to make rounded edges in the button. Then I realized there was another component in the library called “Border”. It can create a nice border for any component. I just wrapped the button in border component and it created nice rounded edges:

 
    
…

Let’s now move to the popup component. I didn’t know popups can be so fun and colorful. If you know about any other libraries for creating and styling pop-ups in Xamarin.Forms, let me know. I definitely want to learn more about them. In order for the popup to appear it should be created as a child of the button which triggers it. I obviously had to write some backend code to display and hide the popup, but all the styling was done in XAML using parameters of the component. I used the sample from the documentation and it worked great in my Android emulator. When I tried to run the UWP project the styling was off, but I might just need to read more about Placement and PlacementTarget parameters to make it look better on all platforms and screen sizes.

I placed the calendar component on the main page using the drag-n-drop option from the “Telerik UI for Xamarin Toolbox”. I didn’t need to do anything else to get a pretty looking cross-platform calendar.

UWP Main Page

Another great news: Telerik UI for Xamarin works with the new XAML Hot Reload. I had some trouble with the popup component though. It doesn’t display after the reload, but if you go to a different page and then come back, you’ll see changes in the popup without rebuilding the project.

Telerik Visual Studio extension can make your Visual Studio launching process a little slower and I got a warning about it:

Visual Studio Warning

Hopefully, Telerik/Progress developers will work on speeding it up. Using trial I have an option to submit tickets to the developers, so I might just use this option.

Overall I had a great experience playing with different components from Telerik UI for Xamarin library. It was just a tiny part of what Telerik is offering to the library users. There’re currently 35 components available, which you can localize, style and connect to Azure or AWS. If you have an interesting use case in mind and you want me to write about it, please, let me know.

P.S. I didn’t cover pricing here because I was strictly using the trial version. Is it worth the price? You’ll have to decide it for your business yourself.