Sunday, November 17, 2013

Android: Define App Layout via AXML

In the previous post I explained the creation of a first Android app. There we added 2 controls to the app window, a textview and a button, and aligned them vertically with a LinearLayout. The creation of the controls and their alignment we did in the code of the OnCreate() function.
But also like in WPF applications, in Android apps the layout can be defined via a file which is based upon an XML format. In today's post I want to write about that and create the layout of the app from the previous post with this principle.
Xamarin saves the layout as an axml file. When creating a new project, for the mainactivity a corresponding layout file is created. This can be found when expanding the folder "Resources" on the left side, then "layout" under the name "main.axml".
If you click on it, it opens, now either like in Visual Studio controls can be added to the window via drag & drop or after clicking "source" via AXML code. I will here describe the second alternative.
The first lines of the file look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

Here amongst others the XML version to be used is set, and, for us important, the type of layout is determined, which is already the desired LinearLayout.
We now add with some lines of XML code, which should be self explanatory, the controls:

<TextView
android:text="Hello Android"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/TextView1" />
<Button
    android:id="@+id/Button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Click me" />

After a click on "Content", a preview of the program window is shown:
The complete XML code of the file is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
     android:text="Hello Android"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/TextView1" />
    <Button
        android:id="@+id/Button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Click me" />
</LinearLayout>

Back in the C# code of the file "MainActivity.cs" we have to tell the program, that it should use the layout from the resources, which we do with
SetContentView (Resource.Layout.Main);

Via Resource.Layout we access the resource folder, Main(.axml) is the name of our desired file.
To be able to access the controls, we have to reference them via their ID:

Button Button1 = FindViewById<button> (Resource.Id.Button1);
TextView TextView1 = FindViewById (Resource.Id.TextView1);

The remaining code for adding an event handler is of course the same, the complete code of the file "MainActivtiy.cs" is:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace FirstApplicationAXML
{
     [Activity (Label = "FirstApplicationAXML", MainLauncher = true)]
     public class MainActivity : Activity
     {
          protected override void OnCreate (Bundle bundle)
          {
               base.OnCreate (bundle);

               SetContentView (Resource.Layout.Main);

               Button Button1 = FindViewById<button> (Resource.Id.Button1);
               TextView TextView1 = FindViewById (Resource.Id.TextView1);

               Button1.Click += delegate {
                    TextView1.Text = "Button clicked";
               };
          }
     }
}

No comments:

Post a Comment