Develop Reference

Android TextView not wrapping content when system wide font scaled larger

In my app I'm trying to adjust this layout so it's readable when the user scales the system wide font size in Android System settings -> Display -> Font size (or in accessibility settings on some devices). Doing some digging I found out this adjusts the device configuration font scale (getResources().getConfiguration.fontScale) from 1.0 to 1.15.
I'm getting some weird behavior in a LinearLayout where one of the TextViews width gets crushed, when it's set to wrap_content, and also doesn't reflect a set minWidth.
What it looks like normally
What it looks like when font is scaled
Here is the LinearLayout in question (comments added for context in screenshot)
<LinearLayout
android:id="#+id/sectionPaintStatus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- () 6 Paint Items -->
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="5dp">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabExpandPaintItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:rotation="180"
android:src="#drawable/ic_collapse"
app:elevation="2dp"
app:fabSize="mini"/>
<TextView
android:id="#+id/tvPaintItemCount"
style="#style/Label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="0 Paint Items"
android:textSize="16sp"/>
<ImageView
android:id="#+id/imgPaintAreaWarning"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_warning2"
android:visibility="invisible"/>
</LinearLayout>
<!-- Inner layout to consume middle width and right align the rest -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layoutPaintItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="#+id/tvPaintItemCountStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Paint Items"
android:textSize="16sp"/>
</LinearLayout>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="30dp"
android:scaleType="centerInside"
android:src="#drawable/ic_time"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.5h"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:minWidth="70dp"
android:gravity="end"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$123.22"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Why is that last LinearLayout containing 2 TextViews not properly wrapping content? I tried removing the minWidth incase that was causing any issues and got the same result. I don't understand why all the other layouts wrap their content properly but the last one doesn't.
And is it possible to add a resource folder for scaled system wide font?
Edit It appears removing margins allow the TextView to wrap the proper width but obviously I need the margins.
Can anyone explain this strange behavior?
Edit Solved
It turns out I completely forgot about an invisible element in the layout between the "Paint Items" label and the time icon. It was causing me to run out of horizontal space.

You appear to have used layout_width="match_parent" and gravity="end" to align your elements.
I assume on small devices (or with large text) you'd like the "0 Paint Items" to ellipsize when not enough space, and have the 'Time' and 'Total' fields to show at full width.
To do this, we make the following changes:
First, make the sectionPaintItemToggle have 0dp width and layout_weight="1" - this tells Android "this should fill as much space is available".
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
... >
I removed all the gravity="end" settings.
I changed the "inner layout" (as per the comment) to be have wrap_content width.
I deleted the entire layoutPaintItemCount layout - I feel like you were trying a different way to do the "N paint items" layout.
In the end, we have something like this (I swapped in an ImageView for the FAB and just used resources I already had - I think I changed some margins too):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/sectionPaintStatus"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
>
<!-- () 6 Paint Items -->
<LinearLayout
android:id="#+id/sectionPaintItemToggle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingBottom="5dp">
<ImageView
android:id="#+id/fabExpandPaintItems"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="5dp"
android:rotation="180"
android:src="#drawable/ic_edit_black_24dp"/>
<TextView
android:id="#+id/tvPaintItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="0 Paint Items"
android:textSize="16sp"/>
<ImageView
android:id="#+id/imgPaintAreaWarning"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_black_24dp"
android:visibility="invisible"/>
</LinearLayout>
<!-- Inner layout to consume middle width and right align the rest -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="centerInside"
android:src="#drawable/ic_edit_black_24dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2.5h"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textSize="16sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/tvPaintTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$123.22"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
android:textSize="16sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
The key part was to convince Android that the "N Paint Items" view was the one you wanted to shrink.

GridView fill column widths

Consider the following:
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingStart="15dp"
android:paddingEnd="15dp">
<TextView
android:id="#+id/tv_Progress_Level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/White"
android:layout_row="0"
android:layout_column="0"
android:text="#string/Progress"
android:textStyle="bold" />
<ProgressBar
android:id="#+id/pb_Assignment_Progress"
style="#android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="1"
android:paddingStart="10dp"
android:paddingTop="3dp"/>
</GridLayout>
In the above GridLayout, my ProgressBar has been set to 50% for the sake of width testing.
However, with the above setup, this is the result:
The bar is clearly NOT on the 50% mark.
Yes this is because I've used fill parent that actually takes up the space from the start of grid till the end of it.
I have tried using wrap_content on the bar, but it seems a lot shorter:
Is there a way I can fill up the remaining space of the grid?
Isn't fill_parent suppose to mean to fill up the remaining space? Guess I was wrong. It is actually a deprecated version of match_parent
I don't want the bar to possess the width of the grid, instead I want it to just fill up the remaining space after the TextView

Solved it:
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingEnd="15dp"
android:paddingStart="15dp"
android:paddingTop="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_Progress_Level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Progress"
android:textColor="#color/white"
android:textStyle="bold" />
<ProgressBar
android:id="#+id/pb_Assignment_Progress"
style="#android:style/Widget.Holo.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</GridLayout>
Happy coding!!

As simple as changing the following:
android:layout_width="fill_parent"
TO
android:layout_width="0dp"
and add the following:
android:layout_gravity="fill"

Make 2 TextViews have the same height

I have 2 TextView one on top of the other. When they have the same text they have the same height but when one has more text from the other he will get bigger.
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:paddingLeft="8dp"
android:paddingTop="12dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Math, Civics"
android:id="#+id/teaches"
android:layout_weight="1"
android:background="#A4D34A" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Computer Science"
android:id="#+id/learns"
android:layout_weight="1"
android:background="#D22ACE" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="5$/hour"
android:id="#+id/rate" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginRight="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Start Chat"
android:id="#+id/textView9"
android:layout_marginRight="8dp"
android:textStyle="italic"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
How can I make them stay in the same height no matter what?

You have a couple of options: You can provide equal weights to the two textviews
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
OR You can use give fixed heights to both views.
OR You can set MaxLines(Maximmum lines) attribute for the text view to be of a particular value.

Define a fixed value for yout layout_height like 24dp or something best in an dimens.xml like that:
<dimen name="textview_height">24dp</dimen>
and in your layout put both layout_height to :
#dimen/textview_height
Another option would be to set the first to set both to wrap_content and get the MeasuredHeight from both of them, then take the greater value and apply it to both TextViews

Aligning in Relatively Layouts

I have this layout inside of a RelativeLayout:
<LinearLayout
android:id="#+id/llWatchItemCommentButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/myMasterCat_Item"
style="#style/DropShadowEffect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="99"
android:shadowColor="#ffffff"
android:text="Item"
android:textColor="#515b61"
android:textSize="22sp" />
<ImageView
android:id="#+id/bFollowComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/featured_button_selector"
android:padding="5dp"
android:src="#drawable/comment" />
</LinearLayout>
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />
Essentially, if that TextView in the Layout becomes two lines, it will overlap with the TextView positioned below theLinearLayout`.
Is there an attribute perhaps that could correct this? As in, I want the bottom TextView to be below the entire LinearLayout at all times, even if it begins to grow. Right now, the position appears fixed.

Have you tried the following:
<TextView
android:id="#+id/myMastCat_Cat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/llWatchItemCommentButton" //add this line in
android:layout_alignBottom="#+id/llWatchItemCommentButton"
android:layout_alignLeft="#+id/llWatchItemCommentButton"
android:layout_marginLeft="10dp"
android:text="MasterCat"
android:textColor="#666"
android:textSize="16sp" />

Android Listview Row Layout

I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.

The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.

you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>