Android - Gestures Tutorial

Android provides special types of touch screen events such as pinch , double tap, scrolls , long presses and flinch. These are all known as gestures.
Android provides GestureDetector class to receive motion events and tell us that these events correspond to gestures or not. To use it , you need to create an object of GestureDetector and then extend another class withGestureDetector.SimpleOnGestureListener to act as a listener and override some methods. Its syntax is given below −
GestureDetector myG;
myG = new GestureDetector(this,new Gesture());
   
   class Gesture extends GestureDetector.SimpleOnGestureListener{
      public boolean onSingleTapUp(MotionEvent ev) {
   }
   
   public void onLongPress(MotionEvent ev) {
   }
   
   public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
   float distanceY) {
   }
   
   public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
   }
}
}

Handling Pinch Gesture

Android provides ScaleGestureDetector class to handle gestures like pinch e.t.c. In order to use it, you need to instantiate an object of this class. Its syntax is as follow −
ScaleGestureDetector SGD;
SGD = new ScaleGestureDetector(this,new ScaleListener());
The first parameter is the context and the second parameter is the event listener. We have to define the event listener and override a functionOnTouchEvent to make it working. Its syntax is given below −
public boolean onTouchEvent(MotionEvent ev) {
   SGD.onTouchEvent(ev);
   return true;
}

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
   @Override
   public boolean onScale(ScaleGestureDetector detector) {
      float scale = detector.getScaleFactor();
      return true;
   }
}
Apart from the pinch gestures , there are other methods available that notify more about touch events. They are listed below −
Sr.NoMethod & description
1getEventTime()
This method get the event time of the current event being processed..
2getFocusX()
This method get the X coordinate of the current gesture's focal point.
3getFocusY()
This method get the Y coordinate of the current gesture's focal point.
4getTimeDelta()
This method return the time difference in milliseconds between the previous accepted scaling event and the current scaling event.
5isInProgress()
This method returns true if a scale gesture is in progress..
6onTouchEvent(MotionEvent event)
This method accepts MotionEvents and dispatches events when appropriate.

Example

Here is an example demonstrating the use of ScaleGestureDetector class. It creates a basic application that allows you to zoom in and out through pinch.
To experiment with this example , you can run this on an actual device or in an emulator with touch screen enabled.
StepsDescription
1You will use Android studio to create an Android application under a package com.example.sairamkrishna.myapplication;. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2Modify src/MainActivity.java file to add necessary code.
3Modify the res/layout/activity_main to add respective XML components
4Run the application and choose a running android device and install the application on it and verify the results
Following is the content of the modified main activity filesrc/MainActivity.java.
package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.content.Intent;
import android.content.IntentFilter;

import android.graphics.Bitmap;
import android.graphics.Matrix;

import android.os.BatteryManager;
import android.os.Bundle;

import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;

import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Set;

public class MainActivity extends Activity {
   private ImageView iv;
   private Matrix matrix = new Matrix();
   private float scale = 1f;
   private ScaleGestureDetector SGD;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      iv=(ImageView)findViewById(R.id.imageView);
      SGD = new ScaleGestureDetector(this,new ScaleListener());
   }
   
   public boolean onTouchEvent(MotionEvent ev) {
      SGD.onTouchEvent(ev);
      return true;
   }
   
   private class ScaleListener extends ScaleGestureDetector.
   
   SimpleOnScaleGestureListener {
      @Override
      public boolean onScale(ScaleGestureDetector detector) {
         scale *= detector.getScaleFactor();
         scale = Math.max(0.1f, Math.min(scale, 5.0f));
         
         matrix.setScale(scale, scale);
         iv.setImageMatrix(matrix);
         return true;
      }
   }
   
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return true;
   }
   
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      
      int id = item.getItemId();
      
      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
         return true;
      }
      return super.onOptionsItemSelected(item);
   }
}
Following is the modified content of the xml res/layout/activity_main.xml.
<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" android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" >
   
   <TextView android:text="Gestures  Example" android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textview"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorials point"
      android:id="@+id/textView"
      android:layout_below="@+id/textview"
      android:layout_centerHorizontal="true"
      android:textColor="#ff7aff24"
      android:textSize="35dp" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:scaleType="matrix"
      android:layout_below="@+id/textView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true" />
      
