CODEWITHSUNDEEP
androidandroid-layout
Imz
Imz

Reputation: 33

How can I stop GridLayout overflowing

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 http://imadsayed.com/GridLayout_Overflowing.html or here; GridLayout Overflow on Nexus One(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:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center">

    <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"
        >

        <!-- tl -->
        <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"
            />
    </GridLayout>
</LinearLayout>

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.

Upvotes: 0

Views: 1254

Answers (2)

Imz
Imz

Reputation: 33

I found the solution. In the end i have set the GridLayout to have 3 rows and 1 column. and its width and parent widths to match_parent. The LinearLayout on each row and its children have widths set to wrap_content. The ImageViews themselves are the children of those LinearLayouts and the key part of the solution is that their layout_weight is equal to "0.3". No need for gravity or anything else. layout_weight="0.3" and the ImageViews are given 1/3rd of the screen size and the GridLayout and it's parents widths set to match_parent.

Upvotes: 1

Joopkins
Joopkins

Reputation: 1644

If you set the gridlayout's width to match_parent and ensure its parent view's widths are match_parent, the view should not extend beyond the bounds of the screen.

Upvotes: 0

Related Questions