1. Android architecture overview 1 CS 150

2. Android  A software stack for mobile devices developed and managed by Open Handset Alliance  Free software under Apache License Operating System (Linux Kernel 2.6) Middleware Key Applications Android CS 150 2

3. Android Software Stack CS 150 3

4. Android App Inventor  Drag and drop software  Works like putting together Lego bricks  By the end of putting the bricks together you will have an Android app, ready to install on your android phone  But first we need to setup app inventor!! CS 150 4

5. App inventor setup  Visit the Java test page Java test page  You should see a message that Java is working  Download the installer Download  Locate the file AppInventor_Setup_Installer_v_1_2.exe (~92 MB) in your Downloads file or your Desktop.  The location of the download on your computer depends on how your browser is configured.  Open the file. CS 150 5

6. App inventor setup  Click through the steps of the installer  Do not change the installation location but record the installation directory, because you might need it to check the driver  The directory will differ depending on your version of Windows and whether or not you are logged in as an administrator CS 150 6

7. App inventor setup  Go to: appinventor.mit.edu  Use your gmail, hotmail, or yahoo e-mail address to create a new account  Now you can build your first Android App!!! CS 150 7

8. Hello Purr! Your first Android app!!! 8 CS 150

9. Hello Purr  Download the:  kitty picture kitty picture  meow sound meow sound CS 150 9

10. Hello Purr: Start the Designer and create a new project  Create a new project  Click New on the left side, near the top of the page.  Enter the project name HelloPurr (one word, with no spaces) in the dialog box that appears, click OK. CS 150 10

11. Select components  You will find components under Palette.  Components are the basic elements you use to make apps on the Android phone.  They're like the ingredients in a recipe.  Label component: shows text on the screen  Button component: you tap this to initiate an action  Drawing Canvas: can hold still images or animations  Accelerometer (motion) sensor that works like a Wii controller and detects when you move or shake the phone CS 150 11

12. Components  To use a component in your app, you need to click and drag it onto the viewer in the middle of the Designer  When you add a component to the viewer, it will also appear in the components list on the right hand side of the viewer  Components have properties that can be adjusted to change the way the component appears within the app CS 150 12

13. Add a Button Component  Drag and drop the Button component to Screen1  The Button component is located in the Basic section of the Palette  In the list of properties, under Image, click on none...  Click Add….  Select the kitty.png file you downloaded earlier  Delete Text for Button1 listed under the Text property using the Backspace key. CS 150 13

14. Blocks editor  The Blocks Editor runs in a separate window  When you click Open the blocks editor from the Designer window, the Blocks Editor program file should download and run  If the Blocks Editor never opens, it might be because your browser is not set up to run downloaded Java applications automatically. In this case, find the downloaded file named AppInventorForAndroidCodeblocks.jnlp and open it. CS 150 14

15. Add a label  Under Palette  Drag and drop the Label component to the Viewer, placing it below the kitty. It will appear under your list of components as Label1  Under Properties  Change the Text property of Label1 to read "Pet the Kitty“  Change the BackgroundColor of Label1 by clicking on the box  Change the TextColor of Label1  Change the FontSize of Label1 to 30 15

16. Adding the meow sound  Under Palette  Click on the header marked Media to expand the Media section of the palette of components.  Drag out a Sound component and place it in the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components CS 150 16

17. Adding the meow sound  Under Media  Click Add...  Upload the meow.mp3 file to this project.  Under Properties  For the Sound1 component, set its Source to meow.mp3. CS 150 17

18. Making the sound play  Navigate to the Blocks Editor. It may be covered up by the web browser.  Click the My Blocks tab at the top left hand side.  Click Button1.  Drag and drop the when Button1.Click do block onto the editor.  Click Sound1.  Drag the call Sound1.Play block onto the editor and drop it into the when Button1.Click do block. CS 150 18