Mobile Application Development: Touchscreens & MotionEvents

678
-1

Published on

Mobile Application Development: Touchscreens & MotionEvents

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
678
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Application Development: Touchscreens & MotionEvents

  1. 1. Mobile Application Development Touchscreens & MotionEvents Vladimir Kulyukin Department of Computer Science Utah State Universityhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  2. 2. Outline ● Touchscreens ● Motion Events ● Development & Consumption of Touch Gestureshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  3. 3. Touchscreenshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  4. 4. Motivation ● Touch gestures are a viable input alternative, especially on the go ● Touchscreen – is a touch gesture consumption surface ● Recognition accuracy for many (not all) users are higher for touch gestures than for speech ● Unlike speech utterances, touch gestures preserve privacyhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  5. 5. Touchscreen ● Touchscreen is a surface (e.g., an electronic visual display) for detecting touches within a given area ● Touchscreen is made up of special materials that capture pressure inputs and translate them into digital data ● Digital data (x, y, pressure, etc) are passed to software that process them ● Some touchscreens require the use of a stylus ● Touchscreens are becoming a must for many personal digital assitants and increasingly many video gameshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  6. 6. Bits of History ● The concept of touchscreen is described by E.A. Johnson in 1965 ● Potential application in air traffic control systems proposed in 1968 ● First application developed at CERN (European Center for Nuclear Research) in 1973 ● In the 1980s several musical sampling and synthesis systems used light pen technology (Fairlight CMI, Fairlight CMI IIx) ● HP-150 built in 1983 is one of the first touchscreen computershttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  7. 7. Touchscreen Technologies ● Resistive: – touchscreen consists of two thin electric layers separated by thin space – voltage is applied to top layer and sensed by bottom one ● Surface acoustic wave (SAW): – utrasonic waves pass over touchscreen surface – when surface is touched a portion of the wave is absorbed – changes in waves register touch positions and send them to touch processor ● Capacitive: – Capacitance is the ability of a body to store electrical charge – Capacitive touchscreens consist of insulators (e.g., glass) coated with transparent conductors – Since human hand stores electrical charge, touching surface results in surfaces electrostatic field distortions used to capture touchs datahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  8. 8. Motion Eventshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  9. 9. MotionEvent ● On Android, digital data from touchscreens as MotionEvent objects ● MotionEvent objects are created when the user touches the devices touchscreen ● MotionEvent objects are handled by the View.onTouchEvent() methodhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  10. 10. MotionEvent Sequences ● When user places his/her finger, moves it (without lifting it up), and then lifts it up, a sequence of MotionEvent objects is generated ● Such sequences can be captured and used in touch gesture recognition ● Each MotionEvent object contains information on: 1) type of action captured (e.g., MotionEvent.ACTION_DOWN, MotionEvent.ACTION_UP, etc); 2) pressure value; 3) x and y coordinates; 4) time of eventhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  11. 11. MotionEvent ● On Android, digital data from touchscreens as MotionEvent objects ● MotionEvent objects are created when the user touches the devices touchscreen ● As the bare minimum each MotionEvent object contains the x and y coordinates of the touch ● MotionEvent objects are handled by the View.onTouchEvent() methodhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  12. 12. MotionEvent.getAction() ● MotionEvent.getAction() can be used to retrieve the type of action ● Examples: – MotionEvent.getAction() returns ACTION_DOWN when user touches screen – MotionEvent.getAction() returns ACTION_MOVE when user moves sideways – MotionEvent.getAction() returns ACTION_UP when user lifts his/her fingerhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  13. 13. View.OnTouchListener ● Classes the receive touchscreen events must implement View.OnTouchListener ● Two main methods to handle MotionEvents are onTouch(View, MotionEvent) and onTouchEvent(MotionEvent) ● onTouch(View, MotionEvent) is used when one OnTouchListener handles MotionEvents from multiple viewshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  14. 14. View.OnTouchListener ● If onTouch() or onTouchEvent() consumes a received MotionEvent and no other component should not about it, the method should return true ● If onTouch() or onTouchEvent() does not/cannot consume a received MotionEvent, it should return falsehttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  15. 15. DrawTouchDrive Projecthttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  16. 16. Project Description ● This application customizes a View class by overriding android.view.View.onTouchEvent(). The application draw a 3x3 TicTacToe board, 2 red circles, and 2 blue crosses ● The user can touch drive circles and crosses on the screen by capturing MotionEventshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  17. 17. Object-Oriented Modeling ● Shape.java ● Circle.java ● Cross.java ● BoardGeometry.javahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  18. 18. Main Activity Screenshotshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  19. 19. Custom View: TicTacToeView public class TicTacToeView extends View { final Paint mBackgroundPaint; final Paint mForeCirclePaint; final Paint mForeCrossPaint; final Paint mForeBoardPaint; final BoardGeometry mBoardGeometry; ArrayList<Circle> mCircles; ArrayList<Cross> mCrosses; private boolean mDrawingEnabled = true; // rest of code }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  20. 20. Custom View: TicTacToeView public class TicTacToeView extends View { // placing circles and crosses to their start xs & ys private void createCircles() { mCircles = new ArrayList<Circle>(); mCircles.add(new Circle(30, 30, 20)); mCircles.add(new Circle(120, 30, 20)); } private void createCrosses() { mCrosses = new ArrayList<Cross>(); mCrosses.add(new Cross(30, 350, 20)); mCrosses.add(new Cross(120, 350, 20)); } }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  21. 21. TicTacToeView: Handling MotionEvents public class TicTacToeView extends View { public boolean onTouchEvent(MotionEvent event) { // 1. get the x and y of MotionEvent float x = event.getX(); float y = event.getY(); // 2. find circle closest to x and y Circle cr = findCircleClosestToTouchEvent(x, y); // 3. find cross closest to x and y Cross cx = findCrossClosestToTouchEvent(x, y); // 4. compute euclid distances to find which is // closer - circle or cross float dtcr = euclidDist(cr.getCurrentX(), cr.getCurrentY(), x, y); float dtcx = euclidDist(cx.getMidX(), cx.getMidY(), x, y); // 5. if distance to closest circle is smaller // handle the circle; otherwise, handle the cross if (dtcr < dtcx) { handleTouchedCircle(event, cr); } else { handleTouchedCross(event, cx); } return true; } }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  22. 22. TicTacToeView: Canvas Drawing public class TicTacToeView extends View { public void draw(Canvas canvas) { if ( mDrawingEnabled ) { final int width = canvas.getWidth(); final int height = canvas.getHeight(); // 1. draw background rectangle that covers the entire canvas canvas.drawRect(0, 0, width, height, mBackgroundPaint); // 2. draw board on the canvas drawBoard(canvas); // 3. draw red circles on canvas drawCirclesOnCanvas(canvas); // 4. draw blue crosses on canvas drawCrossesOnCanvas(canvas); // 5. force redraw invalidate(); } } }http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  23. 23. TicTacToeView: Main Activity Layout RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <org.vkedco.mobappdev.draw_touch_drive_00001.TicTacToeView android:id="@+id/pntr" android:tag="Painter" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  24. 24. Custom View: TicTacToeView RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <org.vkedco.mobappdev.draw_touch_drive_00001.TicTacToeView android:id="@+id/pntr" android:tag="Painter" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  25. 25. TicTacToeView.javahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  26. 26. Project Description This application customizes a View class by overriding android.view.View.onTouchEvent(). The application allows the user to play 3x3 TicTacToe with him/herself by touching appropriate cells of the TicTacToe board.http://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  27. 27. Development & Consumption of Touch Gestureshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  28. 28. Development of Touch Gestures ● You create your own gesture recognizer that captures and interprets a library of touch gestures ● You can also use the Android GestureBuilder application to develop a library of touch gestures ● The built gestures are saved on sdcard ● Each gesture receives a name and can be subsequently deleted or refinedhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  29. 29. Consumption of Touch Gestures ● To implement a touch gesture consumer application in Eclipse you must create a directory /res/raw ● If you used the Android GestureBuilder application to develop a library of touch gestures they must be saved in /res/raw ● The main layout of the gesture consumer must be android.gesture.GestureOverlayView ● The class that consumes gestures must implement OnGesturePerformedListenerhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  30. 30. References ● en.wikipedia.org/wiki/Touchscreen ● http://developer.android.com/reference/android/view/MotionEvent.html ● http://developer.android.com/reference/android/view/View.OnTouchListener.htmlhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  31. 31. Feedback Bugs to vladimir dot kulyukin at gmail dot comhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com

×