Android Layout - Part II.

In Part I., I rambled through setting up a layout for the RatCat game.  And I ended with a note that the layout will not work well should the device be held in the landscape position.   Fortunately,   there is a good reference here on how to do this.

It appears that three things are necessary to handle rotation

1. Create layouts that handle rotation.


2. Set the rotation behavior in your AndroidManifest file.


3. Handle rotation in your application code by saving state or caching data.

Let's start with the first one.  I am going to want two layouts: one for portrait and one for landscape.  It turns out that I have to put this landscape layout in a different folder: /res/layout-land

To rotate the screen in my emulator, I use ctrl-F11.  Some emulators use ctrl-F12.  Some use shift-F11.  Some don't work if one uses the right ctrl or shift key.  Ctrl-F11 works for me.

So, I end up with this:

    <TextView
        android:id="@+id/LineOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/TopLine"  [1]
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="15dp"
        android:text="1"                        [2]
        android:textColor="#FFFFFF"            
        android:textSize="36dp" />

    <TextView
        android:id="@+id/LineTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TopLine" 
        android:layout_centerHorizontal="true"
        android:layout_alignLeft="@+id/TopLine" 
        android:layout_marginTop="10dp"
        android:text="@string/LineTwoTxt"
        android:textColor="#FFFFFF"
        android:textSize="30dp" />

    <EditText
        android:id="@+id/entry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/LineOne"     [3] 
        android:layout_toRightOf="@+id/LineTwo"  
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:ems="6" >
        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginRight="20dp"
        android:layout_below="@+id/entry"
        android:text="@string/Button" />

Notes:
[1]   The ToRightOf method puts the item to the right of TopLine on the same line.

[2]  Make a note of this:  when we shift orientation we reset the "Rat's" display value to '1'. Note that we do not change the internal value.  Which means, if the counter has gone up to 3 (so the Rat is showing 'RAT', and we rotate the device, the RAT is now showing '1', but the correct response is still '4'. 

[3]  We want this to be below Line One and to the right of Line Two.  One might expect that the ToRightOf method would do both.  It doesn't.

This post I actually proofread. And discovered that modern browsers + blogger have a terrible time trying to render the XML from an Android app. It seems that they don't know if it should be considered XHTML or XML, so they combine the worst features of each guess. I found the following problems:
The < and > symbols looked like some sort of a tag, so they and everything between them got stripped.
Trying to surround them with a <PRE> tag didn't work eitherl the browser thought that I had some kind of an XML document, and treated it accordingly.
So, what I finally did was to use the ampersand encoding for LT and GT to get my PRE and /PRE tags. I will be going back and fixing up part I of this.

The problem mentioned in note [2] will be discussed after  the Java code gets discussed, where it may actually make sense.