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

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

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

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

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

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

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

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

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

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

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

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

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

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

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