Creating a One activity Application

Overview

We are going to design a simple application which basically converts between different units of Measurement.  And the user can select an option from a dropdown(called Spinner in Android) and enter the quantity needed to be converted in a Textbox and click on the Convert button and the converted value is displayed in the same textbox(EditText in Android). A Clear button clears the EditText and a Close button closes the application.

We will start with a rough prototype and then build on it in future and try to improve and optimize it in different ways.

Let’s get going

Designing the interface

As can be seen from the requirements the interface would need the following widgets:

1. EditText ( Textbox)

2.TextView (Label)

3. Spinner (Dropdown box)

4. Button

Let’s design a layout in the Eclipse. Open the main.xml in the res/layout directory

And drag and drop the widgets required , start with the LinearLayout from the layouts section. Try to emulate from the highlighted section. Do not worry about the appearance too much.

Once done with the interface, name the widgets properly(By selecting the widget in Outline section and going to properties section) so that you can reference them from the code.

Once you have added the widgets, its time to launch the application and see your work of Art .;)

Of course the buttons or the spinners won’t work because we haven’t added event handlers for them.

Step 2:

Populating the Spinner widget. (Android Spinner, XML resources, Adapter)

We will be populating the Spinner using values from an XML file. This is the best way to decouple the business logic from the User interface. Android provides options to create different types of XML resources , for the time being just goto the res/values and right click on it >> New >> Android XML File

Select the Resource Type as Values and click Finish.

Copy and Paste the XML below. As can be seen from the XML file we have defined 2 arrays :

  1. conversions : Used to populate the spinner.
  2. multipliers: Used in the conversion calculation.
<?xml version="1.0" encoding="utf-8"?>

<resources>

	<string-array name="conversions">

		<item>Pounds to Kgs</span></item>

		<item>Kgs</span> to Pounds</item>

		<item>Kilometers to Miles</item>

		<item>Miles to Kilometers</item>

		<item>Degrees Celsius</span> to Degrees Fahrenheit</span></item>

		<item>Degrees Fahrenheit</span> to Degrees Celsius</span></item>

	</string-array>

	<string-array name="multipliers">

		<item>0.450</item>

		<item>2.20462</item> <!-- Acres to Square Miles -->

		<item>0.621371</item> <!--Atmospheres to Pascals</span>  -->

		<item>1.60934</item> <!--Bars to Pascals</span> -->

		<item>0</item> <!--Degrees Celsius</span> to Degrees Fahrenheit</span> -->

		<item>0</item> <!--Degrees Fahrenheit</span> to Degrees Celsius</span>  -->

	</string-array>

</resources>

Eclipse power tip : To Beautify any code in Eclipse IDE use Ctrl+Shift + f for windows and Command + shift+ f for Mac.

Save the XML file and get back to the code window.

Add the following code

// Getting a reference to the Spinner from the layout

final Spinner spnConversions = (Spinner) findViewById(R.id.conversions);

// Creating the items from the Array resource

ArrayAdapter<CharSequence> aa = ArrayAdapter.createFromResource(this,

R.array.conversions,

android.R.layout.simple_spinner_item);

//Setting the spinner item look from android layouts

aa.setDropDownViewResource(android.R.layout.simple_spinner_item);

// Populating the spinner with the XML data

spnConversions.setAdapter(aa);

Run the application and you should see the items once you click on the small down arrow on the spinner.

Add the following code for attaching a listener to the spinner widget.

AdapterView.OnItemSelectedListener spinlistener = new OnItemSelectedListener() {

public void onItemSelected(AdapterView<?> arg0, View arg1,
int position, long id) {
//save the selected position
MainActivity.this.position = position;
}

public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}
};
//attaching the listener
spnConversions.setOnItemSelectedListener(spinlistener);

The code snippet saves the position of selected item. Declare a private attribute in activity named position.

Next add the listeners for the Clear and the Close buttons.

// Adding listener for the close button

Button btnClose = (Button) findViewById(R.id.close);

View.OnClickListener btnCloselistener = new View.OnClickListener() {

public void onClick(View v) {

//closing the application

finish();

}

};

// Attaching the listener to the button

btnClose.setOnClickListener(btnCloselistener);

// Adding listener for the close button

Button btnClear = (Button) findViewById(R.id.clear);

View.OnClickListener btnClearListener = new OnClickListener() {

public void onClick(View v) {

//clearing the text from EditText

txtValue.setText(“”);

}

};

// Attaching the listener to the button

btnClear.setOnClickListener(btnClearListener);

This finishes the simple application; we will be building on the application in the next coming up tutorials.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s