Your SlideShare is downloading. ×
0
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Mobile Application Development: Touchscreens & MotionEvents
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Application Development: Touchscreens & MotionEvents

613

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Application Development Touchscreens & MotionEvents Vladimir Kulyukin Department of Computer Science Utah State Universityhttp://www.youtube.com/vkedco www.vkedco.blogspot.com
  • 2. Outline ● Touchscreens ● Motion Events ● Development & Consumption of Touch Gestureshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 3. Touchscreenshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 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. 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. 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. 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. Motion Eventshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 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. 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. 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. 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. 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. 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. DrawTouchDrive Projecthttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 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. Object-Oriented Modeling ● Shape.java ● Circle.java ● Cross.java ● BoardGeometry.javahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 18. Main Activity Screenshotshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 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. 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. 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. 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. 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. 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. TicTacToeView.javahttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 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. Development & Consumption of Touch Gestureshttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com
  • 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. 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. 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. Feedback Bugs to vladimir dot kulyukin at gmail dot comhttp://www.youtube.com/vkedco http://www.vkedco.blogspot.com

×