Using Android Studio with Xamarin Studio

Let me be clear: I do not have much respect for the visual design tools that Xamarin creates. There is not anything particularly wrong with them but they just lack refinement, most likely because Xamarin is too busy keeping their bindings updated to stay with changes. This is something I have come to accept on the iOS side and so, when I do create visual layouts for Storyboards or Xib files I use Xcode exclusively, despite the existence of an editor in Xamarin Studio.

Recently, West Monroe engaged in a rare Android project and I got a chance to see how Xamarin Studio worked with Android. Regrettably I found the tooling to be even further behind Android Studio than the iOS side is behind Xcode. Forget even hoping for a sane layout if you used any tools from the support libraries. The few times I got something to render it was so far off that I ended up just running on the device. While this gave me accuracy is slowed my dev time down considerably. I happened to complain about this in one of the Xamarin Support Slack channels I frequent when a fellow dev offered some advice that showed me how to use Android Studio to do the design work. I knew I had to share this.

1) Assuming you have a pre-existing Xamarin Studio solution create an empty Android Studio project somewhere away from the Xamarin project.  I am using a directory called Test while my main code resides in my Projects directory.

2) Once you have setup the Android Studio project open the build.gradle file under your Gradle Script section. Hint: you want the one Module: app.

Within this file, under the android section, add the following block:

sourceSets {
    main {
        res.srcDirs = ['/path/to/Xamarin/Resources/Directory']
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

3) The directory may reload on its own (may have to use Sync Now), if it doesn’t restart Android Studio.

4) Open a layout file. Notice you WILL have to use the .xml extension as Android Studio will not recognize .axml (not sure why Xamarin uses this extension).  You know have full access to the designer. You can freely change themes and use the AS designer to layout and preview your layouts.

Note: you may experience rendering problems or controls missing. I did so I added the following to my dependencies/compile section

compile  'com.android.support:appcompat-v7:23.4.0',
         'com.android.support:design:24.2.0',
         'com.android.support:cardview-22.2.0',
         'com.android.support:recyclerview-v7:22.2.0'

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Hopefully in the future, Xamarin releases a better Android Designer, I would count on it though. I am still having some problems getting this to work fully but the designer has already saved me about an hour with my design work.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s