6 - 5 - Touch and Gestures - Part 2 (11-46)

5
[BLANK_AUDIO] Hi I'm Adam Porter and this is Programming Mobile Applications for Android Handheld Systems. Android provides a class called Gesture Detector, that applications can use to recognize common touch gestures. This class can recognize gestures, such as a confirmed single tap, a double tap. Which is essentially two single taps in rapid succession. And a fling. Which is a press, followed by a drag, and release motion that has a reasonably high velocity. To use a gesture detector, your activity will have to create an instance of the GestureDetector class and will have to give it an object that implements the GestureDetector.OnGestureListener interface. And then the activity will need to override it's onTouchEvent method, which is the method that gets called when the activity receives a touch event. And this method will then delegate the motion event to the gesture detectors onTouchEvent method. Let's look at an example application that uses a gesture detector to recognize a fling gesture. This application is called TouchGestureViewFlipper and when it starts, it presents a text view that displays a number. If the user performs a right to left fling gesture, then the text view will scroll off the left side of the screen. And while it does it, a new text view, displaying a new number will scroll in behind it, from the right. Let's see that application in action. So here's my device. Now I'll start up the touch gesture, view flipper application. When it starts up, the screen shows a text view displaying the number zero. Now, if I perform a fling gesture that is if I press and hold the view. And then quickly swipe towards the left side of the screen and finally lift my finger off the screen. Then we'll see the animation that I mentioned earlier. Let me do that now.

Transcript of 6 - 5 - Touch and Gestures - Part 2 (11-46)

Page 1: 6 - 5 - Touch and Gestures - Part 2 (11-46)

[BLANK_AUDIO]Hi I'm Adam Porter and this isProgramming Mobile Applications forAndroid Handheld Systems.Android provides a class called GestureDetector, thatapplications can use to recognize commontouch gestures.This class can recognize gestures, such asa confirmed single tap, a double tap.Which is essentially two single taps inrapid succession.And a fling.Which is a press, followed by a drag,and release motion that has a reasonablyhigh velocity.To use a gesture detector, your activitywill have to create an instance of theGestureDetector class and will have togive it an object that implements theGestureDetector.OnGestureListenerinterface.And then the activity will need tooverride it's onTouchEvent method, whichis the method that gets called when theactivity receives a touch event.And this method will then delegate themotion event to the gesture detectorsonTouchEvent method.Let's look at an example application thatusesa gesture detector to recognize a flinggesture.This application is calledTouchGestureViewFlipper and when itstarts,it presents a text view that displays anumber.If the user performs a right to left flinggesture, thenthe text view will scroll off the leftside of the screen.And whileit does it, a new text view, displaying anew numberwill scroll in behind it, from the right.Let's see that application in action.So here's my device.Now I'll start up the touch gesture, viewflipper application.When it starts up, the screen shows a textview displaying the number zero.Now, if I perform a fling gesture that isif I press and hold the view.And then quickly swipe towards the leftside of the screen and finally liftmy finger off the screen.Then we'll see the animation that Imentioned earlier.Let me do that now.

Page 2: 6 - 5 - Touch and Gestures - Part 2 (11-46)

And as you can see the text view with thenumber zero slid off the screen.Going towards the left, and the new textview, displayingthe number 1, slid into the screen fromthe right.Letme do that a few more times.Andnotice that this gesture only works if Iswipe from right to left.If I try it in the other direction,nothing will happen.Let's take a look at the source code forthis application.Sohere's the application open in the IDE.Now, I'll open the main activity.First of all, this application uses theview flipper class to handle theanimations.Now I won't go into that much here, butfeelfree to study the code, after we finishthe segment.For now, let's focus on how thisapplication detects the fling gesture.So, in on create, you can see that thecode creates a new gesture detector.And in the constructor for this object,thecode passes in a new simple on gesturelistener.And this object defines an on flingmethod.When a GestureDetector detects a flinggesture, this method will be called.And we'llcome back to that, to this method in a fewseconds.Right now, let's look at the OnTouch eventmethod for this activity.This method gets called when a touch eventoccurs.And no view in the activity handles it.When this method is called, it willsimply delegate the call, to the gesturedetector,if the gesture detector eventually decidesthat it has seen a complete fling gesture.The on fling method that I just showed youwill be called.And this on fling method receives aparameter.In this case, it's called velocity x, thattells howfast, and in which direction the swipegesture was performed.In this example, if the swipe was movingfrom right to left, at a speed of

