Programming Stuff

Adding Instruction Overlays in Xamarin Android

For an app to be successful you have to be sure your users know what they’re supposed to do in the app. This is where instruction overlays come in (or Instructables as we call them at Spectafy). With an instructable you can overlay specific instructions right on top of the screen just as the user is about to use it. You tell your users exactly what they need to know when they need to know it.

Including instructables in your app is much easier than you might think. Over the next few posts I’ll go over a number of techniques for showing instructables using Xamarin on both Android and iOS.

Let’s start with a basic screen overlay on Android.

The first step is for you or your graphics person [ in my case it definitely needs to be the graphics person 🙂 ] to create the overlay.  Be sure that the graphic is semi transparent so that the user can see that the instructable is overlaying the app’s regular screen. Something like this…


Although you can dynamically add the overlay to your screen, the easiest thing to do is simply include the overlay in the screen’s layout resource. Let’s assume that we have an existing layout resource similar to the following…


    <!-- Your screen's layout details -->


Note: I happen to be using a LinearLayout in the above example but this technique will work with pretty much any layout.

To include the overlay, we wrap the existing layout in a FrameLayout and add an ImageView referencing the overlay as the last element of the FrameLayout.


    <!-- Start of the existing layout -->
        <!-- Your screen's layout details -->
   <!-- End of the existing layout -->

     android:id="@+id/imageCoachingOverlay" />

Two important things to remember…

  1. The ImageView needs to be the last element under the FrameLayout so that its at the top of the z-order and therefore appears in front of the other content
  2. The ImageView visibility is set to “gone” so that it doesn’t normally appear in the screen layout

With the instructable in the layout resource we just need to show it and give the user a way to dismiss it.

In most cases you’ll want the instructable to appear the first time the user visits the screen. You can track a user’s first visit to a screen in a number of ways. The technique I generally use is to store a value in shared preferences (Context.GetSharedPreferences).

When the screen launches I check that value and make the instructable visible if this is the user’s first visit.

var imageCoachingOverlay = FindViewById<ImageView>(Resource.Id.imageCoachingOverlay);
imageCoachingOverlay.Visibility = ViewStates.Visible;

The last step is to setup a simple touch handler to dismiss it.

imageCoachingOverlay.Touch += delegate(object sender, View.TouchEventArgs e)
  e.Handled = true;
  imageCoachingOverlay.Visibility = ViewStates.Gone;

When you run the app, the screen will appear similar to the following …

Good Fit



… once the user sees the instructable, they simply tap on it and it’s gone.

Without Instructable

And that’s it … you now have an instructable (Instruction Overlay) in your screen.

We’ll explore the idea of instructables in a number of future posts. We’ll talk about adding animations to dismiss the instructable, dealing with screen size variations, etc. … and how to do all of that stuff on iOS.

Programming Stuff

Introduction to Cross-Platform iOS/Android Apps with C# and Xamarin

Check out my latest article over on

Xamarin is a powerful toolset that brings the rich programming features of .NET and C# to Android and iOS. With Xamarin you are able to create full-featured Android and iOS applications with a shared code base working within a common programming environment. This is part one of a two-part article that walks you through the complete process of using Xamarin to create a simple cross-platform with .NET and C# that runs on both Android and iOS. In part 1, I’ll introduce Xamarin, walk you through the process of creating a cross-platform code library with Xamarin, and guide you through the creation of the Android implantation of the cross-platform app. In part 2, I’ll cover the creation of the iOS implementation…

See the complete article on

Programming Stuff

Google Glass not showing in Android ADB utility

Recently my Google Glass arrived … Needless to say, I was excited and ready to start working on building apps for Glass.

I unbox and fire up Glass, go through the initial setup steps, and turn on debug (Settings -> Device Info -> Turn on debug). So far, so good.

I then walk over to my PC, fire up the Android SDK manager to confirm that I have the latest revision of the Google USB Driver (Rev. 9 at the time of this writing).


I then connect Google Glass to my PC’s USB port and wait for the USB setup window to tell me Glass is ready to use.

The USB setup appears to be going well but just as the setup process is about to finish, my PC displays a message indicating that there were some problems. At first I was somewhat concerned but, things start looking better…

