CODEWITHSUNDEEP
javaandroidlayoutgrid-layout
arujbansal
arujbansal

Reputation: 117

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>

Upvotes: 1

Views: 2000

Answers (3)

Mosfeq Anik
Mosfeq Anik

Reputation: 99

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>

`

Upvotes: 1

prashant17
prashant17

Reputation: 1550

Add app:layout_gravity="center" to each ImageView 

 <?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/ic_launcher_background"
        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:layout_gravity="center"
            app:srcCompat="@drawable/ic_android" />

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

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

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

Upvotes: 0

Mohamed Mohaideen AH
Mohamed Mohaideen AH

Reputation: 2545

You can acieve the desired output without using GridLayout. You can done using ContraintLayout only.

Try this

<?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.constraint.ConstraintLayout
    android:id="@+id/constraintLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toStartOf="@+id/imageView3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView1"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toStartOf="@+id/imageView5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView1"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toStartOf="@+id/imageView6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView4"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toBottomOf="@+id/imageView3"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView8"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView4"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView9"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView7"
        app:layout_constraintTop_toBottomOf="@+id/imageView5"
        app:srcCompat="@drawable/ic_home_black_24dp" />

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/imageView8"
        app:layout_constraintTop_toBottomOf="@+id/imageView6"
        app:srcCompat="@drawable/ic_home_black_24dp" />


</android.support.constraint.ConstraintLayout>

Upvotes: 1

Related Questions