workshop - lo chi wing's personal web site · 2015-05-04 · android apps development for...

Android Apps Development for Mobile and Tablet Device (Level I) Lesson 2

X4-XT-CDP-0251-A @ Peter Lo 2015

Workshop

1. Compare different layout by using Change Layout button ( – 5)

� Relative Layout

� Linear Layout (Horizontal)

� Linear Layout (Vertical)

� Frame Layout

2. Revision on basic programming skill - control structure (Page 6 – 9)

� do … while loop

� while loop

� for loop

3. Use the basic component on TextView, Button, Toast, Checkbox and Radio Button. Then

identify the different InputType on EditText (Page 10 – 16)

� text

� number

� phone

� textMultiLine

� textCapCharacters

� textPassword

� textAutoCorrect

4. It’s time for you to create the first game: “Guess Number”. The app should pick a secret number

(0 – 9) and let the user guess what number it is. User is only allowed to input number in the text

field. If the guess number is too large or too smaller, the program should provide a hint. If the

guess number is correct, the program should congratulate the user. (Page 17 – 20)


X4-XT-CDP-0251-A @ Peter Lo 2015 1

1. Android Layout

1.1 Relative Layout 1. Create the Android application with the following attributes.

․ Application Name: MyLayout

․ Project Name: MyLayout

․ Package Name: com.example.mylayout

2. By using drag and drop, add a button after the text “Hello World”.

3. Right click the layout XML “activity_main.xml” and select Open With � Text Editor. The

XML code for the layout is listed as below. <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=".MainActivity" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"



android:layout_height="wrap_content"

android:text="@string/hello_world" />

<Button

android:id="@+id/button1"



android:layout_alignParentTop="true"

android:layout_toRightOf="@+id/textView1"

android:text="Button" />

</RelativeLayout>

1.2 Horizontal Linear Layout 1. Right click the layout, and then select Change Layout.

2. Select “LinearLayout (Horizontal)” in the “Change Layout” dialog.



3. The layout will be changed as follow.

4. The XML code for “activity_main.xml” is listed below: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


android:id="@+id/LinearLayout1"








<TextView





<Button





</LinearLayout>



1.3 Vertical Linear Layout 1. Change the layout to “LinearLayout (Vertical)”.

2. The XML code for “activity_main.xml” is listed below: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


android:id="@+id/LinearLayout2"



android:orientation="vertical"






<TextView





<Button





</LinearLayout>



1.4 Frame Layout 1. Change the layout to “FrameLayout”.

2. The XML code for “activity_main.xml” is listed below: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"


android:id="@+id/FrameLayout1"








<TextView





<Button





</FrameLayout>



2. Programming Control Structure

2.1 The do…while Loop 1. Create a new Android application with the following attributes.

․ Application Name: MyDoWhileLoop

․ Project Name: MyDoWhileLoop

․ Package Name: com.example.mydowhileloop

2. Open the source file "MainActivity.java" and modify the code as follow: package com.example.mydowhileloop;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.Toast;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

int i = 1;

do {

Toast.makeText(this, "i = " + i, Toast.LENGTH_LONG).show();

} while ( i++ < 3 );

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

}



3. Save and execute the app. How many messages do you obtain?

2.2 The while Loop 1. Create a new Android application with the following attributes.

․ Application Name: MyWhileLoop

․ Project Name: MyWhileLoop

․ Package Name: com.example.mywhileloop

2. Open the source file "MainActivity.java" and modify the code as follow: package com.example.mywhileloop;






@Override




int i = 1;

while ( i++ < 3 ) {


}

}

@Override






return true;

}

}


2.3 The for Loop 1. Create a new Android application with the following attributes.

․ Application Name: MyForLoop

․ Project Name: MyForLoop

․ Package Name: com.example.myforloop

4. Open the source file "MainActivity.java" and modify the code as follow: package com.example.myforloop;






@Override




int i = 1;



for ( i = 1; i < 3; i++) {


}

}

@Override




return true;

}

}




3. Simple Component

3.1 Simple Components 1. Create a new Android application with the following attributes.

․ Application Name: MySampleUI

․ Project Name: MySampleUI

․ Package Name: com.example.mysampleui

2. Change the Text of TextView1 to “Please input something:”.

3. Drag a Plain Text to the layout.

4. Drag a Button to the layout and change the text to “Submit”.



5. Double click the source file "MainActivity.java" under "src" folder to open the Java editor, and

then modify the source code as follow: package com.example.mysampleui;




import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.EditText;



@Override




// Attach the listener to the button

Button mButton = (Button) findViewById(R.id.button1);