The Auto Play window opens showing options for the Glass device…


… and Glass 1 is suddenly listed as an option in the Windows File Explorer.


Using both the Auto Play window and File Explorer I’m able to browse around the device file system. I can even copy files between the Glass file system and my PC file system.

Clearly the USB setup window was mistaken. 🙂

Feeling confident, I open up a command prompt and enter the command to display the list of Android devices currently connected.

adb devices

Which then displays the following.

List of devices attached

Notice that no devices are listed. Clearly the USB setup had not completed successfully … there is a problem with the USB driver.

If ADB doesn’t see that Glass is attached, tools like Android Studio, Eclipse, DDMS, etc. are not going to see the device either. We need to fix this.

Fixing the USB Driver

For the USB Driver to work with Glass, some tweaks need to be made to the USB driver’s android_winusb.inf file (located in [android sdk install folder]\extras\google\usb_driver ). The list of steps to manually modify the file can be found here.

Alternatively, you can download a modified version of the USB driver from

If you choose to use this download be extremely careful! USE THIS DOWNLOAD AT YOUR OWN RISK!!

This is not an official USB installation but rather one created by a person who has been kind enough to share it. I’m using this download on my development PC and it’s working great. That said, you still need to be very careful because there’s always the potential for someone to do something malicious.

Once you have the modified USB driver files (whether you manually make the changes or you download them) you can easily update your PC to use the modified USB Driver installation.

  • From the Control Panel, open the Device Manager
  • Locate the entry for Glass. I believe you’ll find it under Other Devices
  • Right-click on Glass and select Update Driver Software
  • When prompted with How do you want to search for driver software? select Browse my computer for driver software
  • In the Browse for driver software on your computer window, browse to the folder that contains the modified driver files. Be sure the checkbox Include subfolders is checked then click Next

You’ll probably receive a warning that the USB driver can’t be verified. As long as you’re confident that you’re dealing with a safe driver installation (either you made the changes to the android_winusb.inf file yourself or you’ve validated that the USB driver files you downloaded are safe)  allow the installation to run.

Once the USB driver installation completes … Your PC is ready to connect to Glass.

You can verify that the USB driver change worked by again running the adb command.

adb devices

But this time, you should see a device listed.

List of devices attached
015DA77204015006 device

And now you’re ready to go … time to start creating those killer apps for Glass !!

Hopefully Google will soon release a USB driver that supports Glass without requiring these extra steps. But until they do, these steps allow us to begin working with Glass right away.

Jim is currently working on an online course for Pluralsight about creating apps for Glass with the Glass Development Kit.  That class should be available at the end of April 2014.

Remember though that developing native apps for Glass requires a solid understanding of Android app development so checkout Jim’s many Android programming courses and cross-platform iOS/Android programming courses at Pluralsight.

Programming Stuff

Cross Platform iOS/Android with Visual Studio and C# (Xamarin) Series Complete

I’ve been working with Xamarin a great deal the past several months and am increasingly becoming a fan of the product. The ability to leverage the Visual Studio IDE,  familiar .NET class libraries, and C#programming language to create both Android and iOS apps provides incredible power.


The beauty of working with Xamarin is that it allows us to share code when doing so makes sense but Xamarin also embraces the unique features of each platform. Xamarin does this by going beyond the many .NET classes that we’re all familiar with to also include .NET classes that expose the features of each platform.

As an example, the features of Android activities are available through a .NET Android.App.Activity class. Similarly, there’s a .NET MonoTouch.UIKit.UITableViewController class that makes the iOS UITableViewController features available. The platform-specific features provided by Xamarin are extremely rich and comprehensive giving us access to most any platform features we’re likely to use.

By having both the standard .NET classes and platform-specific .NET classes we’re able to build our application’s core logic just once, sharing that logic across both platforms, while also having full access to each platform’s unique capabilities and features.

If you’d like to learn more about working with Xamarin, I encourage you to checkout my 2 part course series on cross-platform app development with iOS and Android. Pluralsight just published part 2 of the series this week.



BTW: Although the 2-part series on cross-platform iOS/Android development with .NET/C# is complete there’s still a lot more to content to come. Keep watching for more courses on using Xamarin to create Android and iOS apps.