How to control views wrapping in Android's GridLayout?

Question

I'm wondering why in portrait mode, this android xml is not rendered properly:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:orientation="horizontal"
    android:columnCount="5">
    <Switch
        android:id="@+id/Switch1"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_row="0"
        android:text="Use only WiFi when sending data?"
        android:layout_marginBottom="10dp"
        android:layout_columnWeight="5"
        android:layout_gravity="fill_horizontal"
        android:layout_width="wrap_content" />
    <TextView
        android:id="@+id/TextView1"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Вкупно собрани податоци: "
        android:layout_columnWeight="2"
        android:maxHeight="60dp"
        android:layout_gravity="fill_horizontal"
        android:scrollHorizontally="false"
        android:layout_width="wrap_content"
         />
    <TextView
        android:id="@+id/TextView2"
        android:layout_column="2"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Empty Space 1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:layout_width="wrap_content" />
    <TextView
        android:id="@+id/TextView3"
        android:layout_column="3"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Empty Space 1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:layout_width="wrap_content" />
    <TextView
        android:id="@+id/TextView4"
        android:layout_column="4"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Empty Space 1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:layout_width="wrap_content" />
</GridLayout>

It should look like this:

|--1--|--2--|--3--|--4--|--5--|
|      fills all columns      |
|-----------|-----|-----|-----|
|     2     |  1  |  1  |  1  |
|-----------|-----|-----|-----|

I find it strange that this is working good in landscape mode, until I insert more text in the Switch or Text Views, so probably the problem is because the content is not wrapping, but as you can see I tried to set layout_width to `wrap_content', still it doesn't work... so what else is missing..?

*By the way I'm using Xamarin, but I don't believe it is Xamarin's designer problem, because in runtime I get the same layout that I see in the designer..

Grace Feng Grace Feng · Accepted Answer · 2017-05-29T06:37:13

I think problem is that your text of the first TextView is too long. If you want the text to wrap when the length of the content increases, usually we can specify width of the view as 0dp (android:layout_width="0dp"), so that the grid layout will dynamically calculate the width.

I found that android:layout_columnWeight="5" of your Switch will effect the layout of the TextViews in the second row. Changed your code like following and it works by my side:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:orientation="horizontal"
    android:columnCount="5">
    <Switch
        android:id="@+id/Switch1"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_row="0"
        android:text="Use only WiFi when sending data?"
        android:layout_marginBottom="10dp"
        android:layout_gravity="fill_horizontal"
        android:layout_width="wrap_content" />
    <TextView
        android:id="@+id/TextView1"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Вкупно собрани податоци: "
        android:layout_columnWeight="2"
        android:maxHeight="60dp"
        android:layout_gravity="fill_horizontal"
        android:layout_width="0dp" />
    <TextView
        android:id="@+id/TextView2"
        android:layout_column="2"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Empty Space 1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:layout_width="0dp" />
    <TextView
        android:id="@+id/TextView3"
        android:layout_column="3"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Empty Space 1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:layout_width="0dp" />
    <TextView
        android:id="@+id/TextView4"
        android:layout_column="4"
        android:layout_row="1"
        android:padding="5dp"
        android:text="Empty Space 1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill_horizontal"
        android:layout_width="0dp" />
</GridLayout>

How to control views wrapping in Android's GridLayout?

2 Answers