Move two side by side textviews to be one under another if text is too long

Question

I have two textviews like this:

=======================
= TextView1 TextView2 =
=======================

And I would like to detect when the

Answer 1

I made a slightly different version of the accepted answer. I did not alter my layout xml in any way and did not use onTextResize() or AutoResizeTextView as that seemed an overkill for my situation. I needed my LinearLayout to switch from Horizontal orientation to Vertical orientation if the device's language setting caused a long string to be used.

Layout

<LinearLayout
    android:id="@+id/customer_care_bottom_layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:layout_marginBottom="@dimen/lmargin_bottom_10">

    <TextView
        android:id="@+id/customer_care_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/CUSTOMER_CARE_TITLE" />

    <TextView
        android:id="@+id/customer_care_number_information"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/CUSTOMER_CARE_INFORMATION"/>
</LinearLayout>

Java

private void setCustomerServiceLayoutOrientationBasedOnTextWidth() {
        TextPaint paint = customer_care_number_text.getPaint();
        TextView tvCustomerCareTitle = (TextView) findViewById(R.id.customer_care_title);
        TextView tvCustomerCareInformation = (TextView) findViewById(R.id.customer_care_information);
        int halfCustomerServiceLayoutWidth = getScreenWidth() / 2;
        boolean isCustomerCareTitleTooLong = paint.measureText(tvCustomerCareTitle.getText().toString()) > customerServiceLayoutWidth;
        boolean isCustomerCareInformationTooLong = paint.measureText(tvCustomerCareInformation.getText().toString) > customerServiceLayoutWidth;

        if (isCustomerCareTitleTooLong || isCustomerCareInformationTooLong) {
            LinearLayout llCustomerCareBottom = (LinearLayout) findViewById(R.id.customer_care_bottom_layout);
            llCustomerCareBottom.setOrientation(LinearLayout.VERTICAL);
        }
    }

private int getScreenWidth() {
    int screenWidth;Display display = getWindowManager().getDefaultDisplay();
    if (Build.VERSION.SDK_INT < 13) {
        screenWidth = display.getWidth();
    } else {
        Point point = new Point();
        display.getSize(point);
        screenWidth = point.x;
    }
    return screenWidth;
}

Answer 2

I have found a better solution. Changed my textviews into autoresizable textviews (more info here)

Also, each textview is in a separate layout, to make sure both textviews are resized to the same value. My xml looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:id="@+id/value_linear_layout"
              android:gravity="center">

    <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content">
        <com.mihaela.view.AutoResizeTextView
            android:id="@+id/my_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content">

        <com.mihaela.view.AutoResizeTextView
            android:id="@+id/my_text_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>

and I have implemented the OnTextResizeListener from AutoResizeTextView to do this:

public class TextWidthResizeListener implements OnTextResizeListener {

    @Override
    public void onTextResize(TextView textView, float oldSize, float newSize) {
        TextPaint paint = textView.getPaint();
        if (paint.measureText(textView.getText().toString()) > (valueLinearLayout.getWidth() / 2)){
            valueLinearLayout.setOrientation(LinearLayout.VERTICAL);
        }
    }
}

where valueLinearLayout is:

valueLinearLayout = (LinearLayout)findViewById(R.id.value_linear_layout);

This solution best fits for me, as the textviews are dimensioned when they are side by side until a minimum size. When the minimum size is reached, and the text still does not fit, the textviews will be aligned one under another.

Also, this idea with the listener can be applied to non-resizable textviews also. I will set this answer as the correct one.

Answer 3

You should use a single, multi-line TextView and set the text as follows :

mTextView.setText(text1+" "+text2);

or

mTextView.setText(text1+"\n"+text2);

depending on your particular needs.

EDIT: you could specify your text in html, and then use Html.fromHtml(htmlString) and display this text in your TextView.

 String text1 ="<font color=\"red\">This is some text!</font>"
 String text2="<font color=\"blue\">This is some other text!</font>"
 textView.setText(Html.fromHtml(text1+ "<br/>"+ text2);