Objectives:

• Familiar with Android Studio
• Open project and manipulate project
• Define Android Virtual Device (AVD)
• Utilize widgets to accept user input
• Design layout
• Handle event
• Run App

Steps:

Task 1: Design Layout

Step 1: Launch Android Studio

Step 2: Create Project MiniCalculator using Empty template

Step 3: View the layout (activity_main.xml) on the layout editor

• Make sure you know the difference between Design tab and Code tab

Step 4: Review the java code

Step 5: Review AndroidManifest.xml

Step 6: Define an AVD (e.g., Nexus 6) if no AVD is defined earlier

Step 7: Run the app

Step 8: Remove Hello World! TextView

Step 9: By default autoconnection should be off if not turn if off

Step 10:

Step 10.1: In Palette, click Text and Drag TextView to ConstraintLayout in the Component Tree

Make sure the Text field is focused

Set up the following properties:

text: Bill Amount

Step 10.2: Drag Plain Text into ConstraintLayout below TextView

Make sure the Plain Text field is focused (Highlighted)

Set up the following properties:

id: bill_amount (If system asks for Refactor, just click on it)

text: (Make the text field empty)

inputType: make sure only number is checked

Step 10.3: Drag a button into ConstraintLayout below bill_amount text field

Set up the following properties:

id: btn_pay

text: PAY

Step 11: You can arrange the layout yourself or use the Infer Constraints to arrange layout and make sure no error exists (warning is fine)

Step 12: Run the app

Task 2: Wire up with code

Step 13: Go to MainActivity.java

Step 13.1: Define the following variables

EditText billAmountEditText; //Button btn_pay;

Step 13.2: Define the code below setContentView() in onCreate()

// get references to the widgets billAmountEditText = findViewById(R.id.bill_amount); //btn_pay = findViewById(R.id.btn_pay);

Step 14: Define the following method pay() as follows: (You can put this method below onCreat())

public void pay(View view){ Toast.makeText(view.getContext(), billAmountEditText.getText(), Toast.LENGTH_LONG).show(); }

Step 15: Back to design mode, highlight Pay button, find the onClick property and put pay as the attribute value

Step 16: Save and run the app (You can keep changing the bill amount and click on pay to make sure you can access the user input)