Android Form Elements

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

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

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

NestedLinearLayout

LinearLayout

Button

EditText:“howMany”

DrawableView(that we created):“drawableView”

TextView

Modify main.xml in your FunWithDrawing project like this:

1 <?xml version="1.0" encoding="utf-8"?> 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" >1213 <TextView14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:text="Enter a number" />1718 <EditText android:id="@+id/howMany"19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:layout_weight="1" />2223 <Button24 android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:text="Submit!"/>27 </LinearLayout>2829 <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" />3334 </LinearLayout>

Handling UI Events in Forms

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

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!

Add the Button's onClick attribute (line 27) in main.xml...

1 <?xml version="1.0" encoding="utf-8"?> 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" >1213 <TextView14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:text="Enter a number" />1718 <EditText android:id="@+id/howMany"19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:layout_weight="1" />2223 <Button24 android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:text="Submit!" 27 android:onClick="onSubmitButtonClick" />28 </LinearLayout>2930 <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" />3435 </LinearLayout>

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); 910 // get its text11 String text = et.getText().toString();12 // convert to an int13 int howMany = Integer.parseInt(text);14 15 // get the DrawableView by its ID16 DrawableView dv =

(DrawableView)findViewById(R.id.drawableView);17 // set its count variable18 dv.setCount(howMany);19 // redraw the View20 dv.invalidate();21 }

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 squares14 private int count;1516 // this allows the count to be set17 public void setCount(int c) { count = c; }

Rewrite this method in the DrawableView class...

18 // this version of onDraw randomly chooses a color19 // and position for drawing the rectangles20 protected void onDraw(Canvas canvas) {21 22 // this is the “paintbrush”23 Paint paint = new Paint();24 25 // loop for each rectangle to draw26 for (int i = 0; i < count; i++) {27 // set the color randomly28 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 randomly35 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

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)