Download Slide 1

Announcements


Homework #2 will be posted after class
 due Thursday Feb 7, 1:30pm
 you may work with one other person
No office hours tonight (sorry!)
 I will be available tomorrow 3-4pm
Projects



I will email you with your group & project
assignment tomorrow if I haven’t done so already
Please fill out the When2Meets for arranging
meetings
Kickoff (“release planning”) meetings start next
week
Schedule

Previously: Basics of building software
 Software development processes
 Configuration Management
 Continuous Integration
 Requirements

Today: Intro to Android

Tuesday: More Android programming
What is Android?
What is Android?

An open source Linux-based operating system
intended for mobile computing platforms

Includes a Java API for developing applications

It is not a device or product
“Hello, Android”
Creating Your First(?) Android App
1. Set up your development environment
2. Create a new Android project in Eclipse
3. Run it in the emulator
4. Hilarity ensues
1. Set Up Your Android Environment

http://developer.android.com/sdk

Install Eclipse

Install Android SDK (Android libraries)

Install ADT plugin (Android development tools)

Create AVD (Android virtual device)

Moore 207 and Moore 100B machines should
have the environment already set up
2. Create an Android Project in Eclipse

File → New → Project

Select “Android Project”

Fill in Project details...
Directory
name
Android
version
Java package
Name that appears
on device
Class to
automatically
create
3. Run the Android Application

Run → Run (or click the “Run” button)

Select “Android Application”


The emulator may take a few minutes (or
sometimes longer!) to start, so be patient!
You don't need to restart the emulator when you
have a new version of your application
Source
code
Auto-generated
code
String
constants
UI
layout
Configuration
HelloAndroid.java
1
2
3
4
5
6
7
8
9
public class HelloAndroid extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
main.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3
xmlns:android="http://schemas.android.com/apk/res/android"
4
android:orientation="vertical"
5
android:layout_width="fill_parent"
6
android:layout_height="fill_parent"
7 >
8
<TextView
9
android:layout_width="fill_parent"
10
android:layout_height="wrap_content"
11
android:text="@string/hello "
12
/>
13 </LinearLayout>
strings.xml
1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloAndroid!
</string>
<string name="app_name">Hello, Android</string>
</resources>
AndroidManifest.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <manifest
3
xmlns:android="http://schemas.android.com/apk/res/android"
4
package="edu.upenn.cis350"
5
android:versionCode="1"
6
android:versionName="1.0">
7
<application android:icon="@drawable/icon"
8
android:label="@string/app_name">
9
<activity android:name=".HelloAndroid"
10
android:label="@string/app_name">
11
<intent-filter>
12
<action
13
android:name="android.intent.action.MAIN" />
14
<category
15
android:name="android.intent.category.LAUNCHER"/>
16
</intent-filter>
17
</activity>
18
</application>
19 </manifest>
Review: Android Components
• Application: consists of one or more Activities
• Activity:
• A “screen” in an Android app
• Java class that contains UI code
• Has a ContentView that consists of Layouts and
Views
• Layout: specifies how Views are arranged; may be
declared in xml file
• AndroidManifest.xml: main configuration file
Android User Interfaces
Basic
2D Graphics
in Android
Android Graphics Programming



There are many ways to do graphics programming
in Android
–
2D vs. 3D
–
static vs. dynamic
Many of them require a lot of knowledge of the
underlying graphics libraries
We will look at the very simplest form of 2D
graphics
Drawing on a Canvas

Visible elements in an Android UI are called Views

Each View has an associated Canvas



