Exploring 2D Graphics: The Sudoku Example Content taken from book: “Hello, Android” by Ed...

Exploring 2D Graphics:The Sudoku Example

Content taken from book:“Hello, Android” by Ed Burnette

Third Edition

Two-dimensional graphics

• Android provides a complete native two-dimensional graphics library in its android.graphics package.

• Android colors are represented with four numbers, one each for alpha, red, green, and blue (ARGB).

Colors

• Each component of the ARGB can have 256 possible values, or 8 bits, so a color is typically packed into a 32-bit integer.

• Alpha is a measure of transparency. The lowest value, 0, indicates the color is completely transparent.

• Values in the middle are used for translucent, or semitransparent, colors.

Color specification

int color = Color.BLUE; // solid blue

// Translucent purplecolor = Color.argb(127, 255, 0, 255);

<?xml version="1.0" encoding="utf-8"?><resources><color name="mycolor">#7fff00ff</color></resources>

color = getResources().getColor(R.color.mycolor);

Paint

• The Paint class holds the style, color, and other information needed to draw any graphics including bitmaps, text, and geometric shapes.

• cPaint.setColor(Color.LTGRAY);

Canvas

• The Canvas class represents a surface on which you draw.

• Initially canvases start off devoid of any content, like blank transparencies for an overhead projector.

• Methods on the Canvas class let you draw lines, rectangles, circles, or other arbitrary graphics on the surface.

Example activity called Graphics

• The display screen is taken up by an Activity, which hosts a View, which in turn hosts a Canvas.

• You get an opportunity to draw on that canvas by overriding the View.onDraw( ) method.

Path

• The Path class holds a set of vector-drawing commands such as lines, rectangles, and curves.

Drawable

• A Drawable class is used for a visual element like a bitmap or solid color that is intended for display only.

• You can combine drawables with other graphics, or you can use them in user interface widgets (for example, as the background for a button or view).

Drawable Forms (1)

• Bitmap: A PNG or JPEG image.• NinePatch: A stretchable PNG image, so

named because originally it divided the image into nine sections. These are used for the

• background of resizable bitmap buttons.• Shape: Vector-drawing commands, based on

Path.

Drawable Forms (2)

• Layers: A container for child drawables that draw on top of each other in a certain order.

• States: A container that shows one of its child drawables based on its state (a bit mask). One use is to set various selection and focus states for buttons.

• Levels: A container that shows only one of its child drawables based on its level (a range of integers). This could be used for a battery or signal strength gauge.

Drawable Forms (3)

• Scale: A container for one child drawable that modifies its size based on the current level. One use might be a zoomable picture viewer.

• Drawables are often defined in XML

A gradient background defined in XML

Adding Graphics to Sudoku

• Starting the Game• Modify Sudoku.java

private void startGame(int i) {Log.d(TAG, "clicked on " + i);Intent intent = new Intent(this, Game.class);intent.putExtra(Game.KEY_DIFFICULTY, i);startActivity(intent);}

Game.java

Modify Manifest and String files

• AndroidManifest.xml

• res/values/strings.xml

PuzzleView class

Drawing the Board

• Res/values/colors.xml

• PuzzleView.java

Draw the board

Drawing the Numbers

Handling Input

• Android phones come in many shapes and sizes and have a variety of input methods.

• They might have a keyboard, a D-pad, a touch screen, a trackball, or some combination of these.

• A good Android program, therefore, needs to be ready to support whatever input hardware is available, just like it needs to be ready to support any screen resolution.

Defining and Updating the Selection

• This code shows the player which tile is currently selected

• We use the selection rectangle calculated earlier in onSizeChanged( ) to draw an alpha-blended color on top of the selected tile

Mofify PuzzleView.java

• Move the selection by overriding the onKey-Down( ) method@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {Log.d(TAG, "onKeyDown: keycode=" + keyCode + ", event="+ event);switch (keyCode) {case KeyEvent.KEYCODE_DPAD_UP:select(selX, selY - 1);break;case KeyEvent.KEYCODE_DPAD_DOWN:select(selX, selY + 1);break;case KeyEvent.KEYCODE_DPAD_LEFT:select(selX - 1, selY);break;case KeyEvent.KEYCODE_DPAD_RIGHT:select(selX + 1, selY);break;default:return super.onKeyDown(keyCode, event);}return true;}

directional pad (D-pad)

• you use the invalidate( ) method to mark rectangles as dirty.

• The window manager will combine all the dirty rectangles at some point in the future and call onDraw( ) again for you.

• The dirty rectangles become the clip region, so screen updates are optimized to only those areas that change.

Entering Numbers

• To handle keyboard input, we just add a few more cases to the onKey-Down( ) method for the numbers 0 through 9 (0 or space means erase the number).

D-pad

a call to setSelectedTile( ) to changethe number on a tile

Adding Hints

Hints

• There are three states for zero, one, and two possible moves.

• If there are zero moves, that means the player has done something wrong and needs to backtrack.

Animation

• PuzzleView.java• This loads and runs a resource called

R.anim.shake, defined in res/anim/• shake.xml, that shakes the screen for 1,000

milliseconds (1 second) by 10 pixels from side to side.

cycle_7.xml

Keypad

• The keypad is handy for phones that don’t have keyboards.

• It displays a grid of the numbers 1 through 9 in an activity that appears on top of the puzzle.

• The whole purpose of the keypad dialog box is to return a number selected by the player.

Creating the Keypad

UI layout from res/layout/keypad.xml

Keypad class

findViews in Keypad.java

setListeners() in Keypad.java

onKeyDown() in Keypad.java

isValid and returnResult() in Keypad.java

Game.Java

Implementing the Game Logic

• In Game.java