Day 5: Layouts in Android and Xamarin Android Visual Designer

xamarin-design-surface

Today, we will learn about how to design an Android Application and how to use Xamarin’s Visual Designer to help us through this process.

Android uses an XML as its UI designing language, and Xamarin.Android uses pretty much the same XML but calls it AXML (Android XML) to design all its user interface. Similar to Java IDEs like Eclipse, Android Studio; Xamarin Studio and Xamarin’s Visual Studio offerings have a really well built designer support to help us through this process.

All UI elements in Android app are categorized into two groups “View” and “ViewGroup”. A View is generally a single App Widget that a user interacts with like a Button or TextView. A ViewGroup is container that holds Views and other ViewGroups to form a Layout.

There are a number of ViewGroup objects in Android (we will explore about all these in coming blog posts) like –

  1. LinearLayout
  2. RelativeLayout
  3. GridLayout
  4. FrameLayout
  5. TableLayout

Before we explore different types of layouts in Android in more detail let’s see how Xamarin helps us with building User Interfaces in Android.

Xamarin Android Visual Designer

Design Surface

If you double click an AXML file in Visual Studio (or Xamarin Studio), you will be presented with a visual representation of what your app looks like currently.

xamarin-design-surface

 

This is the main designer for Xamarin Android Applications. The designer has support for switching between multiple device types so you can visually see how your application looks like on each device even before you run it.

xamarin-toolbox

The designer can also show you how your app looks in Landscape vs Portrait modes

xamarin-device-picker

The designer has options to switch between multiple API Levels, Languages, Modes (Left to Right vs Right to Left) and Themes.

Source Mode

If you would rather look right XML than use a designer, Xamarin has you covered there too. You can easily switch between Design and Source modes on the bottom left to see the XML that is generated (or written) and the UI.

xamarin-source-mode

And if you switch to Source mode here is an example of what you would see.

xamarin-actual-source

Toolbox

The designer obviously needs Widgets (Views) to be dropped on to them. To see list of widgets that are available. Open the Toolbox window in Visual Studio (View->Toolbox) and you will be presented with all the different widgets that Xamarin.Android supports.

xamarin-another-full-toolbox

You can drag and drop any of these widgets on to the design surface and see the UI update immediately.

xamarin-updated

That’s it for today. Tomorrow, let’s learn more on ViewGroups.

Get the CODE!

 

The following two tabs change content below.

Venkata Koppaka

Software Architect at Falafel Software
Venkata Koppaka has over 7 years experience developing variety of line of business applications to various financial and IT organizations. Venkata has been developing with all Telerik products since 2008, he ended working for Telerik on Sitefinity team as a senior developer for Ecommerce module. He is extremely interested in developing custom solutions for Sitefinity based Ecommerce stores. Venkata is a big fan of Test Driven Development and strives himself to write code that is completely testable and modular. Venkata has a Masters in Computer Science from Syracuse University, which drives his continuos learning addiction. In his spare time, Venkata develops apps for Windows Phone 8 platform and learns the most cutting edge technologies in software development. When he is not spending time on computer writing software, Venkata enjoys reading about cars and watching football.