Introduction to Android Programming

Transcription

1 S3 Computer Literacy 2 nd Term P.16 Introduction to Android Programming Programming languages can be classified into low-level languages and high-level languages. Low-level language High-level language Characteristics Close to the language that a computer uses. Difficult to read and understand. Close to natural language. Easy to read and understand. Example Machine language, Assembly language. C++, Java, Pascal. Some common Operating System of mobile devices 1. ios (previously iphone OS) is a mobile operating system developed and distributed by Apple Inc. It is used in i-pad, i-phone and i-pod ( 2. Android is a Linux-based operating system designed for smartphones and tablet. 3. Windows Phone 8 is the operating system used in Windows Phone 8 devices. Software Development tools for Android Apps 1. Android SDK (Software development Kit) includes a comprehensive set of development tools. The official supported IDE (Integrated development environment) is Eclipse using the Android Development Tools (ADT) Plugin. Writing Java Code is needed. 2. App Inventor for Android is a web-based Visual development environment for novice programmers, based on MIT s Open Blocks Java Library. AppInventor installation in Windows Platform 1. Install Java Runtime in the Computer Download and install AppInventor. xe 3. Go to and login with a Google account. Setting of Android device You can use emulator to test your apps. If you want to run the apps in Android device, change its setting as follows: Select Setting ( 設 定 ) Security ( 安 全 性 ) unknown sources ( 未 知 的 來 源 )

2 S3 Computer Literacy 2 nd Term P.17 Topic 1: Introduction to Visual programming and Working environment of App Inventor Key points: 1. A visual programming language (VPL) is any programming language that lets users create programs by manipulating program elements graphically rather than by specifying them textually. Example: App Inventor, Visual Basic. 2. App Inventor is a web based development tools for writing android applications. 3. Java run time and App Inventor are needed to be installed in the computer before writing apps. 4. Working Environment of App Inventor includes App Designer, App Inventor Blocks Editor (Build-in, MyBlocks), Android Emulator. App Designer is the place for designing the layout. Blocks editor is the place for building the 'Program'. Android emulator is the place for testing the program. Practical 1: Build your first apps Program (Apps) Requirements: The program consists of a label and a button. When the button is clicked, the label This is my first android apps will show up. Instructions: A. Login the web based platform, AppInventor. 1. Go to and click "INVENT" 2. Login with the Google Account provided by School. B. Design the layout of your apps with App Designer. 3. Click "new", Enter MyFirstApps as project name and you will be in the App Designer page. The App Designer divided into four regions: Palette, Viewer, Components and Properties. Change the title of Screen1 (Screen1.title) to My First Android Apps 4. Drag a button from the palette to the viewer. Change the properties of Button1 as follows: Button1.text: Send.

3 S3 Computer Literacy 2 nd Term P Drag a Label from the palette to the viewer. Change the properties as follows: Label1.text: My first Android Apps Label1.TextAlignment: Centre Label1.Visible: hidden Label1.Width: Fill parent C. Build your program with Block Editor. 6. Open the Blocks Editor by clicking Open the Blocks Editor button. 7. In the Block Editor, click My Blocks Button1 and Drag Button1.Click to the right side. 8. Click Label1, Drag Set Label1.Visible to to the right side. 9. Click Build-In Logic, drag True to the right side. 10. Build the block as follows: D. Test your apps with emulator 11. Start the emulator (click New emulator ) and unlock the emulated phone. 12. Click Connect to Device, Select emulator. Then you can try out your first apps. E. Package the phone apps for submission. 13. Go to App Designer, click Package for phone Downloads to this computer. 14. Submit the Downloaded file, Myfirstapps.apk, in eclass. The file can be used as installation file in Android device. Classwork: 1. The App Designer divided into 4 main regions:,, and. 2. To build program in App Inventor, we use the tool called. 3. Write down 5 components in Palette. 4. Other than Button1.Click, write down 2 other events of button1. 5. Name the two software needed to be installed before using App Inventor

4 S3 Computer Literacy 2 nd Term P.19 Topic 2: Properties and events of a component. Simple calculation and assignment statements. Events and properties of different components Component Event / Properties Description Button Click Indicates a user has long clicked on the button GotFocus Indicates the cursor moved over the button LongClick Indicates a user has long clicked on the button LostFocus Indicates the cursor moved away the button TextBox Text The text stored in the Textbox Label Text The text stored in the label Visible Set to True to show the Label TextColor Color of the text. Build in Blocks Maths Maths Operator: Add, Subtract, Multiply, Division Relational Operator: Logic Logic value: True, false Logical operator: not, and, or color Blue, Red, Yellow, Green Control Selection: If..then, if..then..else

5 S3 Computer Literacy 2 nd Term P.20 Practical 2: Calculating Body and Mass Index (BMI) Program requirements: 1. Input your weight (in kg) and height (in m) in 2 Textbox. 2. When a Button was clicked. Calculate the BMI ratio with the formula: 3. Show the BMI value in a Label. Instructions: A. Login the web based platform and create a project called BMIcalculation. B. Design the layout of your apps in App Designer. You have to use at least 2 textboxs, 2 horizontalarrangement, 2 labels and 1 button. Rename the Textbox1 and Textbox2 as TextboxHeight and TextboxWeight. Rename Button1 as ButtonCalculate Rename Label1 and Label2 as LabelR1 and LabelR2 Change the properties of the component as follows: Component.properties Value Screen1.Title Calculate your BMI TextboxWeight.Hint Enter your weight (in kg) TextboxWeight.Width Fill parent TextboxWeight.NumbersOnly True ( ) HorizontalArrangement1.width Fill parent TextboxHeight.Hint Enter your height (in m) TextboxHeight.Width Fill parent TextboxHeight.NumbersOnly True ( ) ButtonCalculate.text Calculate LabelR1.text Your BMI is LabelR2.text???

6 S3 Computer Literacy 2 nd Term P.21 C. Build your program with Block Builder. Drag the following blocks and build your program. From My Blocks From Build in, Maths D. Test your apps with emulator Start the emulator and unlock the emulated phone. Click connect to device E. Package the phone apps for submission Click Package for phone and Downloads to this computer Submit the Downloaded file in eclass. Extension activities 1. The normal BMI range depends on age. For adult, is normal. 2. Using the if..then..else control structure, change the label.color or label.text according to the values calculated. You can add a label for this function. 3. You can also displayed different image according to the BMI value.

7 S3 Computer Literacy 2 nd Term P.22 Class: ( ) Name: Exercise 1: Calculate the area (πr 2 ), circumference (2πR)of a circle with a given radius. Program requirements: 1. Use a textbox for the input of radius. 2. When the corresponding button is pressed, the circumference or the area will be calculated. The result will be shown on a label. Instructions: 1. Login appinventor with your Google account. 2. Open a project called EX1, Prepare the following layout design with App Designer. Change the properties of the components. Write down the changes you made. Component.properties Value Screen1.Title Maths Circle RadiusTextbox.Hint RadiusTextbox.NumbersOnly 3. Build your program with block editor 4. Test your apps with emulator 5. Package your phone apps for submission Extension: Validate the Input radius. Show Error message in the label if it is a negative number.

8 S3 Computer Literacy 2 nd Term P.23 Topic 3: Use of Variables and component Canvas and Camera. Events and properties of different components Component Event / Properties /procedure Description Canvas When the user does a drag from (PrevX1,PrevX2) to another (currentx, currenty) When the user touch a canvas providing the (x,y) position of the touch. When the user performs a quick swipe on the screen Clear anything drawn on this Canvas Draw a circle at the given coordinates on the given coordinates (x, y), with the given radius (r) Draw a line between the given coordinates. Set the name of the file containing the background image for the canvas.

9 S3 Computer Literacy 2 nd Term P.24 Set the color in which lines are drawn Camera Take a picture, then raises the AfterPicture Events Indicates that a photo was taken with the camera and provided the path to the stored picture Build in blocks Define Define a global variable with an initial value. After a global variable is defined, you can set its value by a block in My Building Block My Definition Define a procedure that returns a result Define a procedure that does not returns a result Practical 3: Paint Pot Program Requirements: 1. Create a Canvas with a background Image. The image can be changed by taking photo with a camera. 2. It will DrawLine when you Dragged on the Canvas. 3. It will DrawCircle when you Touched the Canvas. 4. Create 3 buttons to change the PaintColor of Canvas to Green, Blue and Red 5. Create buttons to change the radius of DrawCircle. 6. Create a button to clear the drawing on the Canvas Instructions: A. Login the web based platform and create a project called PaintPot. B. Design the layout of your apps in App Designer Add a HorizontalArrangement with 3 buttons. Rename the 3 buttons as GreenButton, RedButton, BlueButton. Add a Canvas and rename it as DrawingCanvas. Add a HorizontalArrangement with 4 buttons. Rename the four buttons as TakePictureButton, WipeButton, BigButton, SmallButton

10 S3 Computer Literacy 2 nd Term P.25 Add a camera. Download the file and uploaded to your project. (Click Add button and selected the file kitty.png) Change the properties of the component as follows: Component.properties Value GreenButton.BackgroundColor Green GreenButton.Text Green Change the properties of RedButton and BlueButton similar to GreenButton Component.properties Value DrawingCanvas.BackgroundImage kitty.png DrawingCanvas.PaintColor Red DrawingCanvas.Width Fill parent DrawingCanvas.Height 300 pixels TakePictureButton.Text Take Picture Change the properties of WipeButton, BigButton and SmallButton similar to TakePictureButton

11 S3 Computer Literacy 2 nd Term P.26 C. Build your program with Block Builder Change the PaintColor of Canvas (DrawingCanvas.PaintColor) by clicking the Color Buttons. e.g. When BlueButton.Clicked, Set DrawingCanvas.PaintColor to Color Blue. Similar for RedButton and GreenButton. Define a global variable dotsize to 5 (Build-in Block Definition) Adding the Touch Event of Canvas (DrawingCanvas.Touched) to draw a dot (circle) with the following blocks. DrawingCanvas My Definitions Set the Coordinates of the Dot (x, y) and radius (r) as value x, value y and dotsize. Adding the Drag Event of Canvas (DrawingCanvas.Dragged) to draw a line with the following blocks. DrawingCanvas My Definitions When DrawingCanvas.Dragged happened, call DrawingCanvas.DrawLine to draw a line from (prevx, prevy) to (currentx, currenty) Change the dot size with the following blocks.

12 S3 Computer Literacy 2 nd Term P.27 Buttons My Definitions Build in Math When BigButton is Clicked (BigButton.Clicked), set the dotsize to 8. When SmallButton is Clicked (SmallButton.Clicked), set the dotsize to 2. Clear the drawing with the WipeButton using the following blocks. When WipeButton is Clicked (Event WipeButton.Clicked), call DrawingCanvas.Clear to clear the drawing. Letting the user take a picture as the background with the following blocks. Camera1 TakePictureButton DrawingCanvas My Definitions When the TakePictureButton is clicked (Event TakePictureButton.Clicked), call Camera1.TakePicture to take a photo. After taking the photo (Event Camera1.AfterPicture), Set the Background of DrawingCanvas (DrawingCanvas.BackgroundImage) to the path of the photo (image) D. Test your apps with emulator. Start the emulator and unlock the emulated phone. Click Connect to device E. Package the phone apps for submission. Click Package for phone and Downloads to this computer. Submit the Downloaded file in eclass. Extension Activities 1. Add labels to show the dotsize. 2. Add two buttons to increase and decrease the line width. 3. The Line width must be between 1 and Disable the corresponding button when the Line width is 1 or 15. Acknowledge: The above Practical was modified based on