step 1: create project - delnelm.files.wordpress.com€¦ · web viewstep 1: create project....

Hands-on Tutorial #7

Concert Tickets: Themes, User Input, Variables, and Operations

Step 1: Create ProjectStart Eclipse and create a New Project.

Project Name: Boot Camp Concert Tickets Build Target: 4.0 Application Name: Concert Tickets

Package Name: net.wc.concerttickets

Create Activity: Main

Step 2: Start Building the User Interface Open main.xml (located in res/layout) Delete the TextView that says “Hello World,

Main!” Right-click in the emulator window and

select Change Layout In the Change Layout dialog box, click the

New Layout Type button and select Relative Layout

Click the OK button At the top the Design window, click the

Theme button to display a list of built-in themes

Select Theme.Black.NoTitleBar

From: Chapter 3 – Hoisington’s Android Boot Camp


In Package Explorer, double-click the AndroidManifest.xml file Click the AndroidManifest.xml tab at the bottom of the window Code the theme within the Activity by adding the line to the Manifest that has a box around it

below:

Close the Manifest window and Save your work Double click main.xml to view the emulator

screen Click the Form Widgets category in the Palette Drag and drop the TextView control onto the

emulator user interface to the center of the screen

Open the properties pane Set the Text property to Ticket Vault Set the Text size property and type 40sp.



Click the Text Fields category in the Palette Scroll down to the Number (example shows a

42) Text Field Drag and drop the Number Text Field control to

the center of the screen just below the TextView

Set the Id property to @+id/txtTickets Set the Text Size property to 25sp. Set the Hint property to Number of Tickets

Step 3: Coding the EditText Class for the Text FieldThe EditText class extracts text from a Text Field control and converts it for use in a Java program. In this step you will add the code necessary to assign the input value in the txtTickets control to a variable named tickets.

In the Package Explorer, expand src and net.wc.concerttickets, and double click Main.java to open the code window

Click to the right of the line: setContentView(R.layout.main) and press the ENTER key to start a new line

To initialize and reference the EditView class with the Id name of txtTickets, type:final EditText tickets= (EditText) findViewById(R.id.txtTickets);

Hover over the red curly line under EditText and select Import ‘EditText’ (android widget).

Close the Main.java tab and save your work



Step 4: Adding a Spinner Control with String Array Entries Double click the values folder in the

Package Explorer Double click strings.xml Click the Add button in the

Resources tab

In the dialog box select String Array Click the OK button.

Type Groups in the Name text box to name the String Array.



Click the Add button in the Android Resources view again

Select Item Click the OK button

Type the Value in the text box for the item Dragonfly

Repeat twice more to create an Item for Nine Volt and another for Red Road

To add a prompt title represented as a String at the top of the Spinner, click the Add button

Select the top radio button to Create a new element at the top level, in Resources

Select String Click the OK button.



In the Name text box, type Title In the Value text box, type Select

Group Close the strings.xml tab and save

Double click main.xml in the layout folder

In the Form Widgets category on the Palette, drag and drop the Spinner control below the Text Field and center it horizontally

Change the Id property to @+id/txtGroup

Click the File menu and choose Save All to update all resources

Click to the right of the Prompt property

Click the ellipsis button In the Reference Chooser dialog

box click the expand arrow in front of String

Select Title and click the OK button



To display the String Array, click to the right of the Entries property

Click the ellipsis button (three dots) In the Reference Chooser dialog

box click the expand arrow in front of Array

Select Groups and click the OK button

Step 5: Coding the Spinner ControlJust like the number of tickets, the user’s selection of the concert group must also be assigned to a variable. In this step you will add the code necessary to assign the selection made in the txtGroup control to a variable named group.

In the Package Explorer, expand src and net.wc.concerttickets, and double click Main.java to open the code window

After the EditText line, press the Enter key to create a new line To initialize and reference the Spinner with the Id name of txtGroup, type:

final Spinner group = (Spinner) findViewById(R.id.txtGroup); Hover over the red curly line under EditText and select Import ‘Spinner’ (android

widget).

Close the Main.java tab and save your work



Step 6: Adding the Button, TextView and ImageView Controls Double click main.xml in the layout folder Click the Form Widgets category in the Palette Drag a Button control to the emulator below

the Spinner control and center it

Button properties Set the Id property to @+id/btnCost Set the Text property to Find Ticket Cost Set the Text Size property to 25sp

Drag a TextView control to the emulator below the Button control and center it

TextView properties Set the Id property to @+id/txtResult Set the Text Size property to 20sp Delete the text from the Text property

Drag the concert.png file from Resource Files/Lab 7 to res/drawable-hdpi and copy it

Drag an ImageView control to the emulator below the TextView and center it at the bottom

Click concert in the Resource Chooser dialog box and click OK

ImageView property Set the Layout margin bottom property to 0dp



Step 7: Coding the Button and Result TextViewThe Button needs to be accessible by code so an event handler can be set for when it is clicked. The TextView txtResult also needs to be coded like the prior controls.

Return to Main.java To initialize the Button with the Id name of btnCost, type:

Button cost = (Button) findViewById(R.id.btnCost); Hover over the red curly line under Button and select Import ‘Button’ (android widget). Press the Enter key To code the button listener that awaits user interaction, type cost.setOn and a code listing opens (or

press Ctrl+spacebar if it doesn’t) Double-click the first setOnClickListener displayed in the auto completion listing Inside the parenthesis type new on and press CTRL + space to display auto completion listing. Double click the first choice which lists an OnClickListener with an Anonymous Inner Type event

handler Hover over OnClickListener (not setOnClickListener) and select Import ‘OnClickListener’

(android.view.View) Place a semicolon at the end of the auto-generated stub closing brace and closing parenthesis Your code should look like this:



We also need to code the TextView control in Main.java After the line of code referring to the Button cost, type a new line with the code:

final TextView result = ((TextView) findViewById (R.id.txtResult)); Import the ‘TextView’ (android.widget) The code now looks like this:

Step 8: Declaring the VariablesVariables in an Android application are typically declared at the beginning of an Activity.

In Main.java, below the comment: /** Called when the activity is first created */, type the following four lines of code to initialize the variables in this Activity:

double costPerTicket=59.99;

int numberOfTickets;

double totalCost;

String groupChoice;



Step 9: Calculating, Formatting, and Displaying Output In Main.java, inside the OnClickListener onClick method stub (after the comment that says //

TODO Auto-generated method stub), type the following three lines of code:

numberOfTickets =Integer.parseInt(tickets.getText().toString());

totalCost= costPerTicket * numberOfTickets;

DecimalFormat currency = new DecimalFormat("$###,###.##");

groupChoice = group.getSelectedItem().toString();

result.setText("Total Cost for " + groupChoice + " is " + currency.format(totalCost));

Import the ‘DecimalFormat’ (java.text) class

Step 10: Run the AppFinally, run it! Enter the number of tickets that you’re ordering, choose a group and click the Button to see your results.


step 1: create project - delnelm.files.wordpress.com€¦ · web viewstep 1: create project....

Documents