CS260 Intro to Java & Android 09.AndroidAdvUI (Part...

CS260 Intro to Java & Android09.AndroidAdvUI (Part I)

Winter 2020

Winter 2020 CS260 - Intro to Java & Android 1

Creating TicTacToe for Android

We are going to begin to use everything we’ve learned thus far to produce the shell of an Android TicTacToe game

Winter 2020 CS260 - Intro to Java & Android 2

TicTacToe for AndroidStep #1

Create Initial App

Create TicTacToeAndroid using the default settings for an Android project

Delete the Hello World textView widget

Winter 2020 CS260 - Intro to Java & Android 3

TicTacToe for AndroidStep #1

Create Initial App

Winter 2020 CS260 - Intro to Java & Android 4

• Create main screen withcolors of your choice. Changethe action bar color also.

• There are three different colorson the screen

TicTacToe for AndroidStep #2

Add an Array Resource

Create a string array in strings.xml where the string-array name is gameDifficulty and the items are Easy, Medium, Hard

<resources>

<string name="app_name">TicTacToe V1.0</string>

<string name="sNewGame">New Game</string>

<string name="sAbout">About</string>

<string-array name="aGameDifficulty">

<item>Easy</item>

<item>Medium</item>

<item>Hard</item>

</string-array>

</resources>

Winter 2020 CS260 - Intro to Java & Android 5

TicTacToe for AndroidStep #3

Add a Menu

Add a menu folder inside of the res folder

Add the following menu.xml file to the menu folder

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

<menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto">

<item

android:id="@+id/menuAbout"

android:orderInCategory="0"

app:showAsAction="never"

android:title="@string/sAbout"/>

<item

android:id="@+id/menuSettings"

android:orderInCategory="1"

app:showAsAction="never"

android:title="Settings"/>

</menu>

Winter 2020 CS260 - Intro to Java & Android 6

TicTacToe for AndroidStep #4

Add a Menu

• After onCreate, add the following method

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.menu, menu);

return true;

}

Winter 2020 CS260 - Intro to Java & Android 7

Menu Results

• You should see the menu in the upper right

Winter 2020 CS260 - Intro to Java & Android 8

TicTacToe for AndroidStep #5

Handle Menu Selection

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

// Handle item selectionswitch (item.getItemId()) {case R.id.menuAbout:Log.d ("onOptionsItemSelected", "About");return true;

case R.id.menuSettings:Log.d ("onOptionsItemSelected", "Settings");return true;

default:return super.onOptionsItemSelected (item);

}}

Winter 2020 CS260 - Intro to Java & Android 9

Menu Results

01-16 20:19:21.311 6675-6675/edu.pacificu.cs.tictactoeas353 D/onOptionsItemSelected: About

Winter 2020 CS260 - Intro to Java & Android 10

TicTacToe for AndroidStep #6

Game Start

• There are any number of ways to start the game:

– Put in some Buttons

– Use an AlertDialog that asks for difficulty level and then calls start game

– Simply start the game right away

Winter 2020 CS260 - Intro to Java & Android 11

Graphics

We will explore still graphics and then graphic animation

Android provides libraries to perform 2D and 3D graphics

android.graphics provides low-level graphics drawing tools such as

canvases

color filters

points

rectangles

Winter 2020 CS260 - Intro to Java & Android 12

Android colors

Represented with four 8-bit numbers (ARGB)

alpha - measures transparency where 0 is completely transparent and 255 is completely opaque

red

green

blue

int color = Color.BLACK;int color = Color.argb (127, 0, 255, 255);

Winter 2020 CS260 - Intro to Java & Android 13

Paint

The Paint class holds information about

style and color

how to draw geometries, text, and bitmaps

Before drawing a color, it is common to set the color with the method setColor (Color.BLUE); which is part of the Paint class

Winter 2020 CS260 - Intro to Java & Android 14

Canvas

The canvas is a surface to draw on

Android framework APIs provide 2D drawing APIs to:

