Reputation: 643
Prevent Layout from overflowing past screen size
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>
Upvotes: 1
Views: 1189
Answers (3)
Reputation: 11
I solved the problem of TextView oversizing this way:
- Set the android:layout_gravity="fill_horizontal" for the TextView
- Add this code to your activity or fragment:
@Override
protected void onStart() {
super.onStart();
int w = tv.getWidth();
tv.setMaxWidth( w );
}
Upvotes: 1
Reputation: 119
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>
Upvotes: 1
Reputation: 643
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>
Upvotes: 1
Related Questions
- Fragment not filling up entire screen/parent layout Android
- Android Fragment layout is out of screen
- Android fragment screens overlap
- Fragment content gets cut off
- Android: Relative layout content goes below screen
- Layout overflow components
- Prevent views from overflowing
- android LinearLayout larger than screen height
- How to stop layout from taking all width
- android overflow views in layout