Expanding TextView with screen size up to maxWidth - android

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?

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" />

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.

Related

Is there a way to omit layout_height in order to have two views have identical heights?

I wish to accomplish having the height of a view conform the the height of the another view, in other words have them exactly the same. I've tried using constraintview, but this requires omitting layout_height in order for it to work.
The following gives me a crash and requires layout_height:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/img"
android:id="#+id/bg"
android:adjustViewBounds="true"
android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="#+id/dateText" app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:gravity="center_vertical"
android:text="Test text"
android:layout_width="wrap_content"
android:id="#+id/textView"
android:textColor="#color/bluetext"
app:layout_constraintBottom_toBottomOf="#+id/bg"
app:layout_constraintStart_toStartOf="#+id/leftGuideline"
app:layout_constraintTop_toTopOf="#+id/bg"/>
Is there a simple way to make the heights exactly the same without using a fixed height for both views?
Add android:layout_height="0dp" (a.k.a., "match constraint"), to say that you want the height to be determined by the top and bottom constraints that you have set up.
Note that you may need to adjust the android:gravity attribute of your TextView to your liking. The TextView itself will take up the desired height, but the text may be smaller (or larger, if it has lots of lines).

Decrease Button and LinearLayout with drawable as background

I have a horizontal LinearLayout with 9 buttons in it. The LinearLayout has a background
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="9"
android:minHeight="0dp"//Also tried this
android:background="#drawable/llbackground">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:minHeight="0dp"//tried this too
android:textSize="23sp"
android:gravity="center_vertical|center_horizontal"
android:layout_gravity="center" />
In code I give the user the opportunity to decrease the buttons textsize.
But the button itsself and the LinearLayout do not decrease with the textsize. How can I achieve this?
Let me paraphrase your question. So you want to let the user select a text size and the text size of the button will change but the size of the button doesn't. Am I right?
If that's your problem, you should not set the height to "wrap_content". "wrap_content" basically means that the height will change with the content. i.e. When the size of the content (text) decreases, the height will decrease as much as the content does and vice versa.
Thus, you should set the height attribute to a constant. e.g. 60dp:
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:textSize="23sp"
android:gravity="center_vertical|center_horizontal"
android:layout_gravity="center" />
See the change?
Also, xml comments are denoted with <!--comment--> instead of //
Main thing your orientation is horizontal so it should be width that should be wrap_content
Remove android:layout_weight="1" , android:minHeight="0dp" (I think you want width here) , android:layout_gravity="center" you can give padding around text

How can I maximize the space my control occupies while maintaining horizontal order?

I have the following linear layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/SearchBox">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Search: "
android:id="#+id/SearchText"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_le="#+id/SearchBox"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:id="#+id/SearchButton"/>
</LinearLayout>
As you can see, the EditText is between the view and the button. Is there any property I can set that makes the edit text fill the space between the other two controls? (Which have a fixed size, based on their static content).
Setting the Edit Text's layout width to "Fill_parent" pushes off the button (since there's no more room in the parent).
Ideally, I guess the thing to do would be to add the edit text last, specify that it should be between the other two controls, and then set it to fill width.
But I'm not sure how to do that. Any help?
use property android:weight='1' on the EditText once you have fixed the widths of the other views

Textview that stays as narrow as possible, but grows to wrap content

edited to clarify:
I have a TextView that defaults to 150dp in width, full height. I'm populating it with a string that varies in length. Sometimes the string is short enough that it doesn't fill up the given size of TextView, but other times it's larger than the default size. If the text won't fit in the textbox, I want the width of the box to grow to accommodate it, but I'd like it to default to be 150dp wide. Any suggestions?
<TextView
android:id="#+id/address"
android:layout_width="150dp"
android:layout_height="fill_parent"
android:layout_above="#+id/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:minWidth="150dp"
android:textColor="#color/white"
android:textSize="18sp" />
This creates a textbox that cannot be resized to fit overlong text.
Changing the width to
android:layout_width="wrap_content"
just tries to create a textbox wide enough for the whole message.
The message is generally between 75 and 150 characters.
To sum up: i'm trying to create a textbox that is either 150 dp wide, or just wide enough to fit the entire message, whichever is greater.
Place the Textview inside a layout with a fixed width.
<RelativeLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_above="#+id/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<TextView
android:id="#+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="18sp" />
</RelativeLayout>
This will make the textview take the width upto the layout width or less. If it is more length then it will take a new line.
Use android:gravity="center" for the layout, if neccesary to make the textview be in the center.
Hope you were looking out for this.

How to center a text vertically in a narrow textview in Android?

I have a TextView which has a height of 30px and a textsize of 40px. Since the text is taller than the View, I only want to display the middle part of the text.Like this:
But with android:gravity="center_vertical", I only can display the upper part of the text with some bottom part cut off.
And this is my code:
<TextView
android:layout_width="wrap_content"
android:layout_height="30px"
android:textSize="40px"
android:text="ABCDEFG"
android:gravity="center_vertical"
/>
Anyone knows of any way to do that? Thanks!
Can't you simply wrap it in a LinearView set to the appropriate size and adjust the margin within the textview to about half (depending on padding) the font size?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#android:color/white">
<TextView
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:text="Sliced in half"
android:textSize="60dp"
android:layout_marginTop="-30dp"/>
</LinearLayout>
Resulting in:
http://i.stack.imgur.com/jEdxx.png
I highly doubt whether you can do that. All the options that I have come across while dealing with TextView are for when the Text is smaller than the View. This is the first question that I have come across which has the requirement otherwise.
One option which I had used before was android:scrollHorizontally="true" where in you specify whether the text is allowed to be wider than the View.
Interesting question. It would be great if you could add some code though.

Categories

Resources