While Xamarin did a monster job integrating Android and iOS designers in both Visual Studio and Xamarin Studio as soon as your project becomes larger you’ll soon hit their limitations, that why many pro developers end up using native designers for UI design. This post is about how to use IntelliJ IDEA based IDEs for Android UI design together with Visual Studio, following the same approach we use with Blend for Windows development.
Step 1: install your favorite IDE: Android Studio or IntelliJ IDEA (they’re practically the same since Android Studio is based on IntelliJ IDEA)
Step 2: Install XamarIdea extension for Visual Studio, this extension, recently updated for Visual Studio 2015, will make integration between the two IDEs a lot faster, thanks to Egor Bogatov (@EgorBo) for sharing.
No idea if something similar exists for Xamarin Studio (sorry, I’m not an pro Xamarin Studio user)
Step 3: Create a new blank Android app using Visual Studio
and wait until initial project skeleton creation process ends.
Step 4: Right-click the Main.axml file inside Resources\layout folder and you should see a new option: Open in IDEA/Android Studio
click it and you’ll get an initial configuration dialog that should point to IDEA/Android Studio path, if not select it manually, together with other plugin options
click Ok, and you’ll see a warning dialog saying that your project needs some modifications:
These modifications are necessary since Android layout files use a different extension (.xml) and project structure is slightly different than Xamarin Android apps, just say yes; unfortunately these changes will prevent you to use the integrated Xamarin Android designer further unless you rename the layout file back to .axml. Click Yes, and you’ll get a final dialog reminding you to recompile your project inside Android IDE and that plugin options are available under Visual Studio’s Tools menu:
Step 5: Switch to IDEA IDE and, for sure, rebuild the project
On the left you’ll see the project structure, under app node expand the Resources folder and you’ll see the familiar Android folder structure together with your renamed main.xml file.
Double click it to open the designer.
I won’t go into design detail since there are lots of demo tutorials on JetBrains’s site, just want you to see some of the plus of IDEA and why it is more productive than Visual Studio’s integrated editor/designer.
Step 5: Design
-Select and delete the autogenerated button from design surface.
-Let’s change root LinearLayout to a RelativeLayout using the Component tree window in the upper right corner.
-Drag a Plain Text to design surface until top tooltip shows CenterVertical/CenterHorizontal
-Set layout_width to match_parent using Properties window (hint: if you need to search for a property just start typing to select matching properties 
)
-Let use xml editor to add left and right margins: Switch to text, select the EditText and start typing: ma, YES! full intellisense to the rescue!
-Do you want to create a style that you can reuse with others EditTexts? just right click the edit text and use Refactor –> Extract Style menu
Select the properties you want to export (this dialog will look familiar to Reshaper users) and click OK
the layout xml has been changed to:
<EditText android:id="@+id/editText" style="@style/MyEditTextStyle"/>
and a styles.xml file has been created for you under values folder:
Of course you can edit the styles.xml file with full intellisense / editors support
Step 6-Back to Visual Studio
Save the project and switch back to Visual Studio, your main.xml file is automatically updated, but unfortunately the new files that have been added to the project, like styles.xml in our demo, must be added manually to the project.
Add styles.xml under values folder, compile and continue developing your app using Visual Studio.
Closing:
I’ve just scratched the surface of IDEA design productivity features, I encourage you to give it a try, I’m sure you’ll love it.
Have fun exploring!
PS: Did I tell you that IDEA renders AppCompat’s widgets instead of a boring dark gray box? 