Tap Into Clickable Images with GestureRecognizer

Tappable images and icons are common in mobile applications for actions and navigation. Like many Xamarin.Forms views, the Image doesn’t have a click or tap event and must be wired up using the GestureRecognizer class. A gesture recognizer is a class that can be added to many views to respond to user interaction. It currently supports just the tap gesture. The terms click and tap are used interchangeably in mobile UI development.

First we need to start with an image on our ContentPage. The Image view holds an image for display on your page from a local or online file:

    Image image = new Image
    {
        Source = “monkey.png”,
        Aspect = Aspect.AspectFit,
        HorizontalOptions = LayoutOptions.End,
        VerticalOptions = LayoutOptions.Fill
    };

This is part of a larger example which shows the monkey image at the bottom right.

Android_Code_Completeblog

Now for the gesture recognizer.

Declare the gesture recognizer and a handler to create and manage the Tapped event, then the gesture recognizer is added to the target view, an image in this case. Change the image’s Opacity to .5 in the handler, which will fade the image slightly when tapped.

    var tapGestureRecognizer = new TapGestureRecognizer();
    tapGestureRecognizer.Tapped += (s, e) => {
        image.Opacity = .5;
    };
    image.GestureRecognizers.Add(tapGestureRecognizer);

Give that a try  so you can see that the gesture recognizer works.

An alternative implementation of GestureRecognizer uses the Command property.

    image.GestureRecognizers.Add (new TapGestureRecognizer {
       Command = new Command (()=> { /*handle tap*/ }),
    });

User feedback is a crucial concept in mobile UI development. Any time a user does something in the UI there should be some subtle acknowledgment by the app. A tap, for instance, should respond to the user with visible feedback. Usually an image will gray out or have a white background for a sec when touched. Let’s do that professionally using the image’s Opacity property but adding async/await to create a slight delay in our fade without affecting the app’s performance.

Replace the Tapped handler with this one that will cause the image to fade slightly for a fraction of a second. Remember to add using System.Threading.Tasks; to the top of your file for async/await.

  tapGestureRecognizer.Tapped +=  async (sender, e) =>
        {
            image.Opacity = .5;
            await Task.Delay(200);
            image.Opacity = 1;
        };

Tapping on the image will now fade the image slightly, then back to normal, providing a responsive user experience.

In your own projects you’ll use gesture recognizers (and async/await) to actually do something when an image is tapped. If you want to see async/await in action in this example, bump up the Delay to 2000, then try and do something else in your app (like tap another button, for example) and and you’ll see that the app is still responsive. You could do many things in this Tapped handler without interrupting the flow of the app. Often when a button or image is pressed, the result should be backgrounded using async/await for an optimal user experience.

Check out this free GitHub example here. Check out my book that all this is based on here.

Xamarin Book Available!

Xamarin-Application-Development-Coversm

Over a year in the making, it’s finally here: my book, Xamarin Mobile Application Development, is now available on Amazon!

Developers and businesses looking to expand into the mobile space or to hone their existing mobile apps need a reliable way to approach cross-platform mobile development. The Xamarin platform provides that way.

This book is a hands-on Xamarin.Forms primer and a cross-platform reference for building native Android, iOS, and Windows Phone apps using C# and .NET. This book explains how to use Xamarin.Forms, Xamarin.Android, and Xamarin.iOS to build business apps for your customers and consumer apps for Google Play and the iTunes App Store.

Learn how to leverage Xamarin.Forms to optimize cross-platform development using the most common UI pages, layouts, views, controls, and UI patterns. Combine these with platform-specific UI to craft a visually stunning and highly interactive mobile user experience.

Explore solution-building techniques from starter-to-enterprise to help you decouple your functional layers, manage your platform-specific code, and share your cross-platform classes for code reuse, testability, and maintainability.

This comprehensive recipe and reference book, featuring over 200 C# code examples with downloadable C# and XAML (preview the code on GitHub here), addresses one of the most important and vexing problems in the software industry today: How do we effectively design and develop cross-platform mobile applications?

What you’ll learn:

  • How to build world-class mobile apps for iOS, Android, and Windows Phone using C#
  • How to organize your Xamarin code into a professional-grade application architecture
  • The latest Xamarin techniques for cross-platform UI using Xamarin.Forms
  • When and how to use platform-specific UI
  • Data binding, local data access, enterprise cloud data solutions, and building a data access layer for mobile apps
  • Cross-platform architecture and design to maximize portability and code reuse

This is book is for C# and ASP.NET developers, architects, and technical managers as well as many Android and iOS developers.

Our Award-Winning Mobile App

davey_gold_bug

I’m proud to announce that PCR Essentials, a mobile app we developed for Android using Xamarin, was awarded a Davey Gold Award and a W3 Award by the International Academy of the Visual Arts (IAVA). Commissioned by Thermo Fisher Scientific and Grand Interactive, this app pushes the boundaries of the Internet of Things (IoT) by bringing real-time data directly from DNA-processing laboratory equipment into the hands of scientists on their mobile devices. The Davey awards are run by the Academy of Interactive and Visual Arts(AIVA). With nearly 4,000 entries from across the US and around the world, the Davey Awards honor the finest creative work from the best small firms, agencies and companies worldwide.  Here it is on Google Play.

