Sunday, November 17, 2013

Android: Layouting

Today I want to analyze the topic layouting for Android apps a bit more in depth and especially show the usage of the TableLayout, with which already a lot can be done.
In the two previous posts we created a first Android application and in that placed controls with a LinearLayout below each other.
With a TableLayout controls can, as the name already tells, be arranged in a table form, so that virtually arbitrary positions are possible.
First I will describe the creation of the layout via an AXML file, like described in the previous post, and eventually show the C# code, which gives us the same result.
In the file "Main.axml" we first change the layout from Linear to Table:

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

A TableLayout consists of TableRows (rows). In each row we can place controls, which then are arranged next to each other.
We can add a new line to the layout and to that a new textview control as follows:

<TableRow>
    <TextView
        android:text="Textview1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
</TableRow>

By inserting an empty TableRow we can add a vertical space. Beneath it, we add a new line with a button and a textview:

<TableRow>
</TableRow>
<TableRow>
    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1" />
    <TextView
        android:text="Textview2"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
</TableRow>

The resulting layout looks as follows:










The single table cells adapt in their horizontal alignment and size, meaning for example, the cell, which contains Button1, has the same size as the cell of Textview1. If this increases because for example the text gets longer, also the cell of Button1 gets wider, Textview2 moves to the right.
If you want to add a control independent of this mechanism, for example a headline which does not influence the size of the following cells, you declare it without a containing TableRow.
Here the complete axml code with another textview, which contains a long headline on the top part of the screen:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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="Looooong Headline"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView3" />
    <TableRow>
        <TextView
            android:text="Textview1"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView1" />
    </TableRow>
    <TableRow>
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button1" />
        <TextView
            android:text="Textview2"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" />
    </TableRow>
</TableLayout>

Now as promised the content of the file "MainActivity.cs", which alternatively to the possibilty of using axml code, as describe above, generates the same result:

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

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

               var Layout = new TableLayout (this);
               Layout.Orientation = Orientation.Vertical;

               var Textview3 = new TextView (this);
               Textview3.Text = "Looooong Headline";
               Layout.AddView (Textview3);

               TableRow TableRow1 = new TableRow (this);
               var Textview1 = new TextView (this);
               Textview1.Text = "Textview1";
               TableRow1.AddView (Textview1);
               Layout.AddView (TableRow1);

               TableRow TableRow2 = new TableRow (this);
               Layout.AddView (TableRow2);

               TableRow TableRow3 = new TableRow (this);
               var Button1 = new Button (this);
               Button1.Text = "Button1";
               var Textview2 = new TextView (this);
               Textview2.Text = "Textview2";
               TableRow3.AddView (Button1);
               TableRow3.AddView (Textview2);
               Layout.AddView (TableRow3);

               SetContentView (Layout);
          }
     }
}


No comments:

Post a Comment