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
Related
Having 4 views A (TextView), B(icon), C(TextView), D (TextView) horizontally aligned next to each other.
B and D have fixed width. The text will be filled in the onBindView().
Their parent's width could be calculated based on the screen orientation.
It requires to show A as much as possible, and the C will consume the rest or up to its content width (if not enough space then show ellipsis).
And all A, B, C, D should left align the right edge of the previous one.
There are a few cases but these four cover most of them.
1. Parent width is enough for all
|-|AAAA|B|CCCCCCCC|DDD|--------------|-|
2. C is too large and have to show ellipses
|-|AAAAA|B|CCCCCCCCCCCCC...|DDD|-|
3. A is large and have to show ellipse for C to be able to show
|-|AAAAAAA..........|B|CCCCCCCC|DDD|-|
4. the parent width is not enough for showing A and C completely, so A and C both show ellipses
|-|AAAAAAAAAAAAAA...|B|CCCCC...|DDD|-|
so the rule is to show A as much as possible, C shows either in full or with ellipses, in case with showing C's minWidth and still cannot show the A in full then show A with ellipsis.
Tried LinearLayout, RelativeLayout and ConstraintLayout and cant get the desired result.
this has two maxWidth for A and C, the problem is if either A or C is too small the other one may still show ellipsis without using all available space.
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/a_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxWidth="130dp"
android:maxLines="1"
android:textSize="16sp"
android:textStyle="bold"
tools:text="ee" />
<ImageView
android:id="#+id/b_checked"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginStart="3dp"
android:layout_marginEnd="8dp"
android:baselineAlignBottom="true"
app:srcCompat="#drawable/checked" />
<TextView
android:id="#+id/c_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:ellipsize="end"
android:maxWidth="150dp"
android:maxLines="1"
tools:text="aasdasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfa" />
<TextView
android:id="#+id/d_time"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_gravity="left"
tools:text="30 Nov 18"
/>
</LinearLayout>
If do it in a derived view and override the onMeasure(), the calculation is not straight forward and the A, C width may not immediately available.
How to do it just in layout xml, or is it possible?
I'm not sure if this meets your requirements, but this is my attempt using ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="#+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#eee"
android:ellipsize="end"
android:maxLines="1"
android:text="something very very very very very long"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/two"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fixed"
app:layout_constraintBaseline_toBaselineOf="#id/one"
app:layout_constraintLeft_toRightOf="#id/one"
app:layout_constraintRight_toLeftOf="#id/three"/>
<TextView
android:id="#+id/three"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#eee"
android:ellipsize="end"
android:maxLines="1"
android:text="this is pretty short"
app:layout_constraintBaseline_toBaselineOf="#id/one"
app:layout_constraintLeft_toRightOf="#id/two"
app:layout_constraintRight_toLeftOf="#id/four"
app:layout_constraintWidth_default="wrap"/>
<TextView
android:id="#+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fixed"
app:layout_constraintBaseline_toBaselineOf="#id/one"
app:layout_constraintLeft_toRightOf="#id/three"
app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The important parts here are that the first "stretchable" view uses wrap_content while the second uses 0dp plus app:layout_constraintWidth_default="wrap". This will give the space to the first view at a higher priority than the second view, but will allow both to grow and shrink.
The only problem I've found is that, when the first view's text is very long, it can push the other views on top of each other. This could potentially be solved by adding a maximum width to the first view:
app:layout_constraintWidth_max="256dp"
Some screenshots:
I have a table graphic made with TextView, whose data is updated from an Activity, but if I set the minimum height this is fine as long as the text is not longer in that case the text view does not stretch, probably because the text is updated after the view is created...
This is an image of result (see the last green line)
And this is the code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"><TextView
android:id="#+id/txtScNota"
android:layout_below="#+id/xmlScUltima"
android:layout_width="120dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:layout_marginTop="15dp"
android:background="#color/txtColSc"
android:gravity="start|center_vertical"
android:text=" Nota: "
android:textStyle="bold" />
<TextView
android:id="#+id/xmlScNota"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/txtScNota"
android:layout_marginStart="10dp"
android:layout_marginEnd="5dp"
android:layout_toEndOf="#id/txtScNota"
android:background="#color/xmlColSc"
android:gravity="start|center_vertical"
android:minHeight="25sp"
android:paddingStart="3dp"
android:paddingEnd="3dp"
android:text="- - -"
Probably you're using a fixed height in the parent layout, or you're using wrap content.
If this is the case, it's also wrong because in one of the two TextViews you're using a fixed height, so the parent is inheriting that fixed height.
I don't know what are you using as parent layout but this is an example that should work
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:orientation="horizontal"/>
<TextView
android:id="#+id/txtScNota"
android:layout_below="#+id/xmlScUltima"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="15dp"
android:background="#color/txtColSc"
android:gravity="start|center_vertical"
android:text=" Nota: "
android:textStyle="bold" />
<TextView
android:id="#+id/xmlScNota"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/txtScNota"
android:layout_marginStart="10dp"
android:layout_marginEnd="5dp"
android:layout_toEndOf="#id/txtScNota"
android:background="#color/xmlColSc"
android:gravity="start|center_vertical"
android:minHeight="25sp"
android:paddingStart="3dp"
android:paddingEnd="3dp"
android:text="- - -"/>
</LinearLayout>
Here are some hints:
Make sure your android:height="wrap_content"
Add attribute android:lines="2" (this enforces that your textview allows 2 lines, up to you to decide how many lines you should allow)
If things become messed up, check your Layout element, it might be better to use a gridlayout for this case or a constraintlayout to achieve what you want.
I have an arbitrary length textview+icon (icon+text) that needs centering on the screen. On the same row, there is a button aligned to the right side of the screen. (X)
| icon+text | X |
Using a LinearLayout I can center it with the view, but the button on the right shifts it left.
With a relative layout, I can achieve what I want but if the text is too long the button overlaps the text.
What's the right way to do this? I haven't used constraintLayout before, would that solve it?
I suggest you to use a constraint layout,
Example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".YourActivity">
<TextView
android:id="#+id/my_text_view"
android:text="My Long Text That must not overlap the button"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/my_btn"
app:layout_constraintTop_toTopOf="#+id/my_btn"
app:layout_constraintBottom_toBottomOf="#+id/my_btn"/>
<Button
android:id="#+id/my_btn"
android:layout_marginTop="16dp"
android:text="My Nice Button "
android:layout_marginEnd="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/my_text_view"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
Example Output:
You can set it like this,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:drawableLeft="#mipmap/ic_launcher"
android:text="Click" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
just use a Relative Layout.
Center your Textview
and put toRightOf=txtViewsName on the button.
//UPDATED Forcing Widths in DP to ensure text is always centered and never overlaps button.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#mipmap/ic_launcher"
android:maxWidth="230dp"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:text="My text to show test abcdefghyijkldkf here" />
<Button
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
You will need to adjust the button width and textview maxwidth to match your design, and confirm on preview all resolutions, but dp should cover you pretty well in this case.
NOTE*
This simply answers your issue, but does not do any funny behavior, i.e. if text grows too much ignore center command and start moving to the left, this does not do that. If that is your desire, please update your question.
//Centering Text in left view and using weight to ensure text area takes proper percentage of the space (based on your comments, not the layout you are looking for, but I'll leave it in case it helps someone else).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:drawableLeft="#mipmap/ic_launcher"
android:gravity="center"
android:text="My text to show here" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="Button" />
</LinearLayout>
for best practice i think ConstraintLayout is the best solution for designing and yes of course it helps you for what are you looking for.
for more info check this Build a Responsive UI with ConstraintLayout and this
ConstraintLayout.
Since your ImageButton on right has a fixed width (let's say 40dp for the purpose of this example) you can achieve the desired result by adding a margin of the same width at the end of your TextView to ensure that they're not overlapping. To keep the TextView centered on the screen you have to add the same margin at the start as well:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textview"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/button"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textview"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
If you want to center the text within the TextView use android:gravity="center":
If the ImageButton's width was wrap_content then this approach wouldn't work, because there is no way to constraint the end of the TextView both to the end of the parent (so it's centered on the screen) and to the start of the ImageButton (so they don't overlap if the text gets long) at the same time.
In the end I ended up using RelativeLayout per Sam's suggestion with maxWidth and margin set on the TextView.
I use :
compile 'com.android.support.constraint:constraint-layout:1.0.2'
The main problems are：
layout_margin can't be shown correctly;
child textview's text is clipped.
Details as below:
This is my xml:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="8dp">
<ImageView
android:id="#+id/reviewer_avatar"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#color/colorAccent"
android:contentDescription="#string/avatar"
android:layout_margin="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/reviewer_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/reviewer_name"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/comment_floor"
app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar"
app:layout_constraintTop_toTopOf="#+id/reviewer_avatar"
app:layout_constraintVertical_chainStyle="packed"/>
<TextView
android:id="#+id/comment_floor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/reviewer_floor_text"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/reviewer_avatar"
app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar"
app:layout_constraintTop_toBottomOf="#+id/reviewer_name"/>
<TextView
android:id="#+id/comment_period"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:text="#string/comment_period_text"
android:textSize="12sp"
app:layout_constraintLeft_toRightOf="#+id/comment_floor"
app:layout_constraintTop_toBottomOf="#+id/reviewer_name"/>
<TextView
android:id="#+id/comment_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/large_text"
android:textSize="16sp"
app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar"
app:layout_constraintTop_toBottomOf="#+id/reviewer_avatar"/>
</android.support.constraint.ConstraintLayout>
This is my screenshot:
Here are mainly two problems
You missing to set right constraint for view with parent
There was an bug in ConstraintLayout with wrap_content which is resolved , now you have to use match_constraint(0dp) and layout_constraintWidth_default property to solve this issue
add below two properties to largetext view
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
app:layout_constraintRight_toRightOf="parent"
So your largetext view would be like
<TextView
android:id="#+id/comment_content"
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
android:layout_height="wrap_content"
android:text="#string/large_text"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar"
app:layout_constraintTop_toBottomOf="#+id/reviewer_avatar"/>
I think I found the answer to child textview's text is clipped.
I change it：
<TextView
android:id="#+id/comment_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/large_text"
android:textSize="16sp"
app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar"
app:layout_constraintTop_toBottomOf="#+id/reviewer_avatar"/>
to
<TextView
android:id="#+id/comment_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/large_text"
android:textSize="16sp"
app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar"
app:layout_constraintTop_toBottomOf="#+id/reviewer_avatar"
app:layout_constraintRight_toRightOf="parent"/>
This would solve the problem !
But this way, TextView can't scalable，only fill width.
Finnaly, the better answer:
<TextView
android:id="#+id/comment_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/reviewer_name"
android:textSize="16sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#+id/reviewer_name"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/reviewer_avatar"
app:layout_constraintWidth_default="wrap"/>
layout_margin can't be shown correctly; - margins space is outside view's bounds. app:layout_constraintLeft_toRightOf="#+id/reviewer_avatar" means that reviewer_name is constrained to the right side of reviewer_avatar not including margins. Set android:layout_marginLeft="8dp" of reviewer_name, comment_floor and comment_content.
child textview's text is clipped. - width of the comment_content is equal to the width of your ConstraintLayout, but the comment_content is constrained to the right side of reviewer_avatar. Therefore the right side of the comment_content goes beyond the boundaries of the ConstraintLayout, i.e. is clipped. Set the specific width of the comment_content for different screen sizes.
I believe this is a resize bug that should be fixed in 1.1 beta 1 (see https://androidstudio.googleblog.com/2017/05/constraintlayout-110-beta-1-release.html to install it) -- please try it and see if that's it.
So, idea in this: I have two TextViews, first can expand whatever it wants, second always 5 chars (time). Problem is in that first TextView can easily push second out of the screen.
So, what I need is something like adjustable LinearLayout, or maybe some GridLayout that will move second TextView on some sort of second line if it doesn't fit parent.
For example you can watch at message bubbles in Viber and WhatsApp. Thanks for any advise.
Update 1
Here is XML that i have now (Only message part)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageBox"
android:layout_gravity="center_vertical"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
android:text='#{mess.message}'/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|end"
android:gravity="center_vertical|end"
android:paddingLeft="8dp"
android:textSize="12sp"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:text='#{Utils.parseMillsToHoursAndMins(mess.date)}'/>
</LinearLayout>
Update 2
So I added layout_weight to first TextView, that helped with my first problem, but now I have new one. This two TextViews are in LinearLayout which is in another LinearLayout with another TextView. Parent LinearLayout have width set to wrap_content so if top TextView will be bigger than 2 TextViews it will cause child LinearLayout to be less than it's parent, and 2nd TextView (from that 2) wouldn't be in the end of parent. But when child LinearLayout is bigger, all appears to be OK. I know it's complicated, so this is XML
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="0dp"
android:id="#+id/contentPanel"
app:bringToFront="#{true}"
android:orientation="vertical"
android:background="#{(mess.isMine?#drawable/chat_bubble_right:#drawable/chat_bubble_left)}">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text='#{!mess.authorRole.equals("Client")?(mess.authorRole + " - " + mess.author):mess.author}'
android:textColor='#{mess.authorRole.equals("Lawyer")?#color/colorPrimary:mess.authorRole.equals("Admin")?#color/red:#color/green}'
android:textSize="12sp"
android:id="#+id/author"
android:fontFamily="sans-serif-medium"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageBox">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_weight="0.7"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
android:text='#{mess.message}'/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:textSize="12sp"
android:gravity="bottom|end"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
app:checkFit="#{false}"
android:text='#{Utils.parseMillsToHoursAndMins(mess.date)}'/>
</LinearLayout>
</LinearLayout>
The new approach for achieving such behaviour is using ConstraintLayout with Flow. Here is an example of usage:
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/socialsButtonsFlow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:flow_horizontalGap="8dp"
app:flow_verticalGap="4dp"
app:flow_wrapMode="aligned"
app:flow_horizontalStyle="spread_inside"
app:constraint_referenced_ids="vkButton,twitterButton,facebookButton,youtubeButton,instagramButton,odnoklassnikiButton,tiktokButton"
app:layout_constraintEnd_toEndOf="#id/socialsLabel"
app:layout_constraintStart_toStartOf="#+id/socialsLabel"
app:layout_constraintTop_toBottomOf="#+id/socialsLabel" />
For small screens it looks like this:
I am not sure this will help you or not but:
Use: https://github.com/ApmeM/android-flowlayout
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</org.apmem.tools.layouts.FlowLayout>
Inside FlowLayout you can put your view's and it will auto move to next line if not fit.
if your textviews in linearlayout you can add weightSum method