Building a Xamarin Android app in Visual Studio Team Services and deploying to App Center

In the old days, we use to build our Xamarin apps with Visual Studio and find a way to get the resulting .apk file to the end user for them to install.  Then came Hockey App.  It was and sort of still is (in transition) a distribution platform for Xamarin apps.  It was awesome.  Now of course, we have App Center, a completely modern and full fledged mobile app management and distribution service by Microsoft.  Since Microsoft purchased Xamarin, App Center was the next logical step and is among the many benefits of the acquisition.  Not surprisingly, using Microsoft’s Visual Studio Team Services (VSTS) you get integration with App Center.  Namely, you can configure build definitions in VSTS that allow you to deploy right to App Center.   Before we take that for granted let’s pause and let that sink in for a moment.  What this means is that when I check in my code, it triggers the build definition in VSTS which builds the code in the cloud on a hosted Xamarin agent, then deploys the resulting .apk file to App Center.   I can wash my hands of the mundane, boring task of building in Visual Studio, and manually updating App Center forever!  Dev Ops is all the rage right now, and I must admit, although building a single build and deploy definition is merely dabbing my feet in the water, this stuff can get pretty addictive.  Its like life hacking but with code.  The more I can automate my CI/CD (cringe) pipeline the better.

To get started, I’m going to assume you have a VSTS subscription and a project with a code repository set up.  I’ll assume you have an App Center account and an established Android application.  You can get help with those Here and Here.

To get started with your build definition, navigate to your project and select builds.  Then click the button to create a new definition.

 

Select the type and location of the source code you’re going to build.

 

Now we’re given the option to select a template.  Here we’ll search for Xamarin and select the Xamarin Android template.

 

Now the template is loaded and ready for us to configure as our build definition.  It contains steps that will execute in the order they are listed from the top down.  Templates are great for newbies like me in that they guide us on the right path.  Notice the first step that sets the cloud build environment to use Nuget 4.4.1.  This is a requirement and is already set up for you.  The next step is the Nuget restore step and will pull down the any nuget packages for your code.  I’ve actually set a custom nuget feed in addition to the regular official nuget to that pulls down some extra packages from a private source.   This is set up as a custom Service Endpoint and not covered here.

Next, configure the build step to your liking.  The defaults for this step pretty much work.  Make sure you use JDK version 8 and JDK architecture x64.

 

In the next step, upload the Keystore File that will be used to sign your app and enter the alias and password.

 

The default settings for the “publish artifact: drop” step should already be ok. After that, we’ll configure the deploy step that will send our app on over to App Center.  I’m skipping the optional ‘Test with Visual Studio App Center’ step that allows you to queue and run unit tests for the deployed code in App Center’s Test Cloud.

The App Center distribute step requires you to set up a service endpoint (pictured below) connection to App Center.  Follow the link above to set that up.

 

Go back to the App Center distribute step and configure the following:

– The App Center app slug. The app slug is how the build step locates your app in App Center. This is how you find out what your app slug is in App Center as described by Team Services:

“The app slug is in the format of {username}/{app_identifier}. To locate {username} and {app_identifier} for an app, click on its name from https://appcenter.ms/apps, and the resulting URL is in the format of https://appcenter.ms/users/{username}/apps/{app_identifier} . If you are using orgs, the app slug is of the format {orgname}/{app_identifier}.”

– Enter your desired release notes. You can direct the step to use a specially formatted release file here. I haven’t messed around with this specifically as I trigger the builds manually anyway, and I just fill in the release notes by hand.

– Select an App Center distribution group to publish to by filling in the group ID. If you select none, the default group will be used. To find the ID of a distribution group in App Center, go to the group and select the gear icon to change the group settings. The ID will be displayed there.

Save the definition and you’re ready to go! You just hacked life and saved time by letting VSTS do some work for you.

Say goodbye to debugging Xamarin iOS on a different machine with Remoted iOS Simulator (for Windows)

The Remoted iOS Simulator (for Windows) just came out for Visual Studio, and if you haven’t tried it, I definitely recommend doing so if you are tired of remoting into your MAC build server to debug your Xamarin iOS apps.

