Telerik Tagit

Part 4 - Enhancing the UI and Rating

Telerik UI for Xamarin Tagit-Banner

Adding Search and Favorites

Telerik UI for Xamarin search and favorites

In Part 3 of this series, we used Telerik® UI for Xamarin to create a UI enabling Telerik Tagit users to select images and submit them to the Microsoft Cognitive Services Computer Vision API for tagging and captioning. In particular, the ListView control made it easy to display selectable image thumbnails and render the final images along with the captions assigned to them, while the Busy Indicator control made short work of letting the user know that we were waiting for a call to the Computer Vision API to complete.

This time around, we will add functionality for searching images based on the tags assigned to them, and for rating the images that are tagged. For this, two more Telerik controls will come into play: the AutoComplete control and the Rating control.

What Makes a Search Experience Great?

Before we can create a compelling search experience, we need to answer a few questions:

Q: What information is available to help users find what they're looking for?

A: Thanks to the Computer Vision API, each image is accompanied by metadata that includes:

  • A human-readable caption
  • A list of keywords or "tags" describing attributes of the image and objects inside it
  • A list of keywords denoting content categories (for example, "people")
  • The genders and ages of faces in the image
  • Prevalent colors present in the image

All of these can form the basis for a rich search experience. Want to find all images containing a cat? Our search algorithm can simply scan all tagged images for ones accompanied by the keyword "cat" and present them to the user in the search results.

Telerik UI for Xamarin sample app

Q: How do users expect to find content?

A: Search experiences come in a variety of flavors, but allowing a user to type a term such as "cat" or "river" into an input field and tap a Search button to initiate a search is both simple and universally understood.

Q: Are there ways to help users find what they're looking for?

A: Absolutely. In fact, providing a drop-down completion list or autosuggest list as the user types is a common and straightforward way to make search terms discoverable, as well as to minimize the amount of typing required. The latter is especially important on phones and other devices that lack a physical keyboard.

Telerik UI for Xamarin third party autosuggestion

Now let's apply the principles outlined here to Tagit.

Just a Suggestion

Telerik's AutoComplete control makes short work of implementing autosuggest in a search field. All we need to do is declare a control instance, populate the view-model's AllTags property with a list of all the tags present in the image collection, bind the control's ItemsSource property to the view-model's AllTags property, and wire up a handler for the SuggestionItemSelected event fired by the control when a suggestion is selected. Here's how it looks in XAML:

<telerikInput:RadAutoComplete  
    ItemsSource="{Binding AllTags}"  
    CompletionMode="Contains" ShowSuggestionView="True" 
    DisplayMode="Plain"  
    SuggestionItemSelected="OnStartSuggestionSelected"  
    Watermark="Search for images" />

The event handler navigates to the search-results page and displays a list of images tagged with the search term. Couldn't be much simpler!

Telerik UI for Xamarin using auto complete

Here's the same search experience on iOS:

Telerik UI for Xamarin auto complete ios

And it gets even better. Setting DisplayMode to "Token" on the AutoComplete control enables multiple-selection, which could be used to allow users to search for images containing a combination of tags:

Telerik UI for Xamarin auto complete modes

Tagit users can now use search to retrieve images based on the content of those images. They can also designate images as favorites. Shouldn't they be able to show all the favorited images and unfavorite them, too? Let's make it happen.

Favorites and Not-So Favorites

The previous post spotlighted the ListView control and used it in a couple of different capacities. But it didn't touch on one of ListView's coolest features: support for item swiping, also known as cell swiping. Set the control's IsItemSwipeEnabled property to true and a series of events culminating in an ItemSwipeCompleted event fires when an item in the control is swiped left or right. Furthermore, you can use the control's ItemSwipeContentTemplate property to specify content to be revealed alongside the item when a swipe occurs. That content can include interactive elements such as buttons.

This is the approach Tagit uses to allow images that have been tagged as favorites to be "unfavorited." The Favorites page uses a ListView control to show all the images that have been designated as favorites. The control has item swipe enabled and an ItemSwipeContentTemplate that looks like this:

<telerikDataControls:RadListView.ItemSwipeContentTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid Margin="0,10,0,0">
                <Button BackgroundColor="#D90000" Clicked="OnUnfavoriteClicked" BorderRadius="8" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                <Image Source="ic_action_unfavorite.png" Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" InputTransparent="True" />
            </Grid>
        </Grid>
    </DataTemplate>
</telerikDataControls:RadListView.ItemSwipeContentTemplate>

Swiping an item to the right reveals an Unfavorite button (note the Button control with the Image overlay in the template) that, when tapped, unfavorites an image and removes it from the list:

Telerik UI for Xamarin list view manage favorite

You can designate an image as a favorite immediately after it's uploaded, or on the page that shows the image details. But thanks to item swipe, unfavoriting an image is a lot sexier (and a lot more fun).

It's All About the Ratings

Designating an image as a favorite or a not-favorite is very binary; it's either-or. Let's finish up by using Telerik's Rating control to allow images to be rated on a scale of 1 to 5.

Have you ever tried to create your own rating control? It's not impossible, but it is a lot of work if you want to do it right. The Telerik Rating control saves you all this work. It features four built-in shapes — stars, circles, diamonds, and hearts — and if that's not enough, you can use shapes of your own.

Telerik UI for Xamarin Rating Shapes

Incorporating a Rating control in an app can be as simple as this:

<rating:RadShapeRating 
    ItemShape="{x:Static rating:Geometries.Heart}"  
    Value="{Binding Rating, Mode=TwoWay}" />

ItemShape can be set to any of the built-in shapes, or it can be initialized with a template that incorporates whatever content you want. Tagit uses both stars and hearts:

Telerik UI for Xamarin rating control variations

The Tagit user experience is coming along nicely, but it's not done yet. In Part 5, we'll raise the bar and let the Calendar control do the heavy lifting.


Part 1
App Overview

Part 2
Layout and Navigation

Featuring the SideDrawer and SlideView controls.


Part 3
Image Uploading and Tagging

Featuring the ListView and BusyIndicator controls and the Computer Vision API.


Part 4
Enhancing the UI and Rating

Featuring the AutoComplete and Ratings controls.


Part 5
Sorting & Selecting Images by Date

Featuring the Calendar and TabView controls.


Part 6
Finishing Touches

Featuring the Gauge and Chart controls.