Android Development Tutorial

Size: px

Start display at page:

Download "Android Development Tutorial"

Francis Underwood
5 years ago
Views:

1 Android Development Tutorial Part II Human-Computer Interaction (COMP 4020) Winter 2013

2 2

3 Canvas Example public class CanvasApp extends protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_canvas_app); Create a class CanvasApp" that inherits from class "Activity" 3

4 4

5 Canvas Example public class CanvasApp extends protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_canvas_app); 5

6 Canvas Example public class CanvasApp extends protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_canvas_app); 6

7 Canvas Example public class CanvasApp extends protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_canvas_app); Set your layout to show your screen/app 7

8 Assignment 1 Start Target 8

9 Task 1 9

10 View Occupies rectangular region of the screen Responsible for drawing and event handling Common operations: Set properties Set focus Set up listeners Set visibility 10 10

11 Canvas Example public class MyCanvas extends View /* * Constructor */ public MyCanvas(Context context) super(context); setfocusable(true); 11

12 Canvas Example public class MyCanvas extends View /* * Constructor */ public MyCanvas(Context context) super(context); setfocusable(true); 12

13 Canvas Example public class CanvasApp extends Activity MyCanvas protected void oncreate(bundle savedinstancestate) super.oncreate(savedinstancestate); setcontentview(r.layout.activity_canvas_app); canvasview = new MyCanvas(this); setcontentview(canvasview); canvasview.requestfocus(); 13

14 MyCanvas Class public void ondraw(canvas canvas) //end ondraw 14

15 Canvas Example public void ondraw(canvas canvas) int rectlocx = 0; int rectlocy = 0; int rectwidth = 100; int rectheight = 100; Paint paintrect = new Paint(); paintrect.setcolor(color.green); paintrect.setantialias(true); //left //top //right-left //bottom-top //Paint canvas.drawrect(rectlocx, rectlocy, rectlocx+rectwidth, rectlocy+rectheight, paintrect); //end ondraw 15

16 Output 16

17 Canvas Example 17

18 Canvas Example public void ondraw(canvas canvas) //Code for drawing rectangle int textlocx = 0; int textlocy = 400; String text = "Rectangle"; //X //Y //Text int fontsize = 100; Paint painttext = new Paint(); painttext.setcolor(color.blue); painttext.setantialias(true); painttext.settextsize(fontsize); //Paint canvas.drawtext(text, textlocx, textlocy, painttext); 18

19 Output 19

20 Next Step 20

21 Canvas Example public class MyCanvas2 extends View implements OnTouchListener int rectlocx, rectlocy, rectwidth, rectheight; Paint paintrect; public MyCanvas2(Context context) super(context); setfocusable(true); setfocusableintouchmode(true); this.setontouchlistener(this); setup(); //end constructor 21

22 private void setup() rectlocx = 0; rectlocy = 0; rectwidth = 100; rectheight = 100; Canvas Example paintrect = new Paint(); paintrect.setcolor(color.green); paintrect.setantialias(true); public void ondraw(canvas canvas) canvas.drawrect(rectlocx, rectlocy, rectlocx+rectwidth, rectlocy+rectheight, paintrect); 22

23 public boolean ontouch(view view, MotionEvent event) if(event.getaction() == MotionEvent.ACTION_UP ) if((event.getx() > rectlocx) && (event.getx() < rectlocx+rectwidth) && (event.gety() > rectlocy) && (event.gety() < rectlocy+rectheight)) rectlocx = randnumgen(1024-rectwidth); rectlocy = randnumgen( rectheight); this.invalidate(); return true; private int randnumgen(int max) return (int)(math.random()* max); 23

24 Output 24

25 Assignment 1 Start Target 25

26 Lock Orientation Manifest update: Add activity attribute <?xml version="1.0" encoding="utf-8"?> <manifest // <application <activity android:name=".canvasapp" android:screenorientation="landscape > // </application> </manifest> 26

27 public class MyCanvas extends View implements OnTouchListener int startlocx, startlocy, startwidth, startheight; int targetlocx, targetlocy, targetwidth, targetheight; Paint painttarget, paintstart; boolean startvisible, targetvisible; String data; int currtrial, maxtrials; public MyCanvas(Context context) super(context); setfocusable(true); setfocusableintouchmode(true); this.setontouchlistener(this); setup(); 27

28 private void setup() //Rectangle (START) startlocx = 0; startlocy = 0; startwidth = 100; startheight = 100; paintstart = new Paint(); paintstart.setcolor(color.blue); paintstart.setantialias(true); startvisible = true; //Rectangle (TARGET) targetlocx = 0; targetlocy = 0; targetwidth = 100; targetheight = 100; painttarget = new Paint(); painttarget.setcolor(color.green); painttarget.setantialias(true); targetvisible = false; Start Target data = ""; maxtrials = 5; currtrial = 0; //end setup 28

29 public void ondraw(canvas canvas) if(startvisible == true) canvas.drawrect(startlocx, startlocy, startlocx+startwidth, startlocy+startheight, paintstart); if(targetvisible == true) canvas.drawrect(targetlocx, targetlocy, targetlocx+targetwidth, targetlocy+targetheight, painttarget); 29

30 public boolean ontouch(view view, MotionEvent event) if(event.getaction() == MotionEvent.ACTION_UP ) if(startvisible == true)??? if(targetvisible == true)??? this.invalidate(); return true; //end ontouch 30

31 if(startvisible == true) //Generate random position for target rectangle //Set the start rectangle visibility to false //Set the target rectangle visibility to true if(targetvisible == true) //Save data //Increase trial no // if current trial number doesn t exceed maximum trial no: //Set the start rectangle visibility to true //Set the target rectangle visibility to false Else // Set both rectangle visibility to false 31

32 if(startvisible == true) if((event.getx() > startlocx) && (event.getx() < startlocx+startwidth) && (event.gety() > startlocy) && (event.gety() < startlocy+startheight)) startvisible = false; // randomly place target and show targetlocx = randnumgen(1024-targetwidth); targetlocy = randnumgen( targetheight); targetvisible = true; //end if (START_TOUCHED) //end if (startvisible) 32

33 if(targetvisible == true) if((event.getx() > targetlocx) && (event.getx() < targetlocx+targetwidth) && (event.gety() > targetlocy) && (event.gety() < targetlocy+targetheight)) recordtrial((int)event.getx(), (int)event.gety(), event.geteventtime()); currtrial++; if(currtrial < maxtrials) targetvisible = false; startvisible = true; //end if else targetvisible = false; startvisible = false; savetofile(data); //end if-else //end if (RECT_TOUCHED) //end if(targetvisible) 33

34 private void savetofile(string datatosave) File file = new File(Environment.getExternalStoragePublicDirectory(Environment. DIRECTORY_DOWNLOADS),"touchNmoveNsave.txt"); try FileOutputStream os = new FileOutputStream(file, false); OutputStreamWriter out = new OutputStreamWriter(os); out.write(datatosave); out.close(); os.close(); catch(exception e) //error creating, opening, writing or closing file 34

35 Write to Storage Manifest update: Add permission <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" // android:versionname="1.0"> <uses-permission android:name="android.permission.write_external_storage" /> <uses-sdk android:minsdkversion="8" /> // 35

36 Question?

package import import import import import import import public class extends public void super new this class extends public super public void new

package import import import import import import import public class extends public void super new this class extends public super public void new Android 2-D Drawing Android uses a Canvas object to host its 2-D drawing methods. The program below draws a blue circle on a white canvas. It does not make use of the main.xml layout but draws directly