a) render your own graphics on a canvas - need to call onDraw () method passing a Canvas

b) modify (customizing) existing Views - draw graphics or animations into an existing View

a) is best for simple graphics with no animation

b) is best for video games with complex animation and frequent redraws

Winter 2020 CS260 - Intro to Java & Android 15

Basic Display

An Activity provides the UI for the display screen

An Activity hosts a View

A View hosts a Canvas

The onDraw () method can be overridden to perform custom drawing on the Canvas

Winter 2020 CS260 - Intro to Java & Android 16

Custom View (Step #1)Create TicTacToeView.java

import android.graphics.Canvas;

import android.graphics.drawable.ShapeDrawable;

import android.graphics.drawable.shapes.OvalShape;

import android.view.View;

import android.content.Context;

public class TicTacToeView extends View

{

private ShapeDrawable mDrawable;

public TicTacToeView (Context context)

{

super (context);

int x = 10, y = 10, width = 300, height = 50;

mDrawable = new ShapeDrawable (new OvalShape ());

mDrawable.getPaint ().setColor (getResources ().getColor (R.color.cGreen));

mDrawable.setBounds (x, y, x + width, y + height);

}

protected void onDraw (Canvas canvas)

{

mDrawable.draw (canvas);

}

}

Winter 2020 CS260 - Intro to Java & Android 17

Drawing Custom ViewStep #2

public class MainActivity extends AppCompatActivity

{

int mGameDifficultyLevel = 0;

TicTacToeView mTicTacToeView;

@Override

protected void onCreate (Bundle savedInstanceState)

{

super.onCreate (savedInstanceState);

// setContentView (R.layout.activity_main);

mTicTacToeView = new TicTacToeView (this);

setContentView (mTicTacToeView);

}

Winter 2020 CS260 - Intro to Java & Android 18

TicTacToe for AndroidStep #4

Winter 2020 CS260 - Intro to Java & Android 19

CustomView Modifications

You can do any kind of drawing in the onDraw of a custom view.

The following slides allow you to draw the lines of a TicTacToe board

See if you can get this to work

Winter 2020 CS260 - Intro to Java & Android 20

Let's Create TicTacToe ScreenIssues

Sometimes the IDE doesn't seem to recognize what needs to be imported. Here are the imports

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.Log;

import android.view.View;

import android.content.Context;

Winter 2020 CS260 - Intro to Java & Android 21

Let's Create TicTacToe ScreenStep #1

TicTacToeView is to have the following instance variables:

private Paint mBackground = new Paint ();

private Paint mDarkLines = new Paint();

private final int NUMBER_OP_RECTANGLES = 3;

private int mRectangleHeight;

private int mRectangleWidth;

Winter 2020 CS260 - Intro to Java & Android 22

Let's Create TicTacToe ScreenStep #2

TicTacToeView constructor is to look like:

public TicTacToeView (Context context)

{

super (context);

Log.d ("TicTacToeView", "Constructor Call");

}

Winter 2020 CS260 - Intro to Java & Android 23

Let's Create TicTacToe ScreenStep #3

Complete onDraw calculating mRectangleHeight, mRectangleWidth and vertical line draw

@Override

protected void onDraw (Canvas canvas)

{

mBackground.setColor (getResources ().getColor (R.color.cSteelblue));

mDarkLines.setColor (Color.BLACK);

canvas.drawRect (0, 0, getWidth (), getHeight (), mBackground);

// mRectangleHeight = // mRectangleWidth =

mDarkLines.setColor (Color.BLACK);

for (int i = 0; i < NUMBER_OP_RECTANGLES; i++)

{

// Draw Horizontal Line

canvas.drawLine (0, i * mRectangleHeight, getWidth(),

i * mRectangleHeight, mDarkLines);

// Draw Vertical Line

}

}

Winter 2020 CS260 - Intro to Java & Android 24

Result

Winter 2020 CS260 - Intro to Java & Android 25