Prevent Layout from overflowing past screen size

Question

I have a GridLayout in a fragment with 3 columns and 2 rows. The text length in the first cell varies. I have the TextView inside the first cell set to maxLines=1 and ellipsize=end.

My problem is that whenever the text reaches a certain length, the second cell adjacent to it overflows past the screen. I was under the assumption that setting the GridLayout layout_width=match_parent would keep the grid within the screen size, and the TextView in cell 1 would shrink - keeping cell 2 inside the screen.

My goal is to keep cell2 visible and have cell1 centered & filling the remaining area.

I tried the solution suggested here: https://stackoverflow.com/a/34099239/6368401 which recommends:

You need to use fill layout_gravity and set an arbitrary layout_width or width on the long TextView in need of ellipsizing.

android:layout_gravity="fill" android:layout_width="1dp"

i have also tried playing with android:layout_weight and android:layout_gravity="fill_horizontal" . At this point having the text centered is optional (not preferred) as long as cell2 remains visible. A 50% width for both cells will not work, as cell2 will never be more than 4 characters and usually 2-3 characters.

The following shows a visual representation of the layout:

-------------------------
|     cell1     |       |
----------------| cell2 |
| cell3 | cell4 |       |
-------------------------

cell1 is set to columnspan=2. cell2 is set to rowspan=2. All cells are a TextView.

This is my XML inside the Fragment:

<GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:rowCount="2">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_columnSpan="2">

            <TextView
                android:id="@+id/main_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="16dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="16dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:visibility="visible"
                android:maxLines="1"
                android:ellipsize="end"
                android:singleLine="true"/>

            <TextView
                android:id="@+id/data"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="16dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:visibility="gone"
                android:textColor="@android:color/holo_green_light"/>

        </LinearLayout>


        <TextView
            android:id="@+id/percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textStyle="bold"
            android:layout_rowSpan="2"/>


        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="16dp"
            android:textAppearance="?android:attr/textAppearanceMedium"/>


        <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textAppearance="?android:attr/textAppearanceMedium"/>


    </GridLayout>

Dmitry Akishin · Answer 1 · 2017-10-04T20:00:14.540

Sometimes setting android:layout_width="match_parent" and android:layout_weight="1" for the view, that occupies the entire screen width and moves the other view from the screen, can do the trick. So try doing that for the LinearLayout that contains cell1, cell3, cell4.

You can also use LinearLayout instead of GridLayout (you can set views' gravity values as suits you best):

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <!-- Cell 1. --> 
        <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />

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

            <!-- Cell 3. -->
            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content" />

            <!-- Cell 4. -->
            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content" />

        </LinearLayout>

    </LinearLayout>

    <!-- Cell 2. -->
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Thank you so much for your time and suggestion. I tried what you recommended but it did not work. However, I did find a solution, which I posted as my answer. I tried to up-vote you, but it seems I do not have enough reputation points to do so. — Heriberto Lugo, Oct 04 '17 at 17:49
@HeribertoLugo Glad you solved your problem! By the way, is there a reason you use GridLayout instead of just LinearLayout? It would be much easier that way. — Dmitry Akishin, Oct 04 '17 at 18:27
The reason I used the GridLayout was because after doing some searching, it seemed like the only way to achieve having the rows and columns with rowspans and column spans. This fragment is a list item in a listview, not sure if that matters. — Heriberto Lugo, Oct 04 '17 at 19:13
@HeribertoLugo Ok, but just in case, I edited my answer with an outline of how you could do it with LinearLayout. — Dmitry Akishin, Oct 04 '17 at 20:10
Thanks for your help and new code. I'm sure it will help someone along the way. — Heriberto Lugo, Oct 04 '17 at 21:20

score 1 · Accepted Answer · answered Oct 04 '17 at 17:52

Trying various combinations, with layout_width, layout_gravity and gravity I stumbled upon a combination which worked for me.

This is the XML which produced the layout i was searching for:

<GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="3"
        android:rowCount="2">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="1dp"
            android:layout_height="wrap_content"
            android:layout_gravity="fill"
            android:layout_columnSpan="2"
            android:layout_weight="0">

            <TextView
                android:id="@+id/main_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="16dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="16dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:visibility="visible"
                android:maxLines="1"
                android:ellipsize="end"
                android:layout_weight="1"
                android:gravity="center"/>

            <TextView
                android:id="@+id/data"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="16dp"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:visibility="gone"
                android:maxLines="1"
                android:ellipsize="end"
                android:layout_weight="1"
                android:gravity="center"
                android:textColor="@android:color/holo_green_light"/>

        </LinearLayout>


        <TextView
            android:id="@+id/percent"
            android:layout_width="30dp"
            android:minEms="3"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textStyle="bold"
            android:layout_rowSpan="2"
            android:gravity="right"
            android:layout_marginLeft="16dp"/>


        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="16dp"
            android:textAppearance="?android:attr/textAppearanceMedium"/>


        <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textAppearance="?android:attr/textAppearanceMedium"/>


    </GridLayout>

Prevent Layout from overflowing past screen size

2 Answers2