workshop - peter-lo.com · android apps development for mobile game lesson 2 4t026-1-a @ peter lo...
TRANSCRIPT
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015
Workshop
1. Compare different layout by using Change Layout button (Page 1 – 5)
� Relative Layout
� Linear Layout (Horizontal)
� Linear Layout (Vertical)
� Frame Layout
2. Use the basic component on TextView, Button, Toast, Checkbox and Radio Button. Then
identify the different InputType on EditText (Page 6 – 12)
� text
� number
� phone
� textMultiLine
� textCapCharacters
� textPassword
� textAutoCorrect
3. Create a simple web browser with permission to Internet access. (Page 13 – 16)
4. Exercise: Now 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. (Hint:
using randomize to generate the random number)
Android Apps Development for Mobile Game Lesson 2
4T026-1-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 Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 2
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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.
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 3
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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
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_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 4
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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 5
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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/FrameLayout1"
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_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 6
2. Simple Component
2.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”.
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 7
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.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 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
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;
}
}
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 8
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:
2.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.os.Bundle;
import android.app.Activity;
import android.view.Menu;
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 9
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
public class MainActivity extends Activity {
RadioGroup radioGroup1;
RadioButton radio0, radio1, radio2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Locate the radio button
radio0 = (RadioButton) findViewById(R.id.radio0);
radio1 = (RadioButton) findViewById(R.id.radio1);
radio2 = (RadioButton) findViewById(R.id.radio2);
// 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()) {
Toast.makeText(getApplicationContext(), radio1.getText(),
Toast.LENGTH_LONG).show();
} else if (checkedId == radio2.getId()) {
Toast.makeText(getApplicationContext(), radio2.getText(),
Toast.LENGTH_LONG).show();
}
}
});
}
@Override
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 10
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;
}
}
4. Execute the app and select different radio button to observe the result.
2.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”.
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 11
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.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Attach the listener to the button
Button button1 = (Button) findViewById(R.id.button1);
button1.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
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()) {
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 12
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(),
Toast.LENGTH_LONG).show();
}
});
}
@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;
}
}
5. Execute the app, select the check box and press the button to observe the result.
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 13
3. Permission
3.1 Web Browser 1. Create a new Android application with the following attributes.
․ Application Name: MyWebBrowser
․ Project Name: MyWebBrowser
․ Package Name: com.example.mywebbrowser
2. Select the default Textview, right click and then select “Delete” to remove it.
3. Drag and drop a Plain Text to the layout.
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 14
4. Drag and drop a Button to the layout and change the Text to “Go”.
5. Drag and drop a WebView to the layout and save your design.
6. Open the source file "MainActivity.java" and modify the code as follow: package com.example.mywebbrowser;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 15
public class MainActivity extends Activity {
WebView mWebView;
Button mButton;
EditText mUserInput;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Finds a view that was identified by the ID attribute from the XML
mButton = (Button) findViewById(R.id.button1);
mUserInput = (EditText) findViewById(R.id.editText1);
mWebView = (WebView) findViewById(R.id.webView1);
// Attach the listener to the button
mButton.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
// Obtain the URL address from the user input
String URL = mUserInput.getText().toString();
// Open the URL in web view with the defined setting
mWebView.setWebViewClient(new WebViewClient());
mWebView.loadUrl(URL);
}
});
}
@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;
}
}
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 16
7. Open the manifest file “AndroidManifest.xml”, and press [Add] in the “Permission” tab. Then
select “Uses Permission” and press [OK].
8. Select the permission “android.permission.INTERNET” and save.
9. Save and execute the app. Input the URL and press [Go]. Can you see the web page correctly?
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 17
4. Exercise
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.
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 18
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”:
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 19
7. Open the source file "MainActivity.java" and modify as follow: package com.example.myguessnumber;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import java.util.Random;
public class MainActivity extends Activity {
public Button GuessButton;
public int RandomNumber;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 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() {
public void onClick(View arg0) {
// 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",
Toast.LENGTH_LONG).show();
Android Apps Development for Mobile Game Lesson 2
4T026-1-A @ Peter Lo 2015 20
else if (UserInput > RandomNumber)
Toast.makeText(MainActivity.this, "Too Large",
Toast.LENGTH_LONG).show();
else if (UserInput < RandomNumber)
Toast.makeText(MainActivity.this, "Too Small",
Toast.LENGTH_LONG).show();
}
});
}
@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;
}
}
8. Save and execute the app, and try to guess the number.