Xamarin Navigation Design Patterns

Navigation gives a user what they need to get around an app quickly, moving from screen-to-screen with confidence and ease. This may include menus, tappable icons, buttons, tabs, and list items, as well as many types of gesture-sensitive screens to display data, information, and options to the user.

Navigation patterns are industry-standard templates for tying an app’s screens together in an elegant and usable way. The two most common visual design patterns in mobile navigation are hierarchical and modal. Out of these base navigation patterns come an entire family of derivative patterns which combine, enhance, and decorate these patterns to create the full range of mobile UI patterns available. Here is an exhaustive list of the most common mobile UI navigation patterns used in Xamarin development:

  • Hierarchical – a stack-based navigation pattern where users can move deeper into a screen hierarchy, then back out again one screen at a time using the up or back buttons
  • Modal – a screen which interrupts hierarchical navigation, often a pop-up screen with an alert or menu which the user can complete or cancel
  • Drilldown List – a list of tappable items selected to display item detail
  • Navigation Drawer – a navigation menu which slides over from the left side at the tap of an icon, typically three horizontal lines in the upper-left part of the screen known as the “hamburger”
  • Tabs – a bar containing several folder-like tabs at the top or bottom of the screen each with tappable icons or text invoking new pages
  • Springboard – also referred to as a dashboard, this is a grid of tappable icons invoking new pages
  • Carousel – horizontally-slidable screen-sized panels, sometimes containing large images

Let’s explore two of the most common navigation patterns, hierarchical and modal.

Hierarchical

Hierarchical is a stack-based pattern where users can move deeper into a screen hierarchy, then back out again one screen at-a-time using the Back or Up button. This typically involves a toolbar at the top of the screen which displays an up button in the upper-left corner of the screen when a page is selected or “drilled down into” by any means. As the user drills deeper into the menu structure, a stack is maintained with each page pushed onto it. Two buttons are used in tandem to navigate backwards, popping pages off of the stack: the up and the back button.  The back button is the curved arrow icon on the bottom of the screen, although iOS doesn’t have one. The up button is the “less than” icon in the upper-left corner. Deep navigational stacks can be traversed in this manner with page selection requiring the use of additional UI navigation patterns such as the navigation drawer, drilldown list, or popup menu.

Modal

A Modal is a single, interruptive popup or screen which comes in two flavors. The most common type floats overtop the main page and is usually an alert, dialog, or menu which the user can respond to or cancel.  Navigation reverts back to the originating page when the modal is dismissed. A modal informs the user of some important event, such as a saved record, or gives them the opportunity to provide input or direction, such as a menu or whether to commit or cancel a transaction. The second, less common, type of modal replaces the main page entirely, interrupting the hierarchical navigation stack.

The two most common modal menus in the mobile UI are the Navigation Drawer and the Action Menu. The Navigation Drawer typically slides in from the left and is triggered by the tapping of an icon in the upper-left corner of the screen (usually “the hamburger”) and displays a list of pages to navigate to.  The Action Menu typically slides in or pops up on the right side of the screen, and is invoked by tapping an icon in the upper-right corner of the screen (usually three vertical dots) and contains mostly operations (ex. Favorite This), though less frequently some navigation pages as well.  To follow this established UI pattern, remember the rule: Nav on the left, action on the right.

Hierarchical and modal UI navigation patterns are typically used as complementary techniques with hierarchical providing the skeleton of the navigational structure and modals giving the user choices for what they want to do and where they wish to go within the app as well as informational updates along the way.

Xamarin.Forms provides most of the primary navigation patterns out of the box:

  • Hierarchical navigation using NavigationPage
  • Modal using NavigationPage, alerts, and ActionSheets
  • Drill-down lists using NavigationPage, ListView, and TableView
  • Navigation drawer using MasterDetailPage
  • Tabs using TabbedPage
  • Springboard using images with gesture recognizers
  • Carousel using CarouselPage

I hope that’s enough to get you thinking about navigation in your own apps. In my book, I explore hierarchical, modal, and the rest of the navigation patterns on each platform. The navigation chapter in the book is really one its crown jewels, providing you with patterns to build just about any app you can imagine! If you want to check out the navigation patterns in code, head over to GitHub and look at chapter 6. You can use that code to lay the groundwork for just about any business app!

In last week’s post I covered the Drilldown List pattern. In upcoming posts, I’ll talk about more of the the key navigation patterns in detail.

 

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.

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