1. Android Form Elements

2. Views Provide common UI functionality Form elements: text area, button, radio button, checkbox, dropdown list, etc. Date and time pickers Auto-complete Can mostly be placed in UI using main.xml

3. Layouts Groups of Views Specify how they are arranged in the window Linear: arranged side-by-side Relative: with respect to other Views Table: row-by-row Tab: each Activity/View has its own window GridView: m-by-n grid ListView: scrollable list

4. Adding form elements to the UI Use the different Layouts and Views in main.xml Layouts can be nested Views should specify width and height – fill_parent: use up as much space as possible – wrap_content: only use as much space as needed – weight: relative size compared to other elements Specify IDs for Views that you will access in code

5. Nested LinearLayout Button EditText: “howMany” DrawableView (that we created): “drawableView” TextView

6. Modify main.xml in your FunWithDrawing project like this: 1 2 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width="fill_parent" 6 android:layout_height="wrap_content" > 7 8 <LinearLayout 9 android:orientation="horizontal" 10 android:layout_width="fill_parent" 11 android:layout_height="fill_parent" > 12 13<TextView 14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:text="Enter a number" /> 17 18<EditText android:id="@+id/howMany" 19android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:layout_weight="1" /> 22 23<Button 24android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:text="Submit!"/> 27 28 29<edu.upenn.cs4hs.DrawableView android:id="@+id/drawableView" 30 android:layout_width="fill_parent" 31 android:layout_height="wrap_content" 32 android:layout_weight="1" /> 33 34

7. Handling UI Events in Forms

8. Handling user interaction Recall that each View has an onTouchEvent method that is automatically called by Android when the user interacts with the View In the Android View classes, Events are dispatched to registered Listeners depending on the type of action (click, key press, long click, etc.) For Buttons, you can simply use the main.xml file to specify the method used to handle clicks

9. Adding a Button click handler 1. Edit main.xml and so that the Button's “onClick” attribute is set to the onSubmitButtonClick method 1. Implement the onSubmitButtonClick method in your class that extends Activity 1.Be sure to use the appropriate method signature!

10. Add the Button's onClick attribute (line 27) in main.xml... 1 2 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width="fill_parent" 6 android:layout_height="wrap_content" > 7 8 <LinearLayout 9 android:orientation="horizontal" 10 android:layout_width="fill_parent" 11 android:layout_height="fill_parent" > 12 13<TextView 14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:text="Enter a number" /> 17 18<EditText android:id="@+id/howMany" 19android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:layout_weight="1" /> 22 23<Button 24android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:text="Submit!" 27 android:onClick="onSubmitButtonClick" /> 28 29 30<edu.upenn.cs4hs.DrawableView android:id="@+id/drawableView" 31 android:layout_width="fill_parent" 32 android:layout_height="wrap_content" 33 android:layout_weight="1" /> 34 35

11. Next, add this method to your FunWithDrawingActivity class 1 /* 2 * When the button is clicked, this method 3 * gets called. 4 */ 5 public void onSubmitButtonClick(View view) { 6 7 // get the EditText View by its ID 8 EditText et = (EditText)findViewById(R.id.howMany); 9 10 // get its text 11 String text = et.getText().toString(); 12 // convert to an int 13 int howMany = Integer.parseInt(text); 14 15 // get the DrawableView by its ID 16 DrawableView dv = (DrawableView)findViewById(R.id.drawableView); 17 // set its count variable 18 dv.setCount(howMany); 19 // redraw the View 20 dv.invalidate(); 21 }

12. Now change your DrawableView class to draw random squares 1 package edu.upenn.cs4hs; 2 3 public class DrawableView extends View { 4 5 // These stay the same as before 6 public DrawableView(Context c) { 7 super(c); 8 } 9 public DrawableView(Context c, AttributeSet a) { 10 super(c, a); 11 } 12 13 // add this variable to represent the number of squares 14 private int count; 15 16 // this allows the count to be set 17 public void setCount(int c) { count = c; }

13. Rewrite this method in the DrawableView class... 18 // this version of onDraw randomly chooses a color 19 // and position for drawing the rectangles 20 protected void onDraw(Canvas canvas) { 21 22 // this is the “paintbrush” 23 Paint paint = new Paint(); 24 25 // loop for each rectangle to draw 26 for (int i = 0; i < count; i++) { 27 // set the color randomly 28 int whichColor = (int)(Math.random() * 4); 29 if (whichColor == 0) paint.setColor(Color.RED); 30 else if (whichColor == 1) paint.setColor(Color.GREEN); 31 else if (whichColor == 2) paint.setColor(Color.BLUE); 32 else paint.setColor(Color.YELLOW); 33 34 // set the position randomly 35 int x = (int)(Math.random()*200); 36 int y = (int)(Math.random()*300); 37 38 // draw Rectangle 39 canvas.drawRect(x, y, x+50, y+50, paint); 40 } 41 42 } 43 44 } // end of DrawableView class

14. Where could you go from here? Draw random sized rectangles instead of 50x50 squares Draw random shapes instead of rectangles Detect that the user has touched one of the random shapes Detect “gestures” around the shape (by using the sequence of MotionEvent objects that are passed to onTouchEvent)