Programming Stuff

Xamarin Build Server – The Pin You Entered is Invalid

If you’ve recently updated your Mac to Yosemite, you may be having trouble connecting Visual Studio to the Xamarin Build server.

You know you’re entering the connection pin correctly but you keep seeing the error message…

The Pin You Entered is Invalid

Don’t worry, you’re not crazy … It turns out that changes to the network stack in the Yosemite edition of OSX are causing problems in the communication between Xamarin within Visual Studio (running on Windows) and the Xamarin build server (running on OSX).

The Good News: The solution is simple…
Update Yosemite to the latest version, restart Visual Studio and the Xamarin build server and then all should be well.

For more detail on what happened, checkout this discussion of the issue over at Xamarin.


Programming Stuff

Screen Size Issues with Instruction Overlays in Xamarin Android

We’ve been talking about Instruction Overlays (or what we at Spectafy call instructables) over several posts (adding instructables and instructable exit animation) this week. Let’s wrap up the week with one more point about showing instructables on Xamarin Android (next week we’ll look at Xamarin iOS).

So far, for simplicity, we’ve be showing our instructable as a single image file. Although simple, this approach runs into issues due to screen sizes differences with Android devices.

Here’s our instructable on a screen of the desired size (looks good)…

Good Fit

And here it is on a device with a wider screen (not so good — doesn’t cover the right edge)…

Doesn't Fit

One thought is that we might scale or stretch the image but doing so would distort the instructable which we don’t want. It’s important for instructables to be clear and engaging so that our users will want to read them.

Given the wide variety of screen sizes across Android devices, creating a separate image for each screen size would be virtually impossible .. so what do we do?

What we need to do is separate the content of the instructable (the images, words, etc.) from the background. With that, we can keep the content a fixed size, adjust the content positioning, and adjust the background to cover the whole screen.

In the case of the instructable we’ve been looking at this week, we’re now going to need 3 parts.

  1. A graphic for the main content of the instructable
  2. A graphic for the “tap to dismiss” message
  3. A background that will adjust its size without distorting.

For #1 & #2, you’ll need to head back to your graphics person and have them create those images with fully transparent backgrounds. This is also a good time to take a close look at the instructable and see if you might want to make any improvements [ you’re re-doing the graphics anyway 🙂 ].

Here’s our new graphics files … they won’t show well here but if you download them and take a look against a dark background, you’ll be able to see them better.

Graphic #1

Body of Instructable

Graphic #2

For #3, we can take advantage of Android’s drawable resources. In the drawable folder under the Resources folder, create a file called instructional_background.xml that contains the following…

<?xml version="1.0" encoding="utf-8" ?>
    <solid android:color="#CC000000"/>

This file describes a rectangle with a solid fill color of black (000000) that is 80% opaque (CC). The rectangle will draw at whatever size it needs to be.

To create our new screen-size-variation-friendly instructable, we replace the ImageView we created earlier with the following layout description. (In other words, this layout now becomes the last element under the FrameView and you delete the ImageView that was there previously.)


    <!-- Graphic #1 -->
      android:layout_centerInParent="true" />

    <!-- Graphic #2 -->
      android:layout_marginBottom="10dp" />

The RelativeLayout element is set to fill the entire screen and has specified our instructional_background drawable as its background. This will give us an 80% opaque black background that fills the screen across all screen sizes and won’t distort.

We’ve then set the main graphic (map_coaching_main) to be centered on the screen.

And finally, our “tap to dismiss” graphic is placed just above the bottom edge of the screen, centered horizontally.

And voila ..  we have an instructable that looks good across all screen sizes.

Here’s the narrow-screen device (looking good)…

Instructable Narrow Screen

And the wider-screen device (still looking good)…

Instructable Wider Screen

We have one other small change to make … We need to be sure that the exit animation we added is applied to the RelativeLayout containing the instructable instead of that single image file we we’re using before.

All we need to do is change the line that did the FindViewById on the ImageView to find the RelativeLayout.

var imageCoachingOverlay = FindViewById<ViewGroup>(Resource.Id.layoutInstructionOverlay);

The animation will now be applied to the RelativeLayout and it’s contents.

And with that .. we have a pretty rockin’ instructable that works across the various screen sizes.

This wraps up our Xamarin.Android discussion of instructables for a bit. Next week we’ll see how to show instructables on Xamarin iOS.

Programming Stuff

Xamarin Android SDK Problems on Mac Yosemite

If you’re running into problems launching the Android SDK from w/in Xamarin Studio (or other Java-based tools) on Mac Yosemite, the issue is likely that you need to update your Java environment BUT

… the solution is not the update that’s suggested in the error message.

Instead use this link from Apple.

That should get you all fixed up.

I came across this solution on a few forums, including this Xamarin Forum … I want to be sure and give credit to the hard work of the folks who worked this one out!

Programming Stuff

Instruction Overlay Animation in Xamarin Android

In my last post we talked about adding an instruction overlay (instructables as we call them at Spectafy) to your Xamarin Android app. One way we can improve our instructable is to add animation to the way it exits.

As a reminder, here’s the code we use to dismiss the instructable.

var imageCoachingOverlay = FindViewById<ImageView>(Resource.Id.imageCoachingOverlay);
imageCoachingOverlay.Touch += delegate(object sender, View.TouchEventArgs e)
  e.Handled = true;
  imageCoachingOverlay.Visibility = ViewStates.Gone;

Basically we just set the instructable’s visibility to gone which causes it to disappear instantly. We can give the instructable a much more professional look by adding a simple animation that causes the instructable to slide off of the screen.

Adding that effect is as easy as adding 2 lines of code and an animation resource file. Let’s start with the resource file.

Before we can create the animation resource file we need to create an anim folder under our Resources folder (right-click on Resources in the Solution Explorer and choose Add/New Folder).

Solution Exlporer Resources anim folder

Now create a new XML file in the anim folder named left_and_out.xml

  • Visual Studio: right-click on Resources, choose Add/New Item… select XML File as the file type
  • Xamarin Studio:  right-click on Resources, choose Add/New File… select XML in the left pane of the New File dialog and then select Empty XML File in the right pane

The file should now appear in the Solution Explorer…

left_and_out.xml in Resources

In the left_and_out.xml file we describe the animation.

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="">
  <translate android:fromXDelta="0%p" android:toXDelta="-100%p"
   android:fillAfter="true" android:duration="500"/>

In this animation we’re telling Android that we want to translate the X position of the View from it’s current position (0%) to a negative 100% (slide it all of the way left); the animation will take 500 milliseconds to execute.

That XML file takes care of all of the hard work.

To perform the animation, all we have to do is load the animation resource and start it.

imageCoachingOverlay.Touch += delegate(object sender, View.TouchEventArgs e)
  var leftAndOut = AnimationUtils.LoadAnimation(this, Resource.Animation.left_and_out);
  e.Handled = true;
  imageCoachingOverlay.Visibility = ViewStates.Gone;

And now … instead of just disappearing … the instructable slides nicely off to the left.

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.