Transcript Java Coding in Eclipse - Jacksonville University

1
Android architecture overview
CS 150
Android
2


A software stack for mobile devices developed and
managed by Open Handset Alliance
Free software under Apache License
Android
Key Applications
Middleware
Operating System (Linux Kernel 2.6)
CS 150
Android Software Stack
3
CS 150
Android App Inventor
4




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
App inventor setup
5

Visit the Java test page
 You


should see a message that Java is working
Download the installer
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
App inventor setup
6



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
App inventor setup
7



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
8
Your first Android app!!!
Hello Purr!
CS 150
Hello Purr
9

Download the:
 kitty
picture
 meow sound
CS 150
Hello Purr: Start the Designer and create a new
project
10

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
Select components
11



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
Components
12



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
Add a Button Component
13

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
Blocks editor
14


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
Add a label
15

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
Adding the meow sound
16

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
Adding the meow sound
17

Under Media
 Click
Add...
 Upload the meow.mp3 file to this project.

Under Properties
 For
CS 150
the Sound1 component, set its Source to meow.mp3.
Making the sound play
18






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