Expanding TextView with screen size up to maxWidth

Question

This issue relates to expanding elements with screen width, but only up to a maxWidth.

My scenario involves a vertically oriented LinearLayout containing a fixed sequence of rows. Each of those rows is a horizontal LinearLayout containing some EditText elements, separated by TextView elements. The TextView elements' text contains a mathematical symbol (e.g. + or - or /) and are meant to indicate that the contents of second box will be added to (or subtracted from, etc) the first box, for display elsewhere in the UI.

The EditText elements must stay their current fixed width, but I want the TextView elements (acting like separators) to expand in width if the screen will allow it, but only up to a maxWidth of 30dp. Currently the layout for one example row looks like:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/row_side_padding"
    android:paddingRight="@dimen/row_side_padding"
    android:paddingTop="5dp"
    android:paddingBottom="5dp">

    <EditText
        android:id="@+id/editTextBoxOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/box_one_hint"
        android:imeOptions="actionDone"
        android:inputType="numberSigned"
        android:maxLines="1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/plus" />

    <EditText
        android:id="@+id/editTextBoxTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/box_two_hint"
        android:imeOptions="actionDone"
        android:inputType="numberSigned"
        android:maxLines="1" />
</LinearLayout>

This current code wraps the width of the TextView to the width of the text (just a plus symbol in this example). This is exactly what I want on small screens!

However, on wider screens it would be nice if the TextView grew wider to space out the elements a bit. I am able to expand the TextView by setting it as:

<TextView
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="@string/plus" />

But this makes the TextView too large. I want it to expand to a maximum of 30dp, if the screen width allows it. But from what I understand, android:maxWidth does not work with android:layout_width="match_parent" so any maxWidth is just ignored.

So how can I expand my TextView based on screen width, but only up to a maximum width, while leaving my EditText elements the same size?

Answer 1

For those who are tackling the same problem...

It didn't seem as if there was a way to do this. Instead, the best route to go is to create some standalone layout files that are associated with certain screen widths (i.e. are in res/layout-w600dp as well as one in res/layout itself to catch the smallest screen widths). I specified a single TextView in my layout_plus.xml file:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:gravity="center"
    android:text="@string/plus" >
</TextView>

For each of these screen-width dependent layouts I used a different amount of paddingLeft and paddingRight, to manually perform the expansion of space around the TextView. You could change the TextView's width if you wanted.

Then in your main layout, remove the TextView you were attempting to expand and use the tag. This will allow your screen width dependent files to be dragged in automatically - whichever one is appropriate. My include looked like this:

<include
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     layout="@layout/layout_plus"/>

The documentation states that you should override the layout_width and layout_height attributes.

I wanted to override other attributes too, such as override the text to contain a minus instead of a plus (allowing me even more re-use). Unfortunately, include does not let you override other attributes, so I had to create a set of layout_minus.xml layouts for this purpose.

As an alternative to using with modified layouts, there is the option of simply creating screen width dependent versions of the string resource displayed by the TextView, into which you can insert spaces for the larger width versions. This would require less changes, and probably less new files, but hardcoding spaces inside strings makes it harder to tweak and tune later on.

Answer 2

Set android:layout_width to 0dip...it will help the TextView to take the space which are available after EditTexts size.

<TextView
    android:layout_width="0dip"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="@string/plus" />