Search code examples
javaandroidxmlresponsivegrid-layout

Specifying items in an android grid layout to re-size to fill screen height


I have a GridLayout that has 6 elements (TextView's).

I set the columnCount to 3.

The width of each element, TextView, is 33% as the columnCount is 3. This is exactly how I want it - however, the height of each element TextView does not fill to match the screen (50% height for both the first and second row of elements as there are two rows of 3 elements - a grid of 3x2).

This is the XML:

<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="ddx.project_dnd.MainActivity">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            android:text="Tile1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="Tile2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="Tile3" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="Tile4" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="Tile5" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="Tile6" />

    </GridLayout>
</android.support.constraint.ConstraintLayout>

As seen in the above XML, each of the element TextView's height is set to 100dp. Is there a way using a GridLayout specifically, to expand each of the elements height to 50% via the XML layout? I've tried searching but find mostly answers akin to this resource and this which is programmatically, or am I suffering an XY problem with my choice of Layout?


Solution

  • <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3">
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:layout_rowWeight="1"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            android:text="Tile1" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:layout_rowWeight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="Tile2" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:layout_rowWeight="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="Tile3" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:layout_rowWeight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="Tile4" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:layout_rowWeight="1"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="Tile5" />
    
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_columnWeight="1"
            android:layout_gravity="fill_horizontal"
            android:layout_rowWeight="1"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="Tile6" />
    
    </GridLayout>