Android Apps Development for Mobile Game Lesson Create your first Android App, and then test the apps in emulator and your mobile (Page 7 11)

Transcription

1 Workshop 1. Install the ADT Bundle and set up the AVD in your machine (Page 2 6). 2. Create your first Android App, and then test the apps in emulator and your mobile (Page 7 11) 3. Localize your app to support both Chinese and English (Page 12) 4. Import an existing project to your workspace. (Page 13 14) 5. Debug the Android Apps with Log Cat and Breakpoint (Page 15 21) 6. Exercise: It s time for you to create your first Android app Analog Clock. (Hint: Using Analog Clock widget and background properties) Peter Lo 2015

2 1. Install and Setup ADT 1.1 Installation of Java SE Development Kit (JDK) 1. Download the latest version of Java SE Development Kit (JDK) from the Oracle s Java webpage: Then click Accept License Agreement and then select the correct version to download. 2. Double click the file to start the installation of JDK. Select the component that you want to install (Recommend select all). Select [Change] to modify the path for installing JDK, and then press [Next] to continue. 3. Select [Change] to modify the path for installing JRE, and then press [Next] to continue. After the install process finish, click [Close] to end. Peter Lo

3 1.2 Installation of Android SDK 1. Download the latest version of Android SDK from the Android Developer webpage: Then click I have read and agree with the above terms and conditions and then select the correct version to download. (Please refer to if you are using Mac) 2. Unpack the ZIP file (named adt-bundle-<os_platform>.zip) and save it to an appropriate location, such as a "Development" directory in your home directory. Open the directory (adt-bundle-<os_platform>/eclipse/) and launch Eclipse. Select the workspace when start Eclipse in first time. 3. The Android Developer Tool is launched. Peter Lo

4 1.3 Update the SDK 1. Select Windows Android SDK Manager. 2. Select and install the corresponding components (Recommend all component within Tools, latest Android API and Extras). 3. Accept the license and press [Install] to start installation, this might take an hour to complete. Peter Lo

5 1.4 Update the Eclipse 1. Sometime, you are required to update the Eclipse by selecting Windows Preferences. 2. Press the [Add] button from the Install/Update Available Software Sites section in Preferences dialog. 3. Set the location as and press [OK] to confirm. Then execute Help Check for Update again. Peter Lo

6 1.5 Create an Android Virtual Device (AVD) 1. To run your app on the emulator you need to first create an Android Virtual Device which is a device configuration for the Android emulator that allows you to model different devices. First you need to create a virtual SD card for your AVD. Go to the SDK Windows tools folder (C:\ [adt-bundle]\ sdk \tools) and execute the following command. mksdcard 512M mysdcard.iso 2. After execute the command in DOS Prompt, you can execute DIR to verify the file. 3. Start ADT Bundle, and select Windows Android Virtual Device Manager to launch the Android Virtual Device Manager. 4. Click [New] in the Android Virtual Device Manager panel. Peter Lo

7 5. Fill in the details for the AVD. Give it a name, device, platform target, an SD card size, and a skin and then press [OK]. 6. The new AVD is listed in the Android Virtual Device Manager, close the device manager Peter Lo

8 2. Building your First Android App 2.1 Creating an Android Project 1. Start Eclipse and click File New Android Application Project 2. Fill in the application (such as MyFirstApp) and project name (recommend select Android 4.0 or above) and then press [Next]. Leave the default selections on the next screen and click [Next]. 3. You can customize an icon in several ways and the tool generates an icon for all screen densities. Before you publish your app, you should be sure your icon meets the specifications defined in the Iconography design guide. Click [Next]. Peter Lo

9 4. Now you can select an activity template from which to begin building your app. Select Blank Activity and click [Next]. Then leave all the details for the activity in their default state and click [Finish]. 5. A default set of template source files are created in the Android project Peter Lo

10 2.2 Executing the Android App Execute the Android App in AVD 1. Select Run Run As Android Application to install the app on your AVD and start it. 2. Your first app will be launched. Peter Lo

11 2.2.2 Running the Android App on Mobile Phone 1. Power on your device, then select Settings Developer Option, to enter developer mode (If the developer mode is not enable, press the build number several times to turn on developer mode). USB debugging (Required) Stay awake (Optional) Allow mock locations (Optional) Power menu bug reports (Optional) 2. Close all AVD, and connect your mobile to PC through USB. Then select Run Run As Run Configuration in Eclipse. Peter Lo