Page 3: 6 - 5 - Touch and Gestures - Part 2 (11-46)

more than ten pixels per second, then thecode invokes a method called switch layoutstate two.Which causes the animation of the textviews to start.If the velocity does not meet thatcriteria, forinstance, if it's a slow drag instead of afling,or if it's traveling in the wrongdirection, left to right,instead of right to left, then the flinggesture is ignored.To recognize more complex gestures, youcan use Android'sGesture Builder application to create andthen save custom gestures.This application comes bundled with theSDK.At runtime, you can use the gesturelibraries class to load your customgestures and to recognize when a userperforms one of those gestures.To make this work, you include aGestureOverlayView in your application.And this view essentially intercepts usergestures.And then, it invokes your application codeto handle those gestures.Here's a screenshot of the gesture builderapplication.As you can see, I've created four customgestures.Next, which is a horizontal swipe, fromleft to right,no, which looks a bit like an, an X thatyou make using a single stroke.Prev, or previous, which is a horizontalswipe from right to left, and yes,which looks like a check mark.On the emulator, GestureBuilder saves yourcustom gestures to a filecalled /mnt/sdcard/gestures.To use these gestures you'll need to copythis file into your applications/res/raw directory.Let'slook at the TouchGestures application.This applicationdisplays a small view with acandidate color for the entireapplications background.The background color for the wholeapplicationis initially set to gray, and the usercan use these four custom gestures thatI showed earlier to interact with thisapplication.For example, if the user performs thenext gesture the background color will

Page 4: 6 - 5 - Touch and Gestures - Part 2 (11-46)

cycle forward.If the userperforms the previous gesture, thebackground color cycles back.If the user performs the yes gesture, theapplicationsets the whole application's background tothe current color.And if the user performs the no gesture,the application's background color isreset to gray.Let's see the running application.So here's my device.NowI'll start up the TouchGesturesapplication.And when it starts up, the application'sbackground is generally gray.But there's a colored square in the middleof the screen.If I swipe the screen from left to right.The color of that square in the middlechanges.And if I do it again, the color changesagain.And I can go back to the previous color,by swiping,this time, from right to left, instead ofleft to right.If I decide that I like the current color,I can perform the yes gesture.Like so.And as you see the whole application nowhas a background of that color,but if I change my mind I can perform theno gesture, like so.And as you can see, the application'sbackground goes back to its initial grey.The color square reappears in the middleof the layout andI can keep this issuing gestures to lookat new candidate colors.Let'stake a look at the source code for thisapplication.Here's the application open in the IDE andnow I'll open the main activity.And you notice that this activityimplements the on gesture performedlistener interface, which means that itprovides an on gesture performed method.In on create, the code gets a reference totheframe layout, which it stores in avariable called m frame.And this is where the candidate backgroundcolors appear.The code also gets a reference to arelativelayout, which it stores in a variable

Page 5: 6 - 5 - Touch and Gestures - Part 2 (11-46)

called m layout.And this is the layout for the entireapplication.Now here's the code that reads thegestures file from the res/ raw directory.Using the gesture libraries from rawresource method.This method returns a gesture libraryobject, and the code thengoes on to call the load method for thegesture library.After that, the code finds the gestureoverlay view.Which is in the layout, and adds thecurrent activity as a listenerfor gestures that are intercepted by thegesture overlay view.When the gesture overlay view detects agesture, it calls the onGesturePerformedmethod, shown here.And this method first calls the recognizemethod, which analyzes the detectedgesture, and then scores each customgesture as to how much the detectedgesture resembles the custom gesturesrecorded in the gesture file.And next the code gets the highest rankedprediction.And then if that prediction has a highenough score, thecode carries out the action that isassociated with that gesture.For example, if the gesture was the yesgesture, then thecode sets the layout's background color tothe current candidate color.[BLANK_AUDIO]So that's all for our lesson onmulti-touch, and gestures.Please join me next time, when we'lldiscuss multimedia.Thanks.