The Remoted iOS Simulator allows you to “Test and debug iOS apps entirely within Visual Studio on Windows”.  I must say having tried it out, I found it works as advertised!  It’s wonderful to be able to run a fully live, real iOS app in a simulator window locally.  It saves time as I don’t have to remote into my Mac build server or be physically near it to interact with a running app.

Simply download the installer, run it, and you’re good to go.  Set your iOS Xamarin project as the startup project.  When you hit ‘debug’ a local iOS simulator pops up and runs locally right on your machine.  You can interact with the app as it runs on the Mac.

The simulator has some basic but useful features like locking the home screen, setting the location, and the ability to rotate and shake the device.

Here is a screenshot of a map view in a real app.  Giddy!  Best of all, the simulator stays running and connected to your Mac after you stop debugging so can use a live Xaml previewer like Gorilla Player for design time visuals.  This is one breakthrough that deserves full applause from the masses.

An app running in the Remoted Simulator for Visual Studio on Windows

 

 

 

 

 

How to make a tappable frame in Xamarin Forms

To make an entire Xamarin Forms frame tappable, use a FrameGestureRecognizer, and set the Tapped property to your handler.  now the whole thing is tappable!   Inside your Frame Content, you can place a ListView that has multiple components.  For a visual cue, set an outline color on your Frame.  Place multiple Frames in a StackLayout or a Grid and you have a nice set of call to actions.

 <Frame Grid.Row="0" Grid.Column="0" OutlineColor="Gray">
          <Frame.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnFrameTapped" />
          </Frame.GestureRecognizers>
          <Frame.Content>
            <StackLayout Orientation="Vertical" HorizontalOptions="Center">
              <ContentView HeightRequest="80" >
                <Image Source="image.png">
                </Image>
              </ContentView>
              <Label Text="My Frame" HorizontalOptions="Center"></Label>
            </StackLayout>
          </Frame.Content>
 </Frame>

Gorilla player for Xamarin – XAML Preview!

The new Gorilla Player is out, and its great!  What is it?  Its an instant XAML previewer for Xamarin Forms projects!  (There is also a XAML previewer that was announced during the Microsoft Build 2016 conference currently only available in Xamarin Studio).  If you’re tired of the long cycle of designing your XAML then having to compile and deploy to your device or emulator just so you can view your XAML, then this is for you.  Gorilla Player allows you to view your XAML without compiling.  To get set up, all you have to do is complete their BETA registration form then download their package that contains the player source files and app.  The app is a desktop app that runs as a service in the background, acting as a server that listens for connections from your emulator.  After you have the desktop app up and running, navigate to the directory of the player solution project, and open it in Visual Studio.  Build the project and deploy it to your emulator.  Start the player app on your emulator.  It will try to automatically connect to your desktop app.  If it can’t find it, you can optionally connect manually.   In Visual Studio you will see a new toolbar option in Tools > Gorilla Player > Connect to Gorilla Player.  Now when you open XAML files in Visual Studio, you will see a Gorilla Player icon on the source page.

GorillaVS

You should now be able to see your XAML in the emulator!  That’s it for simple XAML.  If you have Xamarin Forms ListViews with bindings, then you can set design time data a number of ways, the simplest I’ve found is to include a JSON file in the root of your project called “SampleData.json”.  In the file, set your design time data by including a JSON object with multiple name value pairs, each with their value set to an array.  The name in each name value pair is the title of your XAML page.  Set the value of the name value pair to an array of objects with properties that conform to your model.  This will be the design time data you see in the XAML previewer.  Don’t forget to set the binding in your ListView to  ItemsSource=”{Binding}” instead of ItemsSource=”{Binding Items}” or whatever your model is bound to in the code behind, when you want to preview using the sample data.

{
  "BlogPage.xaml": [
    {
      "Title": "Blog Post 1",
      "Link": "http://www.example.com",
      "PublishDate": "4/01/2016",
      "XamImageSource": "NoImageAvailable.png",
      "Caption": "This blog post is nice"
    },
    {
      "Title": "Blog Post 2",
      "Link": "http://www.example.com",
      "PublishDate": "4/02/2016",
      "XamImageSource": "NoImageAvailable.png",
      "Caption": "This blog post is greater"
    },
  ],
}

There is an API for Gorilla Player that allows you to import custom .dlls for views that inherit from them, and more.  Head on over to GorillaPlayer.com to check them out.  Happy coding.