When the View is shown, its onDraw method is
automatically called by Android
It uses the Canvas to render the different things it
wants to display
You can create your own View with your own
onDraw method to display basic objects using the
Create a custom View class
1 public class MyShapeView extends View {
2
3
// You must implement these constructors!!
4
public MyShapeView(Context c) {
5
super(c);
6
init(); // more on this in a second!
7
}
8
public MyShapeView(Context c, AttributeSet a) {
9
super(c, a);
10
init();
11
}
... to be continued!
Shapes and ShapeDrawables
• Android has built-in Shape classes to represent
2D shapes, e.g. RectShape, OvalShape, etc.
• From a Shape, you can create a ShapeDrawable
object, which has methods for drawing itself
• A ShapeDrawable has a Paint object that is the
“paintbrush”: color, transparency, stroke, etc.
• ShapeDrawables have a “bounding area” using an
x-y coordinate system with (0,0) in top left corner
Still in the MyShapeView class...
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
protected ShapeDrawable square;
protected ShapeDrawable circle;
protected void init() {
// blue 60x60 square at 80, 120
square = new ShapeDrawable(new RectShape());
// set the color
square.getPaint().setColor(Color.BLUE);
// position it
square.setBounds(80, 120, 80+60, 120+60);
// greenish circle at 230, 220
circle = new ShapeDrawable(new OvalShape());
// set the color using opacity + RGB
circle.getPaint().setColor(0xff74AC23);
// give it a white shadow
// arguments are blur radius, x-offset, y-offset
circle.getPaint().setShadowLayer(10, 15, 15, Color.WHITE);
// position it
circle.setBounds(230, 220, 230+80, 220+80);
} // end of init method
Still in the MyShapeView class...
35
36
37
38
39
40
41
42
43
44
45
// this is automatically called by Android
// EVERY time this View is rendered
protected void onDraw(Canvas canvas) {
// draw the square
square.draw(canvas);
// draw the circle
circle.draw(canvas);
} // end of onDraw method
Placing the View in the Activity
• If you want the entire Activity to be filled with your
custom View, pass an instance to setContentView
In your Activity class:
1 public void onCreate(Bundle savedInstanceState) {
2
3
// always do this first!
4
super.onCreate(savedInstanceState);
5
6
// set the View in the Activity (not using XML here)
7
setContentView(new MyShapeView(this));
8
9 } // end of onCreate method
Placing the View in the Activity
• Alternatively, you can put it in the XML file
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3
xmlns:android="http://schemas.android.com/apk/res/android"
4
android:orientation="vertical"
5
android:layout_width="fill_parent"
6
android:layout_height="fill_parent"
7 >
8
<TextView
9
android:layout_width="fill_parent"
10
android:layout_height="wrap_content"
11
android:text="@string/hello "
12
/>
13
14
<edu.upenn.cis542.MyShapeView
15
android:layout_width="fill_parent"
16
android:layout_height="wrap_content"
17
/>
18 </LinearLayout>
MyShapeView
rectangle
oval
1. Create a View class
2. Create ShapeDrawables
3. Override onDraw
4. Add View to Activity
shadow layer
Drawing Lines
• In the onDraw method, you can create a Paint
object and draw right on the Canvas
• The Canvas has a drawLine method that you can
use to draw a line segment between two points
In your View's onDraw method:
1
2
3
4
5
6
7
8
9
// create a Paint object
Paint p = new Paint();
// set its color
p.setColor(Color.RED);
// set the stroke width
p.setStrokeWidth(10);
// draw a line from (40, 20) to (60, 50)
canvas.drawLine(40, 20, 60, 50, p);
Drawing Text
• The Canvas also has a drawText method that will
make text appear on the screen
In your View's onDraw method:
1
2
3
4
5
6
7
8
9
10
11
12
13
// create a Paint object
Paint p = new Paint();
// set its color
p.setColor(Color.WHITE);
// set the alignment
p.setTextAlign(Paint.Align.LEFT);
// set the typeface (font)
p.setTypeface(Typeface.SANS_SERIF);
// set the size
p.setTextSize(20);
// draw the text at (180, 120)
canvas.drawText(“Hello”, 180, 120, p);
Handling User Interaction
• When the user interacts with the View, Android
invokes its onTouchEvent method
• Android passes a MotionEvent object, which
includes:
–
the type of Action (down, up/release, move)
–
the location (x-y coordinate)
–
the time at which it occurred
• To force the View to redraw, call invalidate( )
This is the revised MyShapeView class...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
protected ShapeDrawable square;
protected int squareColor = Color.BLUE;
protected void init() {
square = new ShapeDrawable(new RectShape());
square.setBounds(80, 120, 80+60, 120+60);
}
protected void onDraw(Canvas canvas) {
square.getPaint().setColor(squareColor); // use variable
square.draw(canvas);
}
public boolean onTouchEvent(MotionEvent e) {
if (e.getAction() == MotionEvent.ACTION_DOWN) {
int x = (int)e.getX(); int y = (int)e.getY();
if (x > 80 && x < 140 && y > 120 && y < 180) {
squareColor = Color.RED;
invalidate(); // force redraw
return true;
}
}
return false;
}
Review: Android Graphics
• View: base class to extend for UI component
• onDraw: method that is called when View is
displayed in the UI
• Paint: object that is used to draw basic elements on
the screen
• onTouchEvent: callback method that is invoked
when user interacts with View