Xamarin – Designing View/UI in Android Application

In the last post we have seen a HelloWorld application in Android using Xamarin framework. In this post we would see the UI elements to construct a view in android.

If you look into the above image, it tells you that an Activity is the logical unit for UI in Android. An Activity would contain a View Group, which is also another logical unit; which means it can contain multiple elements inside it. A Layout is an example of View Group. A Layout can contain multiple views. Even it could contain a Sub Layout and Controls. Controls are basically user input controls, display controls and option controls.

As far logical user interface units are concerned, the above image shows that we have four of them.

If you remember in the Hello World application for Android, the Activity1.cs is the class where the logical binding of Layout is done with the Activity.

The OnCreate overridden method; where the layout resource is set and from the resource the button is found.

Let’s go to the Main.axml, which is the only layout present in the Hello World application.

Double click on the Main.axml and the designer would open in Visual Studio 2012.

As you can see in above image, various options are there to see the design output, such as

  • Portrait to landscape view.
  • Various screen sizes
  • Android OS selection

Along with zoom in and zoom out of the view.

The source of the design would look like above. It’s an xml version of the layout.

To add controls to the view, the toolbox provides all sorts of controls such as following:

Hope this article helps, thanks for reading.