Creating Your Layout

To begin designing your layout, open main.xml in Eclipse. In total, you will be adding one Button and four TextViews to the layout. The Button will call the information from the GPS and display it to the TextViews.

Set up the Button as follows, which creates a Button layout that fills the top part of the screen and contains the text "Where Am I":

<Button android:id="@+id/gpsButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Where Am I" />

Next, set up the four TextViews. You should arrange them in the layout so that they appear as two TextViews on top of two more TextViews. This will let you use two of them as labels for the others. To accomplish this, you need to implement two more LinearLayouts.

Notice that all the elements in main.xml are contained in a LinearLayout tag. This tag binds the elements within it to certain rules. For LinearLayouts, the elements are stacked one after the other either in a vertical or horizontal orientation.

The orientation of the LinearLayout is governed by the android:orientation attribute. If this attribute is not assigned, the layout defaults to horizontal. Figure 9-1 shows what a vertical LinearLayout does.

Notice that there are several slots or shelves stacked vertically. You can place elements on these shelves to stack your items on the screen. However, if you want to place a few items next to each other on the same shelf of a vertical LinearLayout, then you need to place a horizontal LinearLayout on the shelf first. This concept can be seen in Figure 9-2.

Android screen -

Figure 9-1 Vertical LinearLayout

Horizontal LinearLayout

Android screen -

Figure 9-2 Vertical LinearLayout with embedded horizontal LinearLayout

You can now stack elements next to each other and above and below each other. This is the concept you need to employ in this Activity. Therefore, under the button, add a horizontal LinearLayout to hold two of the TextViews.

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width="wrap_content"

android:layout_height="wrap_content" >

<TextView android:id="@+id/latLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Latitude: "

<TextView android:id="@+id/latText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

</LinearLayout>

These two TextViews hold the label and value for the latitude that you will collect from the GPS. Next, add another horizontal LinearLayout to hold the remaining two TextViews:

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width="wrap_content"

android:layout_height="wrap_content" >

<TextView android:id="@+id/lngLabel" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Longitude: "

<TextView android:id="@+id/lngText" android:layout_width="wrap_content"

android:layout_height="wrap_content"

</LinearLayout>

This will give you a good layout for this particular Activity. Your finished main.xml file should 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"

<Button android:id="@+id/gpsButton"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Where Am I"

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"

android:layout_height="wrap_content"

<TextView android:id="@+id/latLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Latitude: 11 />

<TextView android:id="@+id/latText" android:layout_width="wrap_content"

android:layout_height="wrap_content"

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"

android:layout_height="wrap_content"

<TextView android:id="@+id/lngLabel" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Longitude: 11

<TextView android:id="@+id/lngText" android:layout_width="wrap_content"

android:layout_height="wrap_content"

</LinearLayout> </LinearLayout>

0 0

Post a comment