The app was also a finalist for a Xammy.  The Xammys are awarded by Xamarin, the company who built the cross-platform technology we used to create the app.  Our award finalist video opened the entire Xamarin Evolve 2014 Conference. What an honor to see our work up on the big screens to kick off this week-long epic mobile conference!

Continue reading

For Science! A Xamarin Internet of Things(IoT) Mobile App

PCRGauge

Our latest mobile creation just hit the app store! Commissioned by a Thermo Fisher Scientific brand, Life Technologies, this app pushes the boundaries of the Internet of Things (IoT) by bringing real-time data directly from DNA-processing laboratory equipment into the hands of scientists on their mobile devices. The app provides a suite of functionality ranging from training videos, a full e-commerce experience with lab product details, specs, images, and downloadable PDFs, and a specialized calculator for creating properly balanced solutions for use in the featured lab equipment. The pièce de résistance is the live lab interface empowering the user to log directly into thermal cycling devices, ProFlex™ and SimpliAmp™, to check on their status and temperature. These devices, solutions, and mobile interface are used to conduct lab experiments, replicating a single piece of DNA into thousands to millions of copies of that DNA sequence. The app is used in cancer diagnosis and research as well as studies in genetics. Continue reading

Cross-platform UI Coup: Xamarin.Forms

XamarinForms1

One of the biggest problems with C# mobile development, platform-specific UI, is solved with Xamarin 3.

The greatest foe we face in our quest for cross-platform implementation is platform-specific code.  Code that is platform-specific must be implemented differently depending on the platform, whether iOS , Android, or Windows Phone.  Cross-platform patterns are the same regardless of operating system.  Cross-platform code is sometimes referred to as shared code, or core code, as it is shared between projects for different mobile operating systems. Certain types of code lend themselves well to cross-platform sharing and other code less so.  The rule of thumb is that the closer the code is to the user, the harder it is to share.  The most reusable code is the server-side web service.  The client-side data layer is often reusable.  The business logic tends to be partially entwined with the UI so there is overlap here between platform-specific and cross-platform code. UI code is nearly impossible to share between platforms. Nearly impossible until the release of Xamarin 3 which includes Xamarin.Forms. Continue reading

Agile Development in .NET: Now on Amazon

Cover-sm

The first publication in my QuickNotes series is  Agile Development in .NET.  Most Agile methodologies used in .NET shops nationwide are variations of Scrum and Extreme Programming(XP). This booklet covers these tools and techniques: Test-driven Development (TDD), Behavior-driven Development (BDD), Continuous Integration (CI), and Refactoring to Patterns.  The QuickNotes series covers relevant topics in software development to provide the reader with a swift overview of important trends, terms, and concepts.  This book is available at Amazon.com. Continue reading

Managing Mobile in the Workplace

chained-phone_sq

We bring our phones to work now and use them for everything.  Facebook, Candy Crush, and Twitter are a great use of a smartphone but these devices are also helping us become more productive: email, file and document handling and editing, as well as contacts, calendars and integration with sales, financial, and other third-party business apps.  This creates two things:  opportunity and challenge.  We want to seize upon the opportunity of best utilizing these devices to do our jobs while addressing the challenge of the resulting exposure of company data and security.  Enterprise Mobile Management (EMM) is the overarching approach to tackle these issues.  Continue reading

Xamarin Names Lexicon Systems as Mobile Partner

xamarin-premier-partner

Lexicon Systems was named a Xamarin Premier Consulting Partner for mobile application development.  Using Xamarin product suite, Lexicon Systems provides a cross-platform solution for mobile development using Microsoft technologies.   Built upon the open source Mono and MonoTouch for iPhone projects these technologies allow .NET developers to create mobile apps portable to Android, iOS, and Windows phones. Microsoft partnered with Xamarin in the Fall of 2013, a crucial backing for this direction. We offer guidance, training, and development using Xamarin, and assist businesses nationwide with their shift to mobile. Continue reading

The Internet of Things

theinternet

One of the most interesting trends in years is emerging now: the notion that the things we use and live in everyday will be online, watching us, hearing us, talking to one another, and communicating with us via our phone.  By ‘things’ I mean our car, our house and its thermostat, lights, and appliances such as refrigerators, exercise equipment, and coffee makers, streetlights, stores and their retail displays and cash registers, museums displays, corporate lobbies, meeting rooms, tourist information booths, buildings, cities, and towns.  This is called the Internet of Things(IoT). We are accustomed to the fact that most organizations have a website and ways for us to buy from them online.  This takes it to the next level.  Objects in the room in which we are standing are also developing a web presence and ways for us to interact with them online, in real-time, using our mobile devices. Continue reading

Cross-Platform Mobile Development In C#

What do you need to know to build native mobile apps using C#? Phone and tablet operating systems and programming models differ from web and desktop development. There are many options available for mobile events, threading, and services, but what are the best ones when coding in C#? Featuring the Xamarin product suite, this talk covers the fundamentals of native mobile development in iOS and Android, including: Continue reading