1. Creation of an Android App By Keith Lynn
Field Trip #18
Creation of an Android App
By Keith Lynn

2. The Manifest File
When a new Android Project is created, a xml document is created
This document specifies attributes of the project
If your project needs to use the Internet, you will have to give permission in the manifest
Also if you use various libraries like OpenGL, you can specify the version you're using in the manifest

3. Activities Each Android App consists of an Activity
An Activity defines what your App does
In the Main Activity of the project, you decide what the application will look like
This involves defining the content
In order to define the content, we set a content View
The View will contain all of the components in the app, and is the interface to the user

4. Views A View is the basic user component.
View is the superclass of all views.
There are simple views like TextView that will display text and ImageView that will display images
There are also groups of views like RelativeLayout and LinearLayout that allow us to place multiple components in the view

5. Creating Views To create a View, we have to specify its context
The context of the View is typically the main activity
Every view that is created is part of a context

6. Widgets
Widgets are components like buttons that can be added to a view
We can also add a TextView to display text or an EditText that allows an app to receive information
Other widgets are ImageViews and Spinners
In order to create our own widget, we can subclass View or one of its subclasses

7. Listeners
When we place components on a View, there are times we would like to respond to events such as clicking a button or touching the screen
In order to detect and act on these events, we need to create an instance of a listener and attach it to the component
A typical Listener is onTouchListener
This is an interface found in the View class
If we implement the onTouchListener, we must implement the method onTouch

8. Images Images are file like jpg and gif that we can place on an App
In order to place the image on the app, we create an ImageView
To add the image to our app, we drag the image to one of the drawable folders in the project
A special id is then created for that image and store in R.java
We then create an instance of a Drawable object using that id

9. Images, cont'd
For example, if our image is called test.jpg, we drag it into one of the drawable folders
The id created for the image is then R.drawable.test (Note we can't have two images with the same name even if they have different extensions)
We then create the Drawable object with getResources().getDrawable(R.drawable.test)
We place it in the ImageView with the method setImageDrawable

10. Sounds We can also include sounds like wav files in our App
In order to use a sound file, we create a folder called raw in the res folder in the project
We then drag the sound file to raw
An id will be created in R.java
We create an instance of a MediaPlayer by calling the method create(Context,R.raw.test) where test the name of the sound file
Then we can call the start method

11. Tic Tac Toe
As a demonstration of an app, let's consider a simple Tic Tac Toe game
In order to create this game, we will create a 3x3 grid and allow users to click in that grid and display alternating letters x and o
The game is over when one row, column, or diagonal is filled with one symbol

12. Creating the Board
We will create the board by using a special view called a RelativeLayout
The RelativeLayout allows us to place components on the App and then specify where those components should be placed relative to other components
We can define the size of our components by creating an instance of RelativeLayout.LayoutParams and specifying width and height

13. Defining the characters
We will use images to indicate characters
We will drag images of x and o into a drawable folder
We then create a special variable called currentCharacter that will refer initially to the image of x
When then user touches the grid, the current character will be displayed in the position indicated
Then currentCharacter will alternate

14. Event Handling
In order to determine which row and column was selected, we add a special value called a tag to the ImageView
When we handle the event, we will retrieve the tag and this determines which row and column was selected
This allows us to then display the character on the row and column

15. Determining who won
To determine who won, we examine each row, column and diagonal
If any row, column, or diagonal contain all of the same character, that character wins
We then display a message on the screen
To prevent characters from being displayed on the grid after the game is over, we create a boolean
We only allow a character to be placed on the grid if the boolean is not true