Building the Touch Example

To demonstrate multi-touch, we're going to build a simple image viewer application that lets you zoom in and scroll around an image. The finished product is shown in Figure 11.2, on the following page.

Begin by creating a new "Hello, Android" project with the following parameters in the New Android Project dialog box:

Project name: Touch Build Target: Android 2.2 Application name: Touch Package name: org.example.touch Create Activity: Touch Min SDK Version: 8

This will create to contain your main activity. Let's edit it to show a sample image, put in a touch listener, and add a few imports we'll need later:

Download Touchv1/src/org/example/touch/

package org.example.touch;




import android.os.Bundle;

import android.util.FloatMath;

import android.util.Log;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.widget.ImageView;

public class Touch extends Activity implements OnTouchListener { private static final String TAG = "Touch"; @Override public void onCreate(Bundle savedlnstanceState) { super.onCreate(savedlnstanceState); setContentView(R.layout.main);

ImageView view = (ImageView) findViewByld(; view.setOnTouchListener(this);

@Override public boolean onTouch(View v, MotionEvent event) { // Handle touch events here...

We'll fill out that onTouch( ) method in a moment. First we need to define the layout for our activity:

Download Touchv1/res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="" android:layout_width= "fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/imageView" android:layout_width= "fill_parent" android:layout_height="fill_parent" android:src="@drawable/butterfly" android:scaleType="matrix"> </ImageView>


The entire interface is a big ImageView control that covers the whole screen. The android:src="@drawable/butterfly" value refers to the butterfly image used in the example. You can use any JPG or PNG format image you like; just put it in the res/drawable-nodpi directory. The android:scaleType="matrix" attribute indicates we're going to use a matrix to control the position and scale of the image. More on that later.

The AndroidManifest.xml file is untouched except for the addition of the android:theme= attribute:

Download Touchv1/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="" package="org.example.touch" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label ="@string/app_name"

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> <activity android:name= ".Touch"

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>

<uses-sdk android:minSdkVersion="3" android:targetSdkVersion="8" /> </manifest>

@android:style/Theme.NoTitleBar.Fullscreen, as the name suggests, tells Android to use the entire screen with no title bar or status bar at the top. You can run the application now, and it will simply display the picture.

0 0

Post a comment