</RelativeLayout>
Following is the content of the res/values/string.xml.
<resources>
   <string name="app_name>My Application</string>
   <string name="hello_world">Hello world!</string>
   <string name="action_settings">Settings</string>
</resources>
Following is the content of AndroidManifest.xml file.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.gestures"
   android:versionCode="1"
   android:versionName="1.0" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.sairamkrishna.myapplicationMainActivity"
         android:label="@string/app_name" >
         
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
   
   </application>
</manifest>
Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from Android studio, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Before starting your application, Android studio will display following window to select an option where you want to run your Android application.
Choose Device
Select your mobile device as an option and then check your mobile device which will display your default screen −
Android Gestures Tutorial
Now just place two fingers over android screen , and separate them a part and you will see that the android image is zooming. It is shown in the image below −
Android Gestures Tutorial
Now again place two fingers over android screen, and try to close them and you will see that the android image is now shrinking. It is shown in the image below −
Android Gestures Tutorial

Comments

Post a Comment

Popular posts from this blog

Android - TextureView Tutorial

Image
If you want to display a live video stream or any content stream such as video or an OpenGL scene, you can use TextureView provided by android in order to do that. In order to use TextureView, all you need to do is get its SurfaceTexture.The SurfaceTexture can then be used to render content. In order to do this, you just need to do instantiate an object of this class and implement SurfaceTextureListener interface. Its syntax is given below: private TextureView myTexture ; public class MainActivity extends Activity implements SurfaceTextureListener { protected void onCreate ( Bundle savedInstanceState ) { myTexture = new TextureView ( this ); myTexture . setSurfaceTextureListener ( this ); setContentView ( myTexture ); } } After that, what you need to do is to override its methods. The methods are listed as follows − @Override public void onSurfaceTextureAvailable ( SurfaceTexture arg0 , int arg1 , int arg2 ) { } @Override
Read more

Android - JetPlayer Tutorial

Image
The Android platform includes a JET engine that lets you add interactive playback of JET audio content in your applications. Android provides JetPlayer class to handle this stuff. In order to Jet Content , you need to use the JetCreator tool that comes with AndroidSDK. The usage of jetCreator has been discussed in the example. In order to play the content created by JetCreator, you need JetPlayer class supported by android. In order to use JetPlayer , you need to instantiate an object of JetPlayer class. Its syntax is given below − JetPlayer jetPlayer = JetPlayer.getJetPlayer(); The next thing you need to do is to call loadJetFile method and pass in the path of your Jet file. After that you have to add this into the Queue of JetPlayer. Its syntax is given below − jetPlayer . loadJetFile ( "/sdcard/level1.jet" ); byte segmentId = 0 ; // queue segment 5, repeat once, use General MIDI, transpose by -1 octave jetPlayer . queueJetSegment ( 5 , - 1 , 1 , - 1 , 0
Read more

Android - Notifications

Image
A  notification  is a message you can display to the user outside of your application's normal UI. When you tell the system to issue a notification, it first appears as an icon in the notification area. To see the details of the notification, the user opens the notification drawer. Both the notification area and the notification drawer are system-controlled areas that the user can view at any time. Android  Toast  class provides a handy way to show users alerts but problem is that these alerts are not persistent which means alert flashes on the screen for a few seconds and then disappears. To see the details of the notification, you will have to select the icon which will display notification drawer having detail about the notification. While working with emulator with virtual device, you will have to click and drag down the status bar to expand it which will give you detail as follows. This will be just  64 dp  tall and called normal view. Above expanded form can have
Read more