Transcript Forms
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
Button
TextView
EditText:
“howMany”
Nested
LinearLayout
DrawableView
(that we created):
“drawableView”
LinearLayout
Modify main.xml in your FunWithDrawing project like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter a number" />
<EditText android:id="@+id/howMany"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit!"/>
</LinearLayout>
<edu.upenn.cs4hs.DrawableView android:id="@+id/drawableView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter a number" />
<EditText android:id="@+id/howMany"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit!"
android:onClick="onSubmitButtonClick" />
</LinearLayout>
<edu.upenn.cs4hs.DrawableView android:id="@+id/drawableView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</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);
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 }
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; }
Rewrite this method in the DrawableView class...
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 }
// this version of onDraw randomly chooses a color
// and position for drawing the rectangles
protected void onDraw(Canvas canvas) {
// this is the “paintbrush”
Paint paint = new Paint();
// loop for each rectangle to draw
for (int i = 0; i < count; i++) {
// set the color randomly
int whichColor = (int)(Math.random() * 4);
if (whichColor == 0) paint.setColor(Color.RED);
else if (whichColor == 1) paint.setColor(Color.GREEN);
else if (whichColor == 2) paint.setColor(Color.BLUE);
else paint.setColor(Color.YELLOW);
// set the position randomly
int x = (int)(Math.random()*200);
int y = (int)(Math.random()*300);
// draw Rectangle
canvas.drawRect(x, y, x+50, y+50, paint);
}
}
// 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)