CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing. Lab & Demo 2 (1 &2 of 3) Hello-Goodbye App Tutorial

Transcription

1 CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing Reference Lab & Demo 2 (1 &2 of 3) Tutorial Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones & Barlett Learning, pp Android Developer API Guides, Paul I-Hai Lin, Professor Spring 2016 A Specialty Course Purdue University M.S. Technology Graduate Program Dept. of Computer, Electrical and Information Technology Purdue University Fort Wayne Campus 1 Objectives Learn to use Android Studio (Integrated Development Environment) Build your Second app for Android-based smartphone which will respond to the push button to display two messages Procedure A Prelab Study the basic terms of IDE and Android APIs 1) Major components of an App: manifests - AndroidManifest.xml java res (drawable, layout, menu, values) Gradle Scripts 2 1

2 1) Major components of an App: manifests (AndroidManifest.xml), Java res (drawable, layout, menu, values) res/layout/activity_my.xml res/layout/content_my.xml holds Hello World! message res/menu/menu_my.xml mipmap/ic_launcher.png/ic_launcher.png (hdpi) ic_launcher.png (xxhdpi) res/values/color.xml res/values/dimens.xml res/values/string.xml Res/values/styles.xml 3 A Prelab Study the basic terms of IDE and Android APIs 2) Activity class, Activity.html One application is made up of one or more Activities Banking App example: Log-in-account Activity, Accountoverview Activity, etc Each Activity has A visual UI (layout) to the user, and a Java source code (some behavior functions) An application may contain multiple activities Main activity (the one that launched for the first time when the application is executed) Methods: oncreate(), onstart(), onrestart(), onresume(), onpause(), onstop(), ondestroy() 4 2

3 B Prelab App Requirements and Design 1) App s requirements Launch icons Color, background, fonts, layout, etc. 2) Output: Texts, graphic images, etc. 3) UI interaction Button (tapping) 5 C Creating HelloGoodbye Project 1) Configure your new project Application name: Hello Goodbye Company Domain Project location 2) Select the form factors your app will run on Phone and Tablet, Minimum SDK 3) Add an activity to Mobile Blank Activity 4) Customize the Activity Activity Name - use default Layout Name use default Title use default Menu Resource Name use default 6 3

4 C Creating a new Project Default launch icon (Android robot) Examine the following XML files o AndroidManifest.xml Adding and Editing Application Resources Go to Jones & Bartlett Learning web site, og/ / Redeem your access code using your 10-digit code from your book Download chapter 1 related png files (xhdpi densities) 7 Drag and drop (or copy & paste) the following png files (both xhdpi and xxhdpi versions) from the textbook resource to the drawable folder o Background background.png o greetingimage.png o exclamation-btn.png o Ic_launcher.png 8 4

5 Edit the res/values/string.xml (name/value pairs) as shown on the screen shot below. 9 Edit a new Values XML file Right click values => New => XML => Values XML files Or just revise the exiting color.xml 10 5

6 Constructing the User Interface of the App Click the activity_main.xml from the layout folder to see the project window as shown on the right. 11 Click the content_main.xml from the layout folder to see the project window as shown on the right. Select RelativeLayout in the Component tree 12 6

7 Locate the background within the Properties panel Click the square button (with three dots) to see the Resources chooser window (on next slide) 13 With the Resources chooser window as shown below, click on Project tab Select background file from the Drawable folder, then click OK 14 7

8 The green colored backbround image file is now added to the app. 15 With content_main.xml still selected, change it from Design mode to Text mode to view the XML file in text view format. Delete Hello World! 16 8

9 Verify the Hello World! is deleted 17 Drag the Large Text element from the Widget to the Canvas. Centered horizontally at the top of the Canvas, and drop it. It will also appear under Component tree. 18 9

10 Double click the Large Text element just added on the Canvas to see the text/id dialog box as shown below. Double click the button with three-dots to set the text property 19 The Resource chooser window will appear as shown below. Locate and select the hello string, click OK

11 Verify that hello appears on the Canvas 21 Select textview and located the textcolor property Click the three-dot button to see the Resource chooser for selecting the desired color 22 11

12 The Resource chooser window will appear as shown below. Change the # field to #B530BD to show dusty_rose color. 23 The textcolor is now changed to dusty_rose

13 Edit or change textsize Change it to 60 sp (scale-independent pixel) 25 Decorate image element to the Canvas. Locate the Image view component in the Widgets palette Drag and drop the Image View to the center of the Canvas

14 Double click the three-dot button, to show the Resource chooser. Locate and select the hello string, click OK. 27 The Resource chooser window will appear as shown below. From Project => Drawable, then select greetimage, click OK

15 The greetimage is shown below. 29 With the Image View selected as shown below, locate the contentdescription property in the Property palette

16 Click the three-dot button, to see Resource chooser, then select exclaim_img from the Strings folder, clock OK. 31 Click the three-dot button, to see Resource chooser, then select exclaim_img from the Strings folder, clock OK

17 Add a button to the Canvas. Locate Button from the Widgets pallet, Drag and drop it onto the Canvas; Select text property, click on the three-dot button. 33 The Resource chooser window will appear as shown below. Select exclaim_btn, then click OK

18 The new button with the text name exclaim_btn is appear as shown below. 35 Locate and select background property for the button. Click the three-dot button to see Resource chooser, then select Project/Drawable/exclaimationbtn image file 36 18

19 Click the three-dot button to see Resource chooser, then select Project/Drawable/exclaimationbtn image file 37 Button with and image 38 19

20 The Text mode view in the Layout Editor is as shown below. 39 Locate and select background property for the button

21 Summary Q/A? 41 21