Creating a Viewport in Android

I was writing a simple PacMan like game for Android, and needed to scroll the game area shown as the user moves inside it. In J2ME, you will use LayerManager.setViewWindow to create this kind of Viewport like behaviour. In Android, this can be achieved by using methods in Canvas and View classes.

Here is a simple program demonstrating how to do it –

public class AViewport extends Activity
{

 public void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 setContentView( new PortView( this ) );

 }

 private class PortView extends View
 {
 // the length and width of a single square
 private int tileSide = 50;
 // the number of squares along x-axis and y-axis
 private int numTiles = 15;

 int fieldWidth = numTiles * tileSide;
 int fieldHeight = numTiles * tileSide;

 private int halfViewWidth;
 private int halfViewHeight;
 private int maxTranslateX;
 private int maxTranslateY;

 int viewWidth = 200;
 int viewHeight = 200;

 private int circleX;
 private int circleY;
 private int diameter = 50;

 private ShapeDrawable one;
 private ShapeDrawable two;

 private ShapeDrawable circle;
 Rect rect = new Rect();
 private Paint p;

 public PortView( Context context )
 {
 super( context );
 one = new ShapeDrawable( new RectShape() );
 two = new ShapeDrawable( new RectShape() );
 circle = new ShapeDrawable( new OvalShape() );
 one.getPaint().setColor( 0x88FF8844 );
 two.getPaint().setColor( 0x8844FF88 );
 circle.getPaint().setColor( 0x99000000 );
 p = new Paint();
 setFocusable( true );
 }

 @Override
 protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec )
 {
 int width = Math.min( fieldWidth, MeasureSpec.getSize( widthMeasureSpec ) );
 int height = Math.min( fieldHeight, MeasureSpec.getSize( heightMeasureSpec ) );

 viewWidth = width;
 viewHeight = height;
 halfViewWidth = width/2;
 halfViewHeight = height/2;
 maxTranslateX = fieldWidth - width;
 maxTranslateY = fieldHeight - height;

 setMeasuredDimension( width, height );
 }

/*
 _______________________________________
 | ______________                        |
 ||              |                       |
 ||              |vH                     |
 ||              |                       |
 ||______________|                       |
 |       vW                              |fH
 |       .(x1, y1)         ______________|
 |                        |              |
 |                        |              |
 |<---------------------->|              |
 |     maxTranslateX      |______________|
 |_______________________________________|
 fW

 We start translating once x,y goes past x1 (viewWidth/2),y1 (viewHeight/2).
 Movement along x-axis is x - x1, to the maximum of maxTranslateX (fieldWidth - viewWidth).
 The movement along y-axis is calculated similarly.
*/
 @Override
 protected void onDraw( Canvas canvas )
 {
 super.onDraw( canvas );

 canvas.save();

 if ( circleX > halfViewWidth )
 {
 int translateX = Math.min( circleX - halfViewWidth, maxTranslateX );
 canvas.translate( -translateX, 0 );
 }

 if ( circleY > halfViewHeight )
 {
 int translateY = Math.min( circleY - halfViewHeight, maxTranslateY );
 canvas.translate( 0, -translateY );
 }

 drawBoard( canvas );
 drawCircle( canvas );
 canvas.restore();
 }

 private void drawBoard( Canvas canvas )
 {
 int num = 1;
 boolean useTwo = false;
 for ( int row = 0; row < numTiles; row++ )
 {
 int y = row * tileSide;
 for ( int col = 0; col < numTiles; col++ )
 {
 int x = col * tileSide;
 Drawable d = useTwo ? two : one;
 d.setBounds( x, y, x + tileSide, y + tileSide );
 d.draw( canvas );
 canvas.drawText( "" + num, x + 10 , y + 20, p );
 ++num;
 useTwo = !useTwo;
 }
 }
 }

 private void setRect()
 {
 rect.set( circleX, circleY, circleX + diameter, circleY + diameter );
 }

 private void drawCircle( Canvas canvas )
 {
 setRect();
 circle.setBounds( rect );
 circle.draw( canvas );
 }

 @Override
 public boolean onKeyDown( int keyCode, KeyEvent keyEvent )
 {
 boolean handled = true;
 switch ( keyCode )
 {
 case KeyEvent.KEYCODE_DPAD_DOWN:
 if ( circleY <= fieldHeight - diameter - 5 ) circleY += 5;
 break;
 case KeyEvent.KEYCODE_DPAD_UP:
 if( circleY >= 5) circleY -= 5;
 break;
 case KeyEvent.KEYCODE_DPAD_LEFT:
 if( circleX >= 5 ) circleX -= 5;
 break;
 case KeyEvent.KEYCODE_DPAD_RIGHT:
 if( circleX <= fieldWidth - diameter -5 ) circleX += 5;
 break;
 default: handled = false;
 }
 if ( handled )
 {
 invalidate();
 }
 return handled;
 }
 }
}

See the Android API docs of View.onMeasure() and Canvas.translate() methods to understand the code used to create the Viewport.

Android on Intellij Idea – run activity on emulator

The official Android plugin is only for Eclipse, but thankfully Android provides Ant support for those of us who prefer other IDEs (http://developer.android.com/guide/developing/other-ide.html).

I use Intellij IDEA, and the main problem for me was that, after building the application using the Ant build script created by activitycreator tool, you have to manually reload the application in the emulator.

This is easily fixed by tweaking the generated Ant build file.
Add the following target to the build.xml –

 <!-- Main activity -->
<property name="main-activity" value="MyMainActivity" />

 <!-- Run the main Activity after reinstall -->
 <target name="run" depends="reinstall">
 <echo>Running ${application-package}.${main-activity} on default emulator...</echo>
 <exec executable="${adb}" failonerror="true">
 <arg value="shell" />
 <arg value="am" />
 <arg value="start" />
 <arg value="-a" />
 <arg value="android.intent.action.MAIN" />
 <arg value="-n" />
 <arg value="${application-package}/${application-package}.${main-activity}" />
 </exec>
 </target>

MyMainActivity is, of course, your main activity. Remember to change the build file if you rename or change the main activity.

I also changed the default target to run, and after loading build.xml as an Ant build file in IDEA, I assigned it a shortcut key.
I also made these changes to ANDROID_SDK/tools/lib/build.template, so from now on, when I create a new Android project, it is already set up this way. If you are editing the template file, use –

 <!-- Main activity -->
<property name="main-activity" value="ACTIVITY_NAME" />

This will automatically pick up the class name you specify on the command line when running activitycreator.