Multi-Screen Android Apps and More Layouts

This week we worked with multi-screen Android apps. We also started to look at more layouts that can be used to construct your UI.

We started a new project called LayoutDemo together in class to explore some of the layout options in Android. We started with the linear layout, including horizontal and vertical orientations. For this lab, you will be extending this project with two additional layout examples:

Relative Layout (More Info)
1. Add a new string resource called relative_layout with text of "Relative Layout" in Resources/values/Strings.xml.
2. Add a new layout resource called RelativeLayout.axml.
3. Replace the contents of RelativeLayout.axml with the XML from step 2 in Xamarin's Relative Layout example. Be sure to save your changes.
4. Add a new activity called RelativeLayoutActivity to your project. Set the label on the Activity to "@string/relative_layout".
5. In the OnCreate method in RelativeLayoutActivity.cs, call the activity's SetContentView method, passing in the resource for RelativeLayout.axml.
6. On the main layout (Main.axml), add a button with the Id property set to "@+id/relativeLayoutButton", and set the text to "@string/relative_layout".
7. In MainActivity.cs, add a Click event handler for relativeLayoutButton which launches the RelativeLayoutActivity.

Grid Layout (More Info)

Add a new string resource called grid_layout with text of "Grid Layout" in Resources/values/Strings.xml.
Add a new layout resource called GridLayout.axml.

Replace the contents of GridLayout.axml with the following XML (adapted from Xamarin's Grid Layout example). Be sure to save your changes.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:id="@+id/linearLayout1">
        <TextView
            android:text="Basic"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView1" />
        <GridLayout
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:rowCount="2"
            android:columnCount="2"
            android:layout_marginBottom="5dip"
            android:id="@+id/gridLayout1">
            <TextView
                android:text="Cell 0"
                android:textSize="14dip"
                android:id="@+id/textView2" />
            <TextView
                android:text="Cell 1"
                android:textSize="14dip"
                android:id="@+id/textView3" />
            <TextView
                android:text="Cell 2"
                android:textSize="14dip"
                android:id="@+id/textView4" />
            <TextView
                android:text="Cell 3"
                android:textSize="14dip"
                android:id="@+id/textView5" />
        </GridLayout>
        <TextView
            android:text="Vertical Orientation"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView6" />
        <GridLayout
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:rowCount="2"
            android:columnCount="2"
            android:orientation="vertical"
            android:layout_marginBottom="5dip"
            android:id="@+id/gridLayout2">
            <TextView
                android:text="Cell 0"
                android:textSize="14dip"
                android:id="@+id/textView7" />
            <TextView
                android:text="Cell 1"
                android:textSize="14dip"
                android:id="@+id/textView8" />
            <TextView
                android:text="Cell 2"
                android:textSize="14dip"
                android:id="@+id/textView9" />
            <TextView
                android:text="Cell 3"
                android:textSize="14dip"
                android:id="@+id/textView10" />
        </GridLayout>
        <TextView
            android:text="Explicit Position and Spacing"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView11" />
        <GridLayout
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:rowCount="4"
            android:columnCount="2"
            android:layout_marginBottom="5dip"
            android:id="@+id/gridLayout3">
            <TextView
                android:text="Cell 0"
                android:textSize="14dip"
                android:layout_row="0"
                android:layout_column="0"
                android:id="@+id/textView12" />
            <TextView
                android:text="Cell 1"
                android:textSize="14dip"
                android:layout_row="0"
                android:layout_column="1"
                android:id="@+id/textView13" />
            <Space
                android:layout_row="1"
                android:layout_column="0"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:id="@+id/space1" />
            <TextView
                android:text="Cell 2"
                android:textSize="14dip"
                android:layout_row="2"
                android:layout_column="0"
                android:id="@+id/textView14" />
            <TextView
                android:text="Cell 3"
                android:textSize="14dip"
                android:layout_row="2"
                android:layout_column="1"
                android:id="@+id/textView15" />
            <Button
                android:id="@+id/nonSpanningButton"
                android:text="Non-Spanning Button"
                android:layout_row="3"
                android:layout_column="0" />
        </GridLayout>
        <TextView
            android:text="Spacing and Spanning"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textView16" />
        <GridLayout
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:rowCount="3"
            android:columnCount="2"
            android:id="@+id/gridLayout4">
            <TextView
                android:text="Cell 0"
                android:textSize="14dip"
                android:layout_row="0"
                android:layout_column="0"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:id="@+id/textView17" />
            <TextView
                android:text="Cell 1"
                android:textSize="14dip"
                android:layout_row="0"
                android:layout_column="1"
                android:id="@+id/textView18" />
            <TextView
                android:text="Cell 2"
                android:textSize="14dip"
                android:layout_row="1"
                android:layout_column="0"
                android:id="@+id/textView19" />
            <TextView
                android:text="Cell 3"
                android:textSize="14dip"
                android:layout_row="1"
                android:layout_column="1"
                android:id="@+id/textView20" />
            <Button
                android:id="@+id/spanningButton"
                android:text="Spanning Button"
                android:layout_row="2"
                android:layout_column="0"
                android:layout_columnSpan="2" />
        </GridLayout>
    </LinearLayout>
</ScrollView>

Add a new activity called GridLayoutActivity to your project. Set the label on the Activity to "@string/grid_layout".
In the OnCreate method in GridLayoutActivity.cs, call the activity's SetContentView method, passing in the resource for GridLayout.axml.
On the main layout (Main.axml), add a button with the Id property set to "@+id/gridLayoutButton", and set the text to "@string/grid_layout".
In MainActivity.cs, add a Click event handler for gridLayoutButton which launches the GridLayoutActivity.

In LinearLayoutActivity.cs, set the label on the Activity to "@string/linear_layout".
Please zip and turn in the LayoutDemo project with your changes.
Please also zip and turn in the multi-screen Phoneword project we did together in class.

10-152-383 - Mobile Programming 1

2.3 Lab

Multi-Screen Android Apps and More Layouts