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

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

3. Schedule Previously: Basics of building software Software development processes Configuration Management Continuous Integration Requirements Today: Intro to Android Tuesday: More Android programming

4. What is Android?

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

7. “Hello, Android”

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

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

10. 2. Create an Android Project in Eclipse File → New → Project Select “Android Project” Fill in Project details...

11. Name that appears on device Directory name Class to automatically create Java package Android version

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

14. Source code Auto-generated code UI layout String constants Configuration

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

16. 1 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 main.xml

17. 1 2 3 Hello World, HelloAndroid! 4 5 Hello, Android 6 strings.xml

18. 1 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 12 <action 13 android:name="android.intent.action.MAIN" /> 14 <category 15 android:name="android.intent.category.LAUNCHER"/> 16 17 18 19 AndroidManifest.xml

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

20. Android User Interfaces

21. Basic 2D Graphics in Android

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

23. 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 Canvas

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

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

26. Still in the MyShapeView class... 12 protected ShapeDrawable square; 13 protected ShapeDrawable circle; 14 15 protected void init() { 16 17 // blue 60x60 square at 80, 120 18 square = new ShapeDrawable(new RectShape()); 19 // set the color 20 square.getPaint().setColor(Color.BLUE); 21 // position it 22 square.setBounds(80, 120, 80+60, 120+60); 23 24 // greenish circle at 230, 220 25 circle = new ShapeDrawable(new OvalShape()); 26 // set the color using opacity + RGB 27 circle.getPaint().setColor(0xff74AC23); 28 // give it a white shadow 29 // arguments are blur radius, x-offset, y-offset 30 circle.getPaint().setShadowLayer(10, 15, 15, Color.WHITE); 31 // position it 32 circle.setBounds(230, 220, 230+80, 220+80); 33 34 } // end of init method

27. Still in the MyShapeView class... 35 // this is automatically called by Android 36 // EVERY time this View is rendered 37 protected void onDraw(Canvas canvas) { 38 39 // draw the square 40 square.draw(canvas); 41 42 // draw the circle 43 circle.draw(canvas); 44 45 } // end of onDraw method

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

29. Placing the View in the Activity Alternatively, you can put it in the XML file 1 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

30. rectangle oval shadow layer MyShapeView 1. Create a View class 2. Create ShapeDrawables 3. Override onDraw 4. Add View to Activity

31. 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 object 2 Paint p = new Paint(); 3 // set its color 4 p.setColor(Color.RED); 5 // set the stroke width 6 p.setStrokeWidth(10); 7 8 // draw a line from (40, 20) to (60, 50) 9 canvas.drawLine(40, 20, 60, 50, p);

32. 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 size 10 p.setTextSize(20); 11 12 // draw the text at (180, 120) 13 canvas.drawText(“Hello”, 180, 120, p);

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

34. 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 variable 11 square.draw(canvas); 12 } 13 14 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 120 && y < 180) { 18 squareColor = Color.RED; 19 invalidate(); // force redraw 20 return true; 21 } 22 } 23 return false; 24 }

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