Xamarin UI - Telerik Tagit App

Introducing Telerik Tagit

If you're like most developers, you've at least dabbled in the "dark art" of writing mobile apps. And if you've written mobile apps, you've discovered that building an Android app is very different than building an iOS app or a Windows app. Each platform uses different languages and APIs. Each presents a unique set of challenges to the developer and supports a diverse hardware ecosystem that makes it difficult to achieve 100% compatibility with all devices. It's hard enough building a great app for one of these platforms. Making it light up on other platforms frequently means writing the app all over again.

One solution to the challenge of writing mobile apps that run on multiple platforms is Xamarin. With Xamarin, you use one language — C# — to write shared code that runs on iOS, Android, and Windows. With Xamarin.Forms, you can go further and build shared user experiences (UXes) in XAML. Best of all, Xamarin (and Xamarin.Forms) apps compile to native code, so you get the best of both worlds: a single code base that runs on multiple platforms, and binaries tailored to the host operating system.

Xamarin.Forms comes with a basic set of controls for building cross-platform UXes, but it lacks more advanced controls to help great apps stand apart from the crowd. For years, developers have been using Telerik products to make themselves more productive by integrating best-in-class charts, grids, and gauges into their desktop, mobile, and Web apps. Telerik^® UI for Xamarin brings the same magic to cross-platform mobile apps by providing a rich collection of controls and bindings that are equally at home on iOS, Android, and the Universal Windows Platform (UWP). Rather than write reams of code to implement engaging user experiences, you can use Telerik UI for Xamarin controls to make your apps come alive on all three platforms.

Telerik UI for Xamarin

Telerik UI for Xamarin comes with more than 70 UI components and includes dozens of Xamarin.Forms controls ranging from the Chart control for presenting data in chart form to the SideDrawer control implementing the popular slide-out UX pattern. It lets you do more with less code and provides the tools you need to build compelling and highly performant user experiences that cut across platforms. And new controls such as the SlideView control, which lets users swipe between pages, make a great toolset even better.

In this six-part series, we will use Xamarin.Forms and Telerik UI for Xamarin to create a rich cross-platform app that runs on Android, iOS, and Windows. Rather than create a "toy" app that is useful for learning but whose ultimate destination is the Recycle Bin, we will create a fully featured app that does something useful and demonstrates some of the very best features that Telerik UI for Xamarin has to offer.

Introducing Telerik Tagit

Everyone has a mobile phone. Everyone takes tons of pictures. And everyone knows what it's like to search through thousands of photos trying to find the one featuring an alien wearing a sombrero standing next to the Basilica San Marco in Venice. Wouldn't it be great if all your photos were captioned and tagged so you could easily retrieve any image containing a cat, a sunset, a famous landmark, or even an alien?

Telerik Tagit is a slick mobile app that uses Microsoft Azure's Computer Vision API — part of the Cognitive Services suite of services and APIs for building intelligent apps backed by artificial intelligence and machine learning — to caption images and tag them with search keywords. With Tagit, your photos collection becomes a database that you can search and sort by the content contained in individual images.

It seems like a tall order, but it's not nearly as difficult as it sounds with Telerik UI for Xamarin powering the front end and Microsoft Cognitive Services powering the back end. In addition to having a cool app to add to your app collection, you will have source code that demonstrates best practices and that can be used as a starting point for great cross-platform apps of your own.

The Road Ahead

Every great app starts with great layout and navigation. In Part 2 of this series, we will use the ultra-cool SideDrawer control and newly released SlideView control to create a clean, easily understood navigation experience that provides a foundation for additional pages and views in subsequent articles.

In Part 3, we will add the ability to upload photos using the Telerik UI for Xamarin ListView control, which now supports linear and multicolumn grid-layout modes. We will also use controls such as BusyIndicator to polish the user experience, and incorporate calls to the Computer Vision API to tag and caption the photos that you upload.

With the image-tagging functionality in place, Part 4 will use the AutoComplete control as the basis for a rich image-search experience. It will also use the Rating control to add flair to the UI and enable users to rate the photos that they upload.

Part 5 will introduce the Calendar and TabView controls, and demonstrate how to combine Calendar and ListView to sort and select images by date.

In Part 6, we will add the final polish to the app by using Gauge and Chart to incorporate stunning data visualizations. Ready to get started? If so, proceed to Part 2 and follow along as we begin the process of taking Telerik Tagit from the drawing board to the app store.