Develop Reference

Android - Move textView if it doesn't fit

I have 3 TextViews inside a linearLayout (horizontal), and when the last textview is too big or there is no space for it, it is matching parent and looking like the image below:
Image Here
What I want is to, IF the textview reaches the linearlayout's width, then, the textview should be moved below "Property" textView. (next line)
Take a look at how it should be:
Image here
That's a snippet of my XML:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="Property"
android:id="#+id/txtPropertyType" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="/ 127 m"
android:id="#+id/txtArea"
android:layout_marginLeft="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="/ 3 roomsssssssssdddd"
android:singleLine="false"
android:id="#+id/txtNumRoom"
android:layout_marginLeft="5dp" />
</LinearLayout>
Thanks in advance x)

Modify your xml and add another TextView below the LinearLayout:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="Property"
android:id="#+id/txtPropertyType" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="/ 127 m"
android:id="#+id/txtArea"
android:layout_marginLeft="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="/ 3 roomsssssssssdddd"
android:singleLine="false"
android:id="#+id/txtNumRoom"
android:layout_marginLeft="5dp" />
</LinearLayout>
<TextView
android:visibility="gone"
android:layout_below="#+id/linearLayout"
android:id="#+id/long_room"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="dfgdfdfgddfgdfgdd"/>
Now, you have 2 options:
OPTION 1: Check the length of the room number textview. If it's more than, say, 12 (you have to find the number considering all letters to be widest ones - like w), then make the visibility of txtNumRoom GONE and that of long_room visible.
OPTION 2: Find the height of the txtNumRoom before it gets rendered and displayed. If this height is greater than height of txtArea, that means the textview has gone multiple-lines. Again, in that case,make the visibility of txtNumRoom GONE and that of long_room visible.
Refer to this question to know how to find height of a textview programmatically before it gets rendered.

Just add android:singleLine="true" on each text view. Your problem here is that your TextView is spreading on more than one line.

