Grid Layout
The grid is composed of a set of infinitely thin lines that separate the viewing area into cells. Throughout the API, grid lines are referenced by grid indices. A grid with N columns has N + 1 grid indices that run from 0 through N inclusive. Regardless of how GridLayout is configured, grid index 0 is fixed to the leading edge of the container and grid index N is fixed to its trailing edge (after padding is taken into account).

The number of rows and columns within the grid can be declared using the android:rowCount and android:columnCount properties. Typically, however, if the number of columns is declared the GridLayout will infer the number of rows based on the number of occupied cells making the use of the rowCount property unnecessary.

Similarly, the orientation of the GridLayout may optionally be defined via the android:orientation property. The following example XML declares a 2 x 2 GridLayout configuration in horizontal orientation:

  <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/GridLayout1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:columnCount="2"
      android:rowCount="2"
      android:orientation="horizontal">
  </GridLayout>

Child views can be added to a GridLayout by declaring the elements within the <GridLayout> structure in the XML file. If no row and column values are declared for a child it is positioned automatically by the GridLayout class based on the configuration of the layout and the position of the view in the XML file.
A view can be placed within a specific cell by specifying the intersecting row and column number of the destination cell. The following Button view will be placed in the cell and row 1, column 2 of the parent GridLayout:

  <Button
       android:id="@+id/button"
       android:layout_column="2"
       android:layout_row="1"
       android:text="Button" />

More info : https://developer.android.com/reference/android/widget/GridLayout.html

X & 0 GAME
Download the next 3 image and add them in your new project in the res/drawable folder (copy - paste) or create your own models:
(back.png, zero.png and x.png)

For this lab do not use the design from xml, use only the text !
Understand the code, at the end of the lab, the assistant will ask you questions !

Ex 1 Make a new project, and using the next xml, positionate another 8 image in the grid layout (in the empty spaces), following the next example:
Attention ! [ImageView] The tag value and the index from the id shoud be the same !
Change the column, row, marginLeft and marginRight value (if necessary).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <GridLayout
      android:id="@+id/gridLayout"
      android:layout_width="match_parent"
      android:layout_height="360dp"
      android:background="@drawable/back"
      android:columnCount="3"
      android:rowCount="3">
      
      <ImageView
          android:id="@+id/imageView0"
          android:tag="0"
          android:layout_width="90dp"
          android:layout_height="90dp"
          android:layout_marginLeft="20dp"
          android:layout_marginTop="10dp"
          android:layout_column="0"
          android:layout_row="0"
          android:onClick="dropIn"/>
          
  </GridLayout>
</RelativeLayout>

Ex 2 We can see that anything can be a button. In our case, ImageView is a button, and then an image is clicked, dropIn method is called. Let's implement the method in our main java class
Copy these variable in the MainActivity class (under the class declaration, not in the onCreate method)

  // 0 = x, 1 = o
  int activePlayer = 0;
  boolean gameIsActive = true;
  // 2 unplayed
  int[] gameState = {2, 2, 2, 2, 2, 2, 2, 2, 2};
  int[][] winningPositions = {{0,1,2}, {3,4,5}, {6,7,8}, {0,3,6}, {1,4,7}, {2,5,8}, {0,4,8}, {2,4,6}};

Copy the function in your main class and insert your code only where the TODO is

public void dropIn(View view) {
   ImageView counter = (ImageView) view;
   // get the current Image View (counter tag)
   int tappedCounter = Integer.parseInt(counter.getTag().toString());
   
   //if the space is empty(is 2) and the game is not over
   if (gameState[tappedCounter] == 2 && gameIsActive) {
          //set the current player
          gameState[tappedCounter] = activePlayer;
          if (activePlayer == 0) {
              // setImageResource for counter as x
              // TODO
              // change the player's turn
              activePlayer = 1;
          } else {
              // setImageResource for counter as zero
              // TODO
              activePlayer = 0;
          }
          for (int[] winningPosition : winningPositions) {
              if (gameState[winningPosition[0]] == gameState[winningPosition[1]] &&
                      gameState[winningPosition[1]] == gameState[winningPosition[2]] &&
                      gameState[winningPosition[0]] != 2) {
                  // Someone has won!
                  gameIsActive = false;
                  String winner = "Player1 -> 0";
                  
                  if (gameState[winningPosition[0]] == 0) {
                      winner = "Player2 -> x";
                  }
                  // Make a toast with the messaje winner + " has won!"
                  //TODO            
              } else {
                  boolean gameIsOver = true;
                  
                  for (int counterState : gameState) {
                      if (counterState == 2)
                          gameIsOver = false;
                  }
                  if (gameIsOver) {
                  // Make a toast with the messaje "It's a draw!"
                  //TODO  
                  }
              }
          }
   }
}

Ex 3 In the xml file, in the relative layout, add a linear layout (layout_width=“wrap_content”, layout_height=“wrap_content”, visibility=“invisible”, orientation=“vertical”, center it vertical and horizontal and add a padding (can be 20 dp). Change its color (NOT WHITE).
In the LinearLayout add a TextView and a Button (both with width and height “wrap_content” and with layout_gravity= “center_horizontal” ). Add for the TextView and the Button a proper id.

Ex 4 Instead of the toasts that you've done to show the result, set the text from TextView with the message from the toast.
Make the LinearLayout visible.

Ex 5 When the button from the Linear Layout is pressed, call the “playAgain” function.
Create a method named “playAgain” in the main class. Reset the gameState, the gameIsActive and the activePlayer variables.
Make the linear layout invisible.
Go through all the GridLayout children and set their image resource 0.

 for (int i = 0; i< gridLayout.getChildCount(); i++) { 
    ((ImageView) gridLayout.getChildAt(i)).setImageResource(0)
 }

Ex 6 Make a login page for the game like in the last lab.

BONUS (only if you've done the exercises)
1. Change the colors and the background images as you like.

REFS:
http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources
https://developer.android.com/reference/android/widget/GridLayout.html