Search code examples
javaandroidlayoutgrid-layout

GridLayout Constraints not working

I have made a gridLayout with column and row counts set to 3 each. When I copy and paste the code for X (I am going to make tic tac toe) it overflows and does not change rows whereas in the emulator it shows it in the next row.

Android Studio image showing the problem

What should I do to make it show in the design page?

The XML code is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="368dp"
        android:layout_height="368dp"
        android:layout_margin="8dp"
        android:background="@drawable/board"
        app:columnCount=" 3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rowCount=" 3">


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height=" 100dp"
            android:layout_margin=" 8dp"
            app:srcCompat="@drawable/x" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="100dp"
            android:layout_height=" 100dp"
            android:layout_margin=" 8dp"
            app:srcCompat="@drawable/x" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="100dp"
            android:layout_height=" 100dp"
            android:layout_margin=" 8dp"
            app:srcCompat="@drawable/x" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="100dp"
            android:layout_height=" 100dp"
            android:layout_margin=" 8dp"
            app:srcCompat="@drawable/x" />
    </android.support.v7.widget.GridLayout>
</android.support.constraint.ConstraintLayout>
Solution

  • use margins to keep the GridLayout to center GridLayout margin reference from google android deveelopers

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout           
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="368dp"
    android:layout_height="368dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/board"
    app:columnCount=" 3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:rowCount=" 3">


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height=" 100dp"
        android:layout_margin=" 8dp"
        app:srcCompat="@drawable/x" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height=" 100dp"
        android:layout_margin=" 8dp"
        app:srcCompat="@drawable/x" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height=" 100dp"
        android:layout_margin=" 8dp"
        app:srcCompat="@drawable/x" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="100dp"
        android:layout_height=" 100dp"
        android:layout_margin=" 8dp"
        app:srcCompat="@drawable/x" />
</GridLayout>

    `