Android last word of a line can cause incorrect textview dimension if using a right margin

Question

I have a strange behaviour when using bold text in an textview.

So the problem is as follows, I have created a custom item which holds text and is supposed to be used as an item later on in a list, so the item is contained several times in a scrollviews linearlayout, which has vertical orientation.

the item layout is as follows

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    style="@style/ButtonItem">
    <TextView
        android:id="@+id/m_oItem_TextView_TopLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_12" />
    <TextView
        android:id="@+id/m_oItem_TextView_TopMiddle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/m_oItem_TextView_TopLeft"
        android:layout_toRightOf="@+id/m_oItem_TextView_TopLeft"
        android:layout_toLeftOf="@+id/m_oItem_TextView_TopRight"
        android:layout_marginRight="20dp"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_12"
        android:gravity="right"/>
    <TextView
        android:id="@+id/m_oItem_TextView_TopRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="40dp"
        android:layout_alignTop="@+id/m_oItem_TextView_TopLeft"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_12"/>
    <TextView
        android:id="@+id/m_oItem_TextView_Bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/m_oItem_TextView_TopLeft"
        android:layout_alignRight="@+id/m_oItem_TextView_TopRight"
        android:layout_below="@+id/m_oItem_TextView_TopLeft"
        android:layout_marginTop="5dp"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_14" />
    <ImageView 
        android:id="@+id/m_oItem_PlaceHolder"
        android:layout_width="wrap_content"
        android:layout_height="10dp"
        android:layout_alignLeft="@+id/m_oItem_TextView_TopLeft"
        android:layout_alignRight="@+id/m_oItem_TextView_TopRight"
        android:layout_below="@+id/m_oItem_TextView_Bottom"
        android:contentDescription="@string/image_description"/>
    <ImageView
        android:id="@+id/m_oPart_Arrow_Image"
        android:scaleType="fitCenter"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true" 
        android:layout_marginRight="5dp"
        android:src="@drawable/arrow_right"
        android:contentDescription="@string/image_description"/>
</RelativeLayout>

the m_oItem_TextView_Bottom textview is the part that will contain text that may be too long for it, thus increasing the height of the textview if needed. As I tested this, all was working correct and the textview had the needed height.

however once I set

android:textStyle="bold"

the text will of course become wider, thus may need more lines. The problem now is that this will not be accounted by android somehow.

e.g. if the non bold line barely requires two lines like (last item in the image below)

the bold text will require three lines, but the textview will still only provide two lines

Did anyone ever run into the same problem or has a solution or at least a suggestion how I could resolve the issue. Thanks in advance in any case

EDIT: as requested the ButtonItem style is this

<style name="ButtonItem">
    <item name="android:background">@drawable/button_item</item>
</style>

@drawable/button_item being:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"  android:drawable="@drawable/button_item_down" />
    <item android:state_selected="true"  android:drawable="@drawable/button_item_selected" />
    <item android:drawable="@drawable/button_item_normal" />
</selector>

@drawable/button_item_down being:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke
                android:width="@dimen/button_item_stroke_thickness"
                android:color="@color/black"/>
        </shape>
    </item>
</layer-list>

@drawable/button_item_selected being:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke
                android:width="@dimen/button_item_stroke_thickness"
                android:color="@color/black"/>
        </shape>
    </item>
</layer-list>

@drawable/button_item_normal being:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle" >
            <solid android:color="@color/transparent" />
            <stroke
                android:width="@dimen/button_item_stroke_thickness"
                android:color="@color/black" />
        </shape>
    </item>
</layer-list>

essentially they are just there to create the black line beneath the item and make the background white if it is clicked or selected. although the selected on is never used since the selected state is never set in code anyway.

I also tried it without the style as the background, but as expected the issue remained the same.

EDIT AGAIN: Okay so I was able to track down the problem some more, the resizing of the textview is actually correct. the concrete problem is if following. If the last word of a line (e.g "this is a test" while test being the last word) causes a line break, the last word needs to be long enough somehow. I testes this using dummy strings, with the same item used in the question.

here are some pics

As you can see the line that causes the issue needs one more character then the word is long enough to fit in.

LAST EDIT: okay found the answer (see below)

Answer 1

FINALLY I TRACKED DOWN THE ISSUE,

So here is the solution, the problem was the margin_Right of the m_oItem_TextViewBottom which was caused by:

android:layout_alignRight="@+id/m_oItem_TextView_TopRight"

thus it effectivly created a margin right which was the troublemaker, I tested this with other textviews and right margins and they all had the same issue.

I replaced it with a Padding of the same margin and ended up with this as my final solution for the item.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    style="@style/ButtonItem">
    <TextView
        android:id="@+id/m_oItem_TextView_TopLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_12" />
    <TextView
        android:id="@+id/m_oItem_TextView_TopMiddle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/m_oItem_TextView_TopLeft"
        android:layout_toRightOf="@+id/m_oItem_TextView_TopLeft"
        android:layout_toLeftOf="@+id/m_oItem_TextView_TopRight"
        android:layout_marginRight="20dp"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_12"
        android:gravity="right"/>
    <TextView
        android:id="@+id/m_oItem_TextView_TopRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingRight="40dp"
        android:layout_alignTop="@+id/m_oItem_TextView_TopLeft"
        android:textColor="@color/black"
        android:textSize="@dimen/font_size_12"/>
    <TextView
        android:id="@+id/m_oItem_TextView_Bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/m_oItem_TextView_TopLeft"
        android:layout_below="@+id/m_oItem_TextView_TopLeft"
        android:layout_marginTop="5dp"
        android:paddingRight="40dp"
        android:textColor="@color/black"
        android:textStyle="bold" />
    <ImageView 
        android:id="@+id/m_oItem_PlaceHolder"
        android:layout_width="wrap_content"
        android:layout_height="10dp"
        android:layout_alignLeft="@+id/m_oItem_TextView_TopLeft"
        android:layout_alignRight="@+id/m_oItem_TextView_TopRight"
        android:layout_below="@+id/m_oItem_TextView_Bottom"
        android:contentDescription="@string/image_description"/>
    <ImageView
        android:id="@+id/m_oPart_Arrow_Image"
        android:scaleType="fitCenter"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true" 
        android:layout_marginRight="5dp"
        android:src="@drawable/arrow_right"
        android:contentDescription="@string/image_description"/>
</RelativeLayout>

Answer 2

Well the TextView is being re sized just fine with the bold text so its the RelativeLayout that needs to expand to fit the expanded TextView. You might have more luck using LinearLayouts (One Vertical and perhaps another one Horizontal to match the design you created using the RelativeLayout) because they are good at re sizing themselves when their children change.

Reference: http://logc.at/2011/10/18/when-to-use-linearlayout-vs-relativelayout/