Since August 2020, there is the option to use a ConstraintLayout with the virtual layout Flow.
Your elements should be wrapped in a ConstraintLayout together with a Flow element like in the following sample XML:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="Property"
android:id="#+id/txtPropertyType"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="/ 127 m"
android:id="#+id/txtArea"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearance"
android:text="/ 3 roomssssssssssssssssssssss"
android:singleLine="false"
android:id="#+id/txtNumRoom"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="txtPropertyType, txtArea, txtNumRoom"
app:flow_horizontalGap="4dp"
app:flow_horizontalStyle="packed"
app:flow_horizontalBias="0.0"
app:flow_wrapMode="chain"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/flow"
app:layout_constraintStart_toStartOf="parent"
android:textAppearance="?android:attr/textAppearance"
android:text="$2000.000"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The elements that are involved in the wrapping (all elements in the line that must wrap if too big) must have ids which are then added in the app:constraint_referenced_ids tag of Flow.
app:flow_horizontalStyle="packed" and app:flow_horizontalBias="0.0" are necessary to left-align your text (flow_horizontalBias won't work unless elements are packed), but can be changed depending on the layout you want to achieve.
app:flow_wrapMode tells the flow-layout how to position elements, and must be set to either chain or aligned, once again chain was necessary to be able to left-align the text.
It is also important to set the height of the Flow element to 0dp so it can determine how much space it needs by itself.
The TextView below should be constrained to the Flow element so that it can be positioned dynamically depending on the position of the elements inside.
Screenshot of the layout with small text
Screenshot of the layout with overflowing text

Android Layout: How to keep right-most text element and ellipsize left-most text element as it grows?

I have a LinearLayout which contains two TextViews. Let the first TextView's text be "short text" and the 2nd TextView's text be "(s)".
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text"/>
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
I want the LinearLayout to appear to the user thus:
[[short text][(s)]____________]
where ____ means empty view.
Now if I put a slightly longer string into the first TextView, I want to see this:
[[slightly longer text][(s)]__]
and if I put a much longer string into the first TextView, I want to see this:
[[really long ...ng text][(s)]]
But I can't seem to find a way to keep the first TextView from crowding out the second TextView altogether, like so:
[[really long lo... long text]]
How do I get the behavior I am looking for?

The base of the answer to your question is this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text" />
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
BUT... bare in mind that I changed the width of your LinearLayout from:
android:layout_width="0dp"
android:layout_weight="1"
to
android:layout_width="wrap_content"
and that's a really important part of the answer.
The code I presented works like this:
[[short text][(s)]]
[[slightly longer text][(s)]]
[[really long ...ng text][(s)]]
It manages the ellipsizing correctly, but cannot introduce the "empty view" (____). If I didn't change the LinearLayout's layout_width, the ellipsizing would work correctly ((s) wouldn't be pushed off the screen), but the text alignment wouldn`t be correct. It would look like this:
[[short text ][(s)]]
[[slightly longer text ][(s)]]
[[really long ...ng text][(s)]]
So if the "empty view" is a need for you, you will need to implement it (for example) with nesting your LinearLayout inside another one (and this time "empty view" is gonna be an actual View). Like so:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/variable-size"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:lines="1"
android:singleLine="true"
android:text="short text" />
<TextView
android:id="#+id/fixed-size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:ellipsize="none"
android:lines="1"
android:singleLine="true"
android:text="(s)" />
</LinearLayout>
<View
android:id="#+id/empty_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
This will give you the following behaviour:
[[[short text][(s)]]____________]
[[[slightly longer text][(s)]]__]
[[[really long ...ng text][(s)]]]

Texts always in center and right, how?

I am sorry I know it's simple question but I can't make this happen now.
I want one text always will be in center and another in right.
But when texts is too loo long they come to each other.
Let's say I want second text always be in the right and first text is in center but when one of these texts is too long the centered texts have to move left.
How could I do this?
I write this but it doesn't work properly.
<RelativeLayout
android:id="#+id/workout_footer_text"
android:layout_width="match_parent"
android:layout_height="#dimen/workout_header_height"
android:background="#color/green"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingLeft="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/review_comments_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:textSize="#dimen/review_top_text_size"
android:singleLine="true"
android:gravity="center"
android:layout_toLeftOf="#+id/review_write_label"
android:layout_centerInParent="true"
android:layout_gravity="center"/>
<TextView
android:id="#+id/review_write_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color_white"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:singleLine="true"
android:layout_marginLeft="20dp"
android:textSize="#dimen/review_top_text_size"
android:layout_centerVertical="true"/>
</RelativeLayout>

Instead of layout_toLeftOf="#+id/review_write_label" in your first TextView, remove that line and add layout_toRightOf="#id/review_comments_label" to your second TextView to make sure the first view stays centered and the second view stays to the right.
Update
Then make the second view's width match parent and set it's gravity to right. This will right justify the text in a container that stretches from the right edge of the centered TextView to the right edge of the parent thanks to the match_parent width.

You can try this:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="text1" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="text2" />
</LinearLayout>

Button size and padding within RelativeLayout

I'm attempting to create a a Heading + button similar to the Google Music App, e.g. where there is a "Songs" Header on the Left and then on the right there is a Button with the text "X more"..
I've using a RelativeLayout for the TextView and Button
My problem is that the button is taking up the size of the layout that contains the text the height is all wrong and the padding doesn't seem to do anything.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
[REMOVED for clarity]
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/list_foreground"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/photo_button"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#color/actionbar_background"
android:padding="10dp"
android:text="test" />
</RelativeLayout>
What am I doing wrong here?

RelativeLayouts are designed to have children in the layout "relative" to each other. In other words, if you want the Button to the right of the Textview, you need to tell it.
Because you are aligning relative to the parent LEFT / RIGHT, it appears that things are "kind of" working.
You may be better off with a LinearLayout, depending on your needs. LinearLayouts use "orientation" not RelativeLayouts.
You should look over some tutorials (like this one: http://mobile.tutsplus.com/tutorials/android/android-layout/) but ultimately you will probably put your button in first and then your text view so that the textview content will wrap appropriately.

To get the same effect as the Music App I ended up using a RelativeLayout but instead of a Button I'm using another TextView, this is giving the impression it's a button but it gives me more scope to format the background etc. I think just setup a OnClickListener in the code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/photo_title">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:text="#string/photos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/more_photo_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="#color/actionbar_background"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="10 MORE"
android:textColor="#color/button_text"
android:textSize="12sp" />
</RelativeLayout>

android make left textview to be shorten and right remain fully visible

I need to display two single-line TextViews horizontally. The left TextView (let's name it 1) may have a longer text which may shortened and finished with "...". The right text view (2) has a short text and should never get shortened.
I want the 1 to remain aligned to the left end of the parent. The 2 aligned to the right side of 1.
There are now 2 conditions that I have to meet
a) if the 1 has a short text then the 2 should get aligned to the right of 1 (none of the gets shortened).
b) but if the 1 has a too long text then the text of 1 should be shortened by '...' while the view 2 is moved maximally to the right of the parent but still remains fully visible (no ...)
My current solution is the following below. The scenario b) is fine with mine, but in case of a) the problem is that the view 2 is moved to the right side of the parent and the 1 to the left side - both are short and there's pretty much space in between which looks odd. I want 2 to move to the further left (next to 1) and leave this space on the right side.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="1dp"
android:layout_weight="0.5">
<TextView
android:id="#+id/ns_in_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
<TextView
android:id="#+id/ns_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/ns_in_txt"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
</RelativeLayout>