mButton.setOnClickListener(new OnClickListener() {

public void onClick(View arg0) {

EditText mEditText = (EditText) findViewById(R.id.editText1);

String UserInput = mEditText.getText().toString();

// Display the message

Toast.makeText(getApplicationContext(), UserInput,

Toast.LENGTH_SHORT).show();

}

});

}

@Override




return true;

}

}



6. Save and execute the app, can you observe the change after press the button?

7. Then change the InputType (such as text, number, phone, textMultiLine, textCapCharacters,

textPassword, textAutoCorrect) in the EditText and understand their behavior:

3.2 Radio Button 1. Create a new Android application with the following attributes.

․ Application Name: MyRadionButton

․ Project Name: MyRadionButton

․ Package Name: com.example.myradionbutton

2. Drag a Radio Button Group to the layout. Then change the text for the radio buttons to “Option

0”, “ Option 1” and “Option 2”.

3. Modify the source file "MainActivity.java" as follow.

package com.example.myradionbutton;






import android.widget.RadioButton;

import android.widget.RadioGroup;



RadioGroup radioGroup1;

RadioButton radio0, radio1, radio2;

@Override




// Locate the radio button

radio0 = (RadioButton) findViewById(R.id.radio0);



// Locate the radio group and Attach Listener

radioGroup1 = (RadioGroup) findViewById(R.id.radioGroup1);

radioGroup1.setOnCheckedChangeListener(new

RadioGroup.OnCheckedChangeListener() {

public void onCheckedChanged(RadioGroup group, int checkedId) {

// Check whether the radio button is checked

if (checkedId == radio0.getId()) {

Toast.makeText(getApplicationContext(), radio0.getText(),

Toast.LENGTH_LONG).show();

} else if (checkedId == radio1.getId()) {



} else if (checkedId == radio2.getId()) {



}

}

});

}

@Override






return true;

}

}

4. Execute the app and select different radio button to observe the result.

3.3 Checkbox 1. Create a new Android application with the following attributes.

․ Application Name: MyCheckBox

․ Project Name: MyCheckBox

․ Package Name: com.example.mycheckbox

2. Drag two checkbox to the layout, and then rename the text for the checkbox to “Checkbox 1”

and “Checkbox 2”.



3. Drag a button to the layout.

4. Modify the source code for the file "MainActivity.java" as follow: package com.example.mycheckbox;







import android.widget.CheckBox;



@Override




// Attach the listener to the button

Button button1 = (Button) findViewById(R.id.button1);

button1.setOnClickListener(new OnClickListener() {


StringBuilder result = new StringBuilder();

result.append("Selected Items:");

// Check whether check box 1 is selected

CheckBox checkbox1 = (CheckBox) findViewById(R.id.checkBox1);

if(checkbox1.isChecked()) {



result.append("\ncheckbox1");

}

// Check whether check box 2 is selected

CheckBox checkbox2 = (CheckBox) findViewById(R.id.checkBox2);

if (checkbox2.isChecked()) {

result.append("\ncheckbox2");

}

// Displaying the message

Toast.makeText(getApplicationContext(), result.toString(),


}

});

}

@Override




return true;

}

}

5. Execute the app, select the check box and press the button to observe the result.



4. Simple Game

4.1 Guess Number 1. Create the Android application with the following attributes.

․ Application Name: MyGuessNumber

․ Project Name: MyGuessNumber

․ Package Name: com.example.myguessnumber

2. Select the Text View, and then change the text to “I have a number between 0-9, please guess”.

3. Drag the picture “magic.png” into the “drawable-hdpi” folder. Select “Copy” in the “File

Operation” dialog.



4. Add an ImageView to the layout. Select the image “magic” and press [OK] to continue.

5. Add a number text field to the layout

6. Add a button to the layout and change the text to “Guess”:



7. Open the source file "MainActivity.java" and modify as follow: package com.example.myguessnumber;







import android.widget.EditText;


import java.util.Random;


public Button GuessButton;

public int RandomNumber;

@Override




// Generate the Random Number when program start

Random randomize = new Random();

RandomNumber = randomize.nextInt(10);

// Create the Guess button Listener

GuessButton = (Button) findViewById(R.id.button1);

GuessButton.setOnClickListener(new OnClickListener() {


// Retrieve the User Input

EditText txtUserInput = (EditText) findViewById(R.id.editText1);

int UserInput = Integer.parseInt(

txtUserInput.getText().toString());

// Check and display the result

if (UserInput == RandomNumber)

Toast.makeText(MainActivity.this, "Correct",




else if (UserInput > RandomNumber)

Toast.makeText(MainActivity.this, "Too Large",


else if (UserInput < RandomNumber)

Toast.makeText(MainActivity.this, "Too Small",


}

});

}

@Override




return true;

}

}

8. Save and execute the app, and try to guess the number.

workshop - lo chi wing's personal web site · 2015-05-04 · android apps development for...

Documents