+ All Categories
Home > Documents > Announcements Homework #2 will be posted after class due Thursday Feb 7, 1:30pm you may work with...

Announcements Homework #2 will be posted after class due Thursday Feb 7, 1:30pm you may work with...

Date post: 14-Dec-2015
Category:
Upload: peter-marsh
View: 214 times
Download: 0 times
Share this document with a friend
Popular Tags:
35
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
Transcript
Page 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.

Announcements

Homework #2 will be posted after classdue Thursday Feb 7, 1:30pmyou may work with one other person

No office hours tonight (sorry!)I will be available tomorrow 3-4pm

Page 2: 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.

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

Page 3: 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.

Schedule

Previously: Basics of building softwareSoftware development processesConfiguration ManagementContinuous IntegrationRequirements

Today: Intro to Android

Tuesday: More Android programming

Page 4: 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.

What is Android?

Page 5: 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.

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

Page 6: 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.
Page 7: 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.

“Hello, Android”

Page 8: 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.

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

Page 9: 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.

1. Set Up Your Android Environmenthttp://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

Page 10: 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.

2. Create an Android Project in Eclipse

File → New → Project

Select “Android Project”

Fill in Project details...

Page 11: 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.

Name that appearson device

Directoryname

Class toautomatically

create

Java package

Androidversion

Page 12: 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.

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

Page 13: 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.
Page 14: 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.

Sourcecode

Auto-generatedcode

UIlayout

Stringconstants

Configuration

Page 15: 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.

1 public class HelloAndroid extends Activity {2  /** Called when the activity is first created. */3    @Override4    public void onCreate(Bundle savedInstanceState) 5 {6      super.onCreate(savedInstanceState);7        setContentView(R.layout.main);8    }9 }

HelloAndroid.java

Page 16: 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.

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>

main.xml

Page 17: 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.

1 <?xml version="1.0" encoding="utf-8"?>2 <resources>3 <string name="hello">Hello World, HelloAndroid!4 </string>5 <string name="app_name">Hello, Android</string>6 </resources>

strings.xml

Page 18: 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.

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>

AndroidManifest.xml

Page 19: 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.

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

Page 20: 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.

Android User Interfaces

Page 21: 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.

Basic2D Graphicsin Android

Page 22: 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.

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

Page 23: 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.

Drawing on a Canvas

Visible elements in an Android UI are called Views

Each View has an associated CanvasWhen 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 Canvas

Page 24: 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.

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!

Create a custom View class

Page 25: 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.

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

Page 26: 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.

Still in the MyShapeView class...

12 protected ShapeDrawable square;13 protected ShapeDrawable circle;1415 protected void init() {16 17 // blue 60x60 square at 80, 12018 square = new ShapeDrawable(new RectShape());19 // set the color20 square.getPaint().setColor(Color.BLUE);21 // position it22 square.setBounds(80, 120, 80+60, 120+60);2324 // greenish circle at 230, 22025 circle = new ShapeDrawable(new OvalShape());26 // set the color using opacity + RGB27 circle.getPaint().setColor(0xff74AC23);28 // give it a white shadow29 // arguments are blur radius, x-offset, y-offset30 circle.getPaint().setShadowLayer(10, 15, 15, Color.WHITE);31 // position it32 circle.setBounds(230, 220, 230+80, 220+80);3334 } // end of init method

Page 27: 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.

Still in the MyShapeView class...

35 // this is automatically called by Android36 // EVERY time this View is rendered37 protected void onDraw(Canvas canvas) {38 39 // draw the square40 square.draw(canvas);4142 // draw the circle43 circle.draw(canvas);4445 } // end of onDraw method

Page 28: 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.

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);56 // set the View in the Activity (not using XML here)7 setContentView(new MyShapeView(this));89 } // end of onCreate method

Page 29: 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.

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 />1314 <edu.upenn.cis542.MyShapeView15 android:layout_width="fill_parent" 16 android:layout_height="wrap_content" 17 />18 </LinearLayout>

Page 30: 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.

rectangleoval

shadow layer

MyShapeView

1. Create a View class

2. Create ShapeDrawables

3. Override onDraw

4. Add View to Activity

Page 31: 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.

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 // create a Paint object2 Paint p = new Paint();3 // set its color4 p.setColor(Color.RED);5 // set the stroke width6 p.setStrokeWidth(10);78 // draw a line from (40, 20) to (60, 50)9 canvas.drawLine(40, 20, 60, 50, p);

Page 32: 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.

Drawing Text• The Canvas also has a drawText method that will

make text appear on the screen

In your View's onDraw method:

1 // create a Paint object 2 Paint p = new Paint(); 3 // set its color 4 p.setColor(Color.WHITE); 5 // set the alignment 6 p.setTextAlign(Paint.Align.LEFT); 7 // set the typeface (font) 8 p.setTypeface(Typeface.SANS_SERIF); 9 // set the size10 p.setTextSize(20);1112 // draw the text at (180, 120)13 canvas.drawText(“Hello”, 180, 120, p);

Page 33: 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.

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( )

Page 34: 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.

This is the revised MyShapeView class...

1 protected ShapeDrawable square; 2 protected int squareColor = Color.BLUE; 3 4 protected void init() { 5 square = new ShapeDrawable(new RectShape()); 6 square.setBounds(80, 120, 80+60, 120+60); 7 } 8 9 protected void onDraw(Canvas canvas) {10 square.getPaint().setColor(squareColor); // use variable11 square.draw(canvas);12 }1314 public boolean onTouchEvent(MotionEvent e) {15 if (e.getAction() == MotionEvent.ACTION_DOWN) {16 int x = (int)e.getX(); int y = (int)e.getY();17 if (x > 80 && x < 140 && y > 120 && y < 180) {18 squareColor = Color.RED;19 invalidate(); // force redraw20 return true;21 }22 }23 return false;24 }

Page 35: 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.

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


Recommended