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 –
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
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.
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.
The designer can also show you how your app looks in Landscape vs Portrait modes
The designer has options to switch between multiple API Levels, Languages, Modes (Left to Right vs Right to Left) and Themes.
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.
And if you switch to Source mode here is an example of what you would see.
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.
You can drag and drop any of these widgets on to the design surface and see the UI update immediately.
That’s it for today. Tomorrow, let’s learn more on ViewGroups.
Latest posts by Venkata Koppaka (see all)
- Day 31: Distributing your Android App and Wrap-up - August 31, 2015
- Day 30: Monitoring your Xamarin.Android applications using Xamarin Insights - August 30, 2015
- Day 29: Plugins for Xamarin.Android - August 29, 2015
- Day 28: Using SQLite.Net with Xamarin.Android - August 28, 2015
- Day 27: Using HttpClient with Xamarin.Android - August 27, 2015