12 3. Select Always prompt to pick device in Deployment Target Selection Mode under "Target" tab, and then press [OK] button to confirm. 4. Select Run Run As Android Application in Eclipse again. 5. Select your mobile device and press [OK] to deploy and execute the app in your mobile. Peter Lo

13 3. Localization 3.1 Supporting Different Languages 1. To add support for more languages, you can create additional values directories inside res/ that include a hyphen and the ISO country code at the end of the directory name. Or using Add New Translation to define. 2. Select the language and input the value for New Translation, then press [OK] to continue. 3. Change the language of your mobile to Traditional Chinese, and then execute the app again. Can you see the different? Peter Lo

14 4. Project Management 4.1 Close Project 4. In order to close the project completely, select File Close All to close all opened files. Then right click the project and select Close Project to close the project completely 4.2 Open Existing Project 1. Select the project and double click (or right click and select Open Project). Then double click the layout file to edit the screen layout or double to source file to edit the code. Peter Lo

15 4.3 Remove Project 1. If you need to remove a project, right click and then select Delete. 2. Click Delete project contents on disk (cannot be undone) if you want to delete the file permanently. Then press [OK] to confirm and start deletion. 4.4 Import External Project 1. In order to import a project, do not copy it into workspace directly. Please it somewhere, and then let ADT copy it into workspace by menu. Select File New Project 2. Select Android Android Project from Existing Code, and then press [Next]. Then use the [Browse] button to select the project folder. You can select Copy projects into Workspace if you want to import into workspace. Then click [Finish] to start import. Peter Lo

16 5. Debugging 5.1 LogCat 1. Close all opened project and file, then select File New Android Application Project to create a new project. Create the Android application with the following attributes. Application Name: MyLogCat Project Name: Package Name: MyLogCat com.example.mylogcat 2. Double click the source file MainActivity.java under src folder to open the Java editor. You can also double click the java file to open it. 3. Since the template is already created, we only need to modify several lines of code. package com.example.mylogcat; import android.app.activity; import android.os.bundle; import android.view.menu; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); Log.v( "Verbose Tag", "Verbose Message"); Log.d( "Debug Tag", "Debug Message"); Log.i( "Info Tag", "Information Message"); Log.w( "Warn Tag", "Warning Message"); Peter Lo

17 } Log.e( "Error Tag", "Error 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. Error is occurred due the Log utility library have not import. Click on the statement Log., and then press Import Log (android.util). 5. Right click the project, select Run Run As Android Application to execute the apps. Peter Lo

18 6. Select Verbose and press [OK] if the Auto Monitor Logcat dialog appears. 7. In order to open the LogCat windows, select Windows Show View Others. 8. Select Android LogCat in the Show View dialog box. Peter Lo

19 9. The messages are shown in the LogCat windows. Peter Lo

20 5.2 Debugging Process with Breakpoint 1. Close all opened project and file, then select File New Android Application Project to create a new project. Create the Android application with the following attributes. Application Name: MyBreakPoint Project Name: Package Name: MyBreakPoint com.example.mybreakpoint 2. Double click the source file MainActivity.java under src folder to open the Java editor. Since the template is already created, we only need to modify several lines of code. package com.example.mybreakpoint; import android.app.activity; import android.os.bundle; import android.view.menu; import android.view.menuitem; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); String a, b, c; a = "Debug "; b = "Demo"; c = a + b; 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

21 3. Double click the left vertical line to create a breakpoint (a blue dot will be appeared). 4. Right click the project, select Debug Debug As Android Application to execute the apps in debug mode. 5. Click [Yes] in the Confirm Perspective Switch dialog box if it popup. Peter Lo

22 6. Press or press [F5] to step into next statement. The values for the variables are listed in the Variables windows. After review the value, press the button to leave the debugger. Peter Lo

23 6. Answer 6.1 Analog Clock 1. Create the Android application with the following attributes. Application Name: MyClock Project Name: Package Name: MyClock com.example.myclock 2. Select the default Textview Hello world!, right click and then select Delete to remove it. 3. Drag the picture polyu.png into the drawable-hdpi folder. Select Copy in the File Operation dialog. Please note that only PNG photo is allowed. Peter Lo

24 4. Click on the background properties for the layout, and then 5. Drag and drop an AnalogClock to the layout. 6. Save and execute the app, now you have an analog clock with a beautiful background. Peter Lo