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

Size: px

Start display at page:

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

Phebe Miles
5 years ago
Views:

Workshop 1. Compare different layout by using Change Layout button (Page 1 5) Relative Layout Linear Layout (Horizontal) Linear Layout (Vertical) Frame Layout 2.

1 Workshop 1. Compare different layout by using Change Layout button (Page 1 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) Peter Lo 2015

1. Android Layout 1.1 Relative Layout 1. Create the Android application with the following attributes. Application Name: MyLayout Project Name: Package Name: MyLayout com.example.mylayout 2.

2 1. Android Layout 1.1 Relative Layout 1. Create the Android application with the following attributes. Application Name: MyLayout Project Name: Package Name: MyLayout 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=" xmlns: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" Peter Lo

android:layout_height="wrap_content" android:text="@string/hello_world" /> <Button android:id="@+id/button1"

android:layout_torightof="@+id/textview1" android:text="button" /> </RelativeLayout> 1.2 Horizontal Linear Layout 1.

3 android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparenttop="true" 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. Peter Lo

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.

4 3. The layout will be changed as follow. 4. The XML code for activity_main.xml is listed below: <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" /> </LinearLayout> Peter Lo

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=

5 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=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" /> </LinearLayout> Peter Lo

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.

6 1.4 Frame Layout 1. Change the layout to FrameLayout. 2. The XML code for activity_main.xml is listed below: <FrameLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" /> </FrameLayout> Peter Lo

7 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: Package Name: MyDoWhileLoop 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 { 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 ); 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; Peter Lo

8 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: Package Name: MyWhileLoop com.example.mywhileloop 2. Open the source file "MainActivity.java" and modify the code as follow: package com.example.mywhileloop; import android.os.bundle; import android.app.activity; import android.view.menu; import android.widget.toast; public class MainActivity extends Activity { protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); int i = 1; while ( i++ < 3 ) { Toast.makeText(this, "i = " + i, Toast.LENGTH_LONG).show(); public boolean oncreateoptionsmenu(menu menu) { Peter Lo

9 // 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.3 The for Loop 1. Create a new Android application with the following attributes. Application Name: MyForLoop Project Name: Package Name: MyForLoop com.example.myforloop 4. Open the source file "MainActivity.java" and modify the code as follow: package com.example.myforloop; import android.os.bundle; import android.app.activity; import android.view.menu; import android.widget.toast; public class MainActivity extends Activity { protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); int i = 1; Peter Lo

10 for ( i = 1; i < 3; i++) { Toast.makeText(this, "i = " + i, Toast.LENGTH_LONG).show(); 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. Save and execute the app. How many messages do you obtain? Peter Lo

3. Simple Component 3.1 Simple Components 1.

Application Name: MySampleUI Project Name: Package Name:

Change the Text of TextView1 to Please input something:. 3.

11 3. Simple Component 3.1 Simple Components 1. Create a new Android application with the following attributes. Application Name: MySampleUI Project Name: Package Name: MySampleUI 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. Peter Lo

12 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 { 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(); ); 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; Peter Lo

13 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: Package Name: MyRadionButton 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 Modify the source file "MainActivity.java" as follow. package com.example.myradionbutton; import android.os.bundle; import android.app.activity; import android.view.menu; Peter Lo

14 import android.widget.radiobutton; import android.widget.radiogroup; import android.widget.toast; public class MainActivity extends Activity { RadioGroup radiogroup1; RadioButton radio0, radio1, radio2; 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(); ); Peter Lo

Create a new Android application with the following attributes. Application Name: MyCheckBox Project Name: Package Name: MyCheckBox com.

15 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. 3.3 Checkbox 1. Create a new Android application with the following attributes. Application Name: MyCheckBox Project Name: Package Name: MyCheckBox com.example.mycheckbox 2. Drag two checkbox to the layout, and then rename the text for the checkbox to Checkbox 1 and Checkbox 2. Peter Lo

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.

16 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 { 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()) { Peter Lo

17 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(); ); 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. Peter Lo

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

18 4. Simple Game 4.1 Guess Number 1. Create the Android application with the following attributes. Application Name: MyGuessNumber Project Name: Package Name: MyGuessNumber 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. Peter Lo

19 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 : Peter Lo

20 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; 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(); Peter Lo

21 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(); ); 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. Peter Lo

MAD ASSIGNMENT NO 2. Submitted by: Rehan Asghar BSSE AUGUST 25, SUBMITTED TO: SIR WAQAS ASGHAR Superior CS&IT Dept.

MAD ASSIGNMENT NO 2. Submitted by: Rehan Asghar BSSE AUGUST 25, SUBMITTED TO: SIR WAQAS ASGHAR Superior CS&IT Dept. MAD ASSIGNMENT NO 2 Submitted by: Rehan Asghar BSSE 7 15126 AUGUST 25, 2017 SUBMITTED TO: SIR WAQAS ASGHAR Superior CS&IT Dept. Android Widgets There are given a lot of android widgets with simplified