Try doing this
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_context"
android:layout_marginTop="1dp">
<TextView
android:id="#+id/ns_in_txt"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:gravity="left"
android:maxLines="1"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
<TextView
android:id="#+id/ns_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/ns_in_txt"
android:gravity="left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
</RelativeLayout>

Apparently, you want two scenarios which require to set a different orientation to the parent layout: first horizontal, second vertical. Maybe I'm wrong (and I hope so but) in static xml, there will be difficult to do this.
Try the code below to test if I'm wrong:
Scenario 1: orientation horizontal = the text 1 is not big enough
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textLong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="This is a normal text not big" />
<TextView
android:id="#+id/textShort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="short text" />
</LinearLayout>
Scenario 2: orientation vertical = the text 1 is too big
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textLong"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="This is a biiiggg loooonnng teeeeexxxxxtttt" />
<TextView
android:id="#+id/textShort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp"
android:text="short text" />
</LinearLayout>
To resolved your issue, you can try 2 solutions.
First, try to create a maxLenght limit, which calculate in your Activity and change the parent orientation of the LinearLayout. Get the number of chars that you have and display the orientation as well.
Second, customise your own class extend TextView. And create a getWidth method which return the width of the long TextView in comparison to it parent and change the orientation.
Maybe the following questions/answers could be useful (I think there are not solutions but more as inspiration):
In Android how to get the width of the Textview which is set to Wrap_Content
Get the size of a text in TextView
How to find android TextView number of characters per line?
Auto Scale TextView Text to Fit within Bounds
EDIT:
I found a solution with the last url that I writed above. See this answer where the dev wanted to make the same as you. So he decided to create a autoresizable textview. Take a look here: Move two side by side textviews to be one under another if text is too long
I hope this will help you.

May I suggest to use combination of LinearLayout and a little bit of coding. The idea is to have them side by side regardless of the size. and after the right textview is measured and laid out, set the max width of the left textview to whatever space left.
Here is the layout file, nothing special here:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/ns_in_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
<TextView
android:id="#+id/ns_txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:ellipsize="none"
android:gravity="top|left"
android:maxLines="1"
android:singleLine="true"
android:textColor="#00a2ff"
android:textSize="18sp" />
</LinearLayout>
and add some codes to the activity/fragment:
final TextView tvLeft = (TextView) findViewById(R.id.ns_txt);
final TextView tvRight = (TextView) findViewById(R.id.ns_in_txt);
ViewTreeObserver obs = tvRight.getViewTreeObserver();
obs.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
tvLeft.setMaxWidth(SCREEN_WIDTH - tvRight.getWidth());
}
});