title: How can I stop GridLayout overflowing
body: <p>I am developing my first android app. It is a replica of the game tictactoe. The back end of the app works perfectly. The UI also works perfectly. My problem is with the display of the UI. The app consists of 9 squares in a 3x3 formation. When a square is selected it will be replaced by the current player square (drawable). I have been testing it using the Nexus 5 emulator. I am happy with everything. As a final test I ran the app using the Nexus one emulator and the 3x3 grid was not correct. Initially I tried displaying the 3x3 grid in a LinearLayout using XML layout code of toRightOf, toLeftOf, below, above, alignBaseline, alignTop etc to have the grid sit correctly. When opening this in the Nexus one emulator the squares were overlapping (I assume the size of the squares is too big) but looks fine in the Nexus 5 emulator. I changed the layout to GridLayout which fixed the overlapping but the grid now overflows of the screen. You can see the UI of my app at <a href="http://imadsayed.com/GridLayout_Overflowing.html" rel="nofollow">http://imadsayed.com/GridLayout_Overflowing.html</a> or here;
  <a href="http://i.stack.imgur.com/1qoK5.png" rel="nofollow">GridLayout Overflow on Nexus One</a>(The emulator on the left is of a Nexus 5 where the UI is correct and the emulator on the right is of a Nexus One which shows the overflow, you may need to scroll down to see).
  Through other suggestions found online Ive tried putting each row of the GridLayout in a LinearLayout and aligning them in a 1x3 GridLayout. This produces the Grid not overflowing but the last column of the Grid has smaller squares than the first two Columns. So I undone this and am now sitting with an overflowing Grid. The code looks like this:</p>
  
  <pre><code>&lt;LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_gravity="center"&gt;
  
      &lt;GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:rowCount="3"
          android:columnCount="3"
          &gt;
  
          &lt;!-- tl --&gt;
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/tl"
              android:src="@drawable/square"
              android:layout_row="0"
              android:layout_column="0"
              android:layout_rowWeight="1"
              android:contentDescription="@null"
              /&gt;
      &lt;/GridLayout&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>I only pasted one square above (ImageView), there are 9 of them in my code but all the same except for the row and column numbers. The comment "tl" is for topLeft. It is the top left square. The whole GridLayout is within a LinearLayout so that I can centre the Grid on the screen as seen in the Nexus 5 emulator. 
  So how can I create the UI so that if it overflows then it can re-adjust the Grid and its children (the squares) so they all fit within the screen? Similar posts only talk about two columns in a GridLayout and usually one of them has text so not relevant.</p>