3: Widgets & Callbacks
MyRent-00 01 02 03 04 05 06 07 08 09 10 Archives


Objectives

We start a new application in this lab, which will be succeeded by numerous version over the next few topics. In this lab the focus is on explaining the essential 'plumbing' of the app, and introducing the first Interface based listener you may have encountered.

Create Project

Figure 1: Android Application Project

Figure 2: New Android Application window Figure 3: Action Bar

Complete the New Android Application Wizard as shown in the following screenshots (Figure 4): Figure 4: New Application Wizard

When the Finish button is pressed, the result is as displayed in Figure 5 Figure 5: activity_myrent.xml

The directory structure, viewable in Eclipse Package Explorer, is depicted in Figure 6. Figure 6: MyRent Android application directory structure

Layout XML

Some of the key files of the application are identified in the screenshot of the Package Explorer as illustrated in Figure 1.

Figure 1: Key Application Files

Layout XML Code

The file activity_myrent.xml specifies the screen layout. The textual content of the file is as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.wit.myrent.MyRentActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

This translates to the graphical layout shown in Figure 2.

Figure 2: Graphical representation of activity_myrent.xml

Tabs enable one to quickly switch between graphical and textual content as demonstrated in Figure 3. Figure 3: Tabs facilitate switching between graphical and textual views of layout

From the XML above you can see that the layout comprises a TextView wrapped in a Relative Layout.

Both the RelativeLayout and TextView definitions contain attributes that determine characteristices such as, for example, their size and position.

Thus, in the case of TextView, the attribute android:layout_width, whose value is wrap_content, determines that the view will be created just wide enough to contain the text specified by the attribute android:text (whose value is @string/hello_world).

This becomes clear if you select Hello world in the graphical representation of activity_myrent.xml as demonstrated in Figure 4. Figure 4: TextView width attribute value set to "wrap_content"

Were the TextView attribute android:layout_width set to fill_parent the situation would be as represented in Figure 5. Figure 5: TextView width attribute value set to "fill_parent"

A short tutorial is available is available here that demonstrates the effect of different values for layout_width and layout_height attributes.

Strings

The file strings.xml, located in res/values, contains all the text that MyRent application uses. This arrangement, rather than hard-coding strings when and where required in the code, greatly facilites any changes to the strings, such as for example adapting your application to a new language.

Presently strings.xml contains only 3 entries (see Figure 1):

Figure 1: strings.xml

Figure 2: Options Menu item on Action bar (Settings)

At any location in the code that the name of the application is required it may be obtained by accessing a string element thus:

"@string/app_name"

This is illustrated in Figure 3 below where the application's name is retrieved in AndroidManifest.xml.

Figure 4 shows how the Hello world! string, displayed when the application is launched, is obtained.

Figure 5 shows how an entry in the Action bar (Settings) is obtained.

Figure 3: AndroidManifest.xml Figure 4: res/layout/activity_myrent.xml Figure 5: res/menu/my_rent.xml

R File

All auto-generated files are located in the gen folder and should not be modified by the developer.

Java

MyRentActivity

onCreate

onCreateOptions

onOptionsItemSelected

Figure 1: MyRentActivity.java

Figure 2: MyRent menu item on Action bar

Figure 3: Program halts at breakpoint in when menu selected

Run App

Start the Genymotion emulator

Run the app

Select myrent-android project in the Eclipse Package Explorer

Figure 3: Run application Figure 4: Android Device Chooser Figure 5: Hello world

Model

We first begin with a new model class: Residence.

Residence.java

package org.wit.myrent;

import java.util.UUID;

public class Residence
{
  private UUID id;

  //a latitude longitude pair
  //example "52.4566,-6.5444"
  private String geolocation;

  public Residence()
  {
    id = UUID.randomUUID();
  }

  public void setGeolocation(String geolocation)
  {
    this.geolocation = geolocation;
  }

  public String getGeolocation()
  {
    return geolocation;
  }
}

Layout

A general note on layout development: Android Development Kit (ADK) provides two ways to to create a user interface (UI):

In this series of labs we shall develop the UI in XML but use Java to where necessary to interact with UI components. For example when data is entered in a UI control (for example a text input component), then the ensuing operations will be handled programmatically using Java.

Back to the present iteration: We have completed the refactoring of the Java code.

Here we shall address the necessary changes to the layout.

First, we need to make a change to the file res/values/strings.xml.

The legacy code from the baseline MyRent app is as shown here in Figure 1:

Figure 1: Legacy strings.xml

Replace this with the following:

Filename: strings.xml

<resources>

    <string name="app_name">MyRent</string>
    <string name="title_activity_myrent">MyRentActivity</string>
    <string name="geolocation_hint">52.253456,-7.187162</string>
    <string name="action_settings">Settings</string>

</resources>

Observe that we have deleted the Hello world! string and replaced it with a string describing the Geolocation hint.

Recall the output generated on launching the baseline app:

Figure 2

Our goal is now to replace this output with the following:

Figure 3

Open activity_myrent.xml in the folder res/layout

Its content should be as shown in Figure 4: Figure 4: Legacy activity_layout.xml

Replace the content of the file with the following:

activity_myrent.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.wit.myrent.MyRentActivity" >

      <EditText
          android:id="@+id/geolocation"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_alignParentRight="true"
          android:hint="@string/geolocation_hint" />

</RelativeLayout>

Figure 5: Graphical layout of fragment.

Study the Graphical Layout, Outline and Properties in the IDE, all as shown in Figure 5.

The application should be error free and capable of being launched and generating output as shown here in Figure 6.

Figure 6: MyRent

Tip: in order to understand more clearly how layout works, refer to Figure 7 below which shows how selected parts of the UI may be colored during development.

Filename: colors.xml

<resources>
  <color name="red">#ffff0000</color>  
  <color name="green">#FF99CC00</color>
  <color name="blue">#FF33B5E5</color>
  <color name="orange">#FFFFBB33</color>
  <color name="purple">#FFAA66CC</color>
  <color name="darkorange">#FFFF8800</color>
</resources>

Figure 7: Using color in layout

Listeners

We shall now inject code into the MyRentActivity class that shall:

Figure 1: The R class

Here are the steps in refactoring MyRentActivity to introduce a listener:

First introduce a reference to the model object + the TextEdit field:

public class MyRentActivity extends Activity
{
  private EditText  geolocation;
  private Residence residence;


import android.text.Editable;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_myrent);

    geolocation = (EditText) findViewById(R.id.geolocation);
    residence = new Residence();
  }

Next we implement the Listener interface:

public class MyRentActivity extends Activity implements TextWatcher
{

This will generate errors until we provide a suitable implementation:

  @Override
  public void afterTextChanged(Editable c)
  {
    residence.setGeolocation(c.toString());
  }

  @Override
  public void beforeTextChanged(CharSequence c, int start, int count, int after)
  {
  }

  @Override
  public void onTextChanged(CharSequence c, int start, int count, int after)
  {
  }

These imports are required:

import android.text.Editable;
import android.text.TextWatcher;

Figure 2: Listener in action

Let's examine the listener code in some detail. This is contained in the method private void geolocation.

Figure 3: Analysis of listener code

Summary

Here is what we have done in this topic:

Archives

This is a version of MyRent complete to the end if this lab:



Prepared by Eamonn de Leastar (edeleastar@tssg.wit.ie) & John Fitzgerald (johnjfitzgerald@outlook.com). Except where otherwise noted, this content is licensed under a Creative Commons Attribution-NonCommercial 4.0 License