• Save
Mobile Application Development: Touchscreens & MotionEvents
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Application Development: Touchscreens & MotionEvents

  • 946 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
946
On Slideshare
731
From Embeds
215
Number of Embeds
22

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 215

http://vkedco.blogspot.com 123
http://www.vkedco.blogspot.com 30
http://vkedco.blogspot.sk 16
http://vkedco.blogspot.in 16
http://vkedco.blogspot.co.uk 5
http://vkedco.blogspot.mx 4
http://vkedco.blogspot.co.il 2
http://vkedco.blogspot.de 2
http://www.vkedco.blogspot.fr 2
http://vkedco.blogspot.kr 2
http://vkedco.blogspot.ru 2
http://vkedco.blogspot.ca 1
http://vkedco.blogspot.nl 1
http://vkedco.blogspot.ro 1
http://vkedco.blogspot.it 1
http://vkedco.blogspot.ie 1
http://vkedco.blogspot.ch 1
http://vkedco.blogspot.tw 1
http://vkedco.blogspot.pt 1
http://www.vkedco.blogspot.in 1
http://vkedco.blogspot.com.es 1
http://vkedco.blogspot.sg 1

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