Send request

No products in the cart.

Xamarin Designer for Android – Visual Studio Magazine

December 7, 2023

Mono for Android
The latest version of Mono for Android includes a long-awaited design surface. Learn how it works.
It’s interesting to look at the needs of various segments of developers. When I first start looking at an environment, the first thing I need to understand is the UI. I’m not magically born with some knowledge about the environment and don’t learn well by just reading, so I need some help in getting started. I found this was true when I started Windows based development in the early 1990s, Dynamic Web in the late 1990s, ASP.NET in 2000, Silverlight/WPF, iPhone and Android.
I find that getting up to speed with a UI is the single biggest deterrent for someone learning a platform. I find that as a beginner I need the features provided by a design surface. It’s only as I grow and become comfortable with a platform that I find that building a UI by hand is more productive. Even as I get more advanced, I still can learn from a designer, so it has value as I grow into a platform.
A few years ago, I started working with Android. I stepped into it thinking that there were design surfaces I could work with. Unfortunately, I found that there was no design surface when I started. Eventually, I found DroidDraw. Then a designer was integrated into the Eclipse. Unfortunately, Mono for Android 1.0 initially shipped without a designer.
The .axml support in IntelliSense was a great help for advanced users, but non-advanced users had problems knowing where to start. Unless you knew to work with an EditText control, you could easily get lost trying to find a TextBox (I had this problem on day one). Thankfully, all was not lost; Android’s UI layout language is based on XML. This allows UI definitions to be transferred between DroidDraw, Eclipse and other Android development tools.
Given the initial goal of getting Mono for Android working, supporting all Android features and supporting the various Android versions, the lack of a designer is understandable. On May 14, Xamarin announced Mono for Android 4.2. Among the many new features of this version is a design surface. Let’s look at the Xamarin Designer for Android.
After installing Mono for Android 4.2, open up a layout file, and you’ll see something similar to Figure 1. This is the Xamarin Designer for Android, running in Visual Studio 2010. Notice the graphical design surface in the middle of the screen, and the toolbox on the left-hand side.   
The toolbox contains a set of controls grouped together logically, as shown in Figure 2. You may notice that some controls have multiple versions. These controls will sometimes differ only by an attribute. For example, there’s a LinearLayout with horizontal and vertical attributes.
On the lower right hand side of the screen are the property pages familiar to every .NET developer. The property page of a control allows you to change various parameters, but also goes one step further. For instance, with an ImageView, I can select the drawable objects included in a project, as shown in Figure 3.
One of the interesting features is the Document Outline. The Document Outline doesn’t display automatically. In Visual Studio, go to View/Other Windows/Document Outline. This will bring up the display shown in Figure 4.
The Document Outline displays the hierarchy of a layout. Controls can be selected, copied, pasted or drag-and-dropped. This is a design time view of the layout. While not a perfect indicator, it does give a developer a feeling for how hierarchical a layout is. In Android, the more hierarchical a layout is, the slower the layout typically is, making the Document Outline a valuable tool.

[Click on image for larger view.]
Figure 5. Editing and adding resources is simple.

For example, a developer can select the text in a button, change the text, and have that text updated in the resources.
This round-trip support in Android Resources is a powerful force to help developers use resources as a best practice. Figure 6 shows how easy it is to select an existing resource in your application, by  selecting an existing resource in the popup. This was generated via the property page, by clicking the button to input a hint.
The Xamarin designer supports this variety. When a layout’s loaded into the designer, there’s a row across the top of the designer that contains a series of options for viewing the layout. The options that developers have for selecting the display output include:

  • Beginners can easily get started building a UI.
  • Advanced users can learn new things. I used the designer on an existing project and immediately added some new features.
  • There’s less need to compile, deploy, and run to review the UI. The designer gives you immediate feedback.

I’ve found that the Xamarin Designer helps out beginning and advanced developers.
If you’ve been wondering about Android, the shipment of the Xamarin Designer removes the final roadblock. I’m sure there will be speed bumps in the future, but the road is smoothing out considerably. (I recently did a webinar on the Xamarin Designer. Developers can view the webinar through my blog).
About the Author
Wallace (Wally) B. McClure has authored books on iPhone programming with Mono/Monotouch, Android programming with Mono for Android, application architecture, ADO.NET, SQL Server and AJAX. He’s a Microsoft MVP, an ASPInsider and a partner at Scalable Development Inc. He maintains a blog, and can be followed on Twitter.

Printable Format
WebAssembly made Microsoft’s Blazor framework possible by enabling C#-based web development, and now the company wants it to completely remake cloud computing.
Microsoft’s sweeping infusion of advanced AI tech throughout its dev tooling continues apace, most recently providing a new focus point for the company’s Java on Azure team.
K-means is comparatively simple and works well with large datasets, but it assumes clusters are circular/spherical in shape, so it can only find simple cluster geometries.
The top open item for Visual Studio on Microsoft’s Developer Community feedback site asks for native Rust support, but the company has taken little action on the years-old request.
Add “submit Git commit” to the growing list of developer tasks in Visual Studio 2022 that are now being handled by AI.
Subscribe on YouTube
> More Webcasts
Problems? Questions? Feedback? E-mail us.


Posted in Design, Events, Technology, Ui DesignTags:
Write a comment