I have this section into my layout:
<RelativeLayout
android:id="#+id/title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/keyline_4"
android:paddingTop="10dp"
android:paddingRight="#dimen/keyline_4"
app:layout_constraintTop_toBottomOf="#+id/avatar_layout"
android:visibility="visible">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/flag_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginRight="#dimen/keyline_0"
android:layout_toLeftOf="#+id/title"
android:src="#drawable/ic_modify"
android:visibility="visible"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
style="#style/ProfileTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="TEST TEST"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/update_icon"
android:layout_width="#dimen/keyline_4"
android:layout_height="#dimen/keyline_4"
android:layout_toRightOf="#+id/title"
android:layout_marginLeft="#dimen/keyline_0"
android:src="#drawable/ic_modify"
android:visibility="visible"/>
</RelativeLayout>
The result (on layout editor): it's OK
But if the text is long like this, the icons disappear...
How to keep icons into the screen (left and right)? The text should be wrapped between these 2 icons.
Thank you very much!
Right now you are constraining the text to the parent and the images to the text. You need to constrain the images to the parent and the text to the images.
To accomplish this, you would need to use a ConstraintLayout instead ofyour RelativeLayout. It might look like this (I added my own values where you were using dimen):
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/activity_main">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/update_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_toRightOf="#+id/title"
android:src="#drawable/ic_modify"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:paddingLeft="26dp"
android:paddingRight="26dp"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true"
app:layout_constraintStart_toEndOf="#id/update_icon"
android:text="TEST this is a super long, long, long, long, long, long, long version of the test TEST"
app:layout_constraintEnd_toStartOf="#id/flag_icon"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/flag_icon"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginStart="384dp"
android:src="#drawable/ic_modify"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This would give you something like for long text:
and something for short text:
This turned out to be a challenging question for me. After struggling several hours I couldn't get the solution by means of neither LinearLayout, nor RelativeLayout nor ConstraintLayout. I too look forward to see a solution by either of the layouts mentioned (or any other).
Meanwhile, in case you're tight with time, I'd suggest an option that is rather a workaround than solution. Namely, you might consider using drawableStart and drawableEnd attributes for the AppCompatTextView, so the resulting layout would look as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:drawableStart="#mipmap/ic_modify"
android:drawableEnd="#mipmap/ic_modify"
android:text="TEST TEST TEST TEST TEST TEST TEST TEST"
android:ellipsize="end"
android:maxLines="1"
android:singleLine="true" />
</RelativeLayout>
Note, that for testing I used #mipmap/ic_launcher shipped with a default Android Studio project. The ic_launchers are of square size for each screen resolution group. You might need to do the same with ic_modify to prevent its stretching in width.
Another option, if applicable, might be creating a custom view.
Related
basically I have an layout as shown in the image. I am using a Guideline to restrict the width of the blue box. This means the ConstraintLayout itself hase full screen width and the blue box has its layout_constraintEnd_toStartOf="#id/guideline".
The blue box is just the background color of the TextView with the text, there aren't any additional containers or anything.
In order for the blue box to respect the constraints for its width calculations I have to set layout_constrainedWidth="true" on the box. As you can see the width is then restricted but the problem is that wrap_content does not work correctly afterwards.
The first box shows that if the text is only a single line, then the behaviour is as expected but if the text spans multiple lines (as in the second box) wrap_content breaks and the box is always "full width" (start of screen until the guideline).
Did somebody experience something similar? Is this a bug or did I misunderstood something. The same broken behaviour can be observed with the grey box on the right side.
I assume this has to do with the breaking behaviour of the TextView but is there a fix or workaround? As far as I know outside of an ConstraintLayout the width would be equal to the text so I assume this is a bug.
Edit XML code:
This is the basice code of one of the "bubbles" and as already mentioned I would like the view to really be as wide as the text.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chat_message_history_receiver_background"
android:fontFamily="#font/nunito_semibold"
android:includeFontPadding="false"
android:paddingStart="15dp"
android:paddingTop="10dp"
android:paddingEnd="15dp"
android:paddingBottom="10dp"
android:textColor="#FFFFFF"
android:textSize="17sp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toEndOf="#id/profile_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
app:layout_constraintWidth_max="wrap"
tools:text="Just testing something, somehowthisisnotworking" />
<app.jooy.messenger.ui.components.generic.profile_image.ProfileImage
android:id="#+id/profile_image"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintVertical_bias="1"
app:backgroundColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the output of this particular xml code:
Try with this, adjust margin and padding as per your need. and change the android:layout_marginBottom of the guide as per your need.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:paddingStart="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:includeFontPadding="false"
android:paddingStart="15dp"
android:paddingTop="10dp"
android:paddingEnd="15dp"
android:paddingBottom="10dp"
android:textColor="#FFFFFF"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guide"
app:layout_constraintWidth_percent=".8"
tools:text="Just testing something, Some how this is not working" />
<app.jooy.messenger.ui.components.generic.profile_image.ProfileImage
android:id="#+id/profile_image"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="5dp"
app:backgroundColor="#color/colorPrimary"
app:layout_constraintStart_toStartOf="#id/text"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/guide"
android:layout_width="0dp"
android:layout_height="0.2dp"
android:layout_marginBottom="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/profile_image"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toTopOf="#id/profile_image" />
</androidx.constraintlayout.widget.ConstraintLayout>
My goal is to have 2 TextViews (textLeft, textRight) next to each other. textLeft should be aligned to the left side of parent. textRight should always be an immediate right of textLeft (not on the extreme right of device), and it should not be pushed out of screen if textLeft is too long.
Horizontal LinearLayout is of no use here as using weights will fix the view size, and that's not desired.
I have been using this RelativeLayout which works fine if textLeft is not too long. With longer texts, textRight is pushed off screen.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".TextAlignActivity">
<TextView
android:id="#+id/textLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:maxLines="3"
android:ellipsize="end"
android:text="Text On the Left - long random text to follow"
/>
<TextView
android:id="#+id/textRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/textLeft"
android:layout_alignParentRight="true"
android:textSize="10sp"
android:maxLines="1"
android:text="Text on the Right"
/>
</RelativeLayout>
I guess ConstraintLayout may be a good fit for such cases, but I am not very familiar. I would like to avoid that if possible, since it will need a heavy re-write of my existing layout.
EDIT:
In order to simplify my query, I am using 2 TextViews in the example. In my app code textLeft is a vertical LinearLayout with 2 TextViews (textLeftTop and textLeftBottom) instead of a single TextView as shown in example. I am hoping the solution that works for 2 TextViews should also work for a LinearLayout and TextView.
Based on the solutions so far, I should clarify that I need the textRight to be on immediate right of textLeft (not device right) if textLeft is not long. If textLeft is long, then textRight should "stick" to the device right, and textLeft should wrap text.
Edit:
This layout is a kind of "chatting" layout. You can use two LinearLayout, one is parent of all with match_parent, and the other is holder of two TextViews. Note that latter one has wrap_content width.
layout_weight attribute of LinearLayout means... roughly speaking, smaller number is important.
See also: https://developer.android.com/reference/android/widget/LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test test test test test test test test test test test test test test test"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world"
android:layout_weight="0"/>
</LinearLayout>
<Space android:layout_width="wrap_content" android:layout_height="20dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test test test test test test test test "
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world"
android:layout_weight="0"/>
</LinearLayout>
</LinearLayout>
Outdated answer
Note that textLeft has 0dp width.
If you set width (or height) to 0 in constraint layout, it means it will fill rest of the empty space.
Or, you can use app:layout_constraintHorizontal_weight with 0dp width, you can set percentage of width of layout.
<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="match_parent">
<TextView
android:id="#+id/textLeft"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Long Long Long Long Long Long Long Long Long Long Long Long Long"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/textRight"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World! "
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/textLeft"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1ldksjdaskldjadlkjdaslkdjsl"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#id/text2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="text2dsjdakldjlkajdlskdjasldkjdlskdjasdlaskdjasldkj"
android:textSize="20sp"
android:gravity="right"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/text1"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I'm not sure if this is what you were asking for, in any case I just checked a few scenarios where the texts are longer in both textviews.
I also suggest you to convert your layouts to constraint layout, eventually you will benefit from it, you could easily flatten your tree view hierarchy without using too many inner layouts.
you can implement this code in this way
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:maxLines="3"
android:ellipsize="end"
android:text="Text On the Left - long random text to follow"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/textRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/textLeft"
android:layout_alignParentRight="true"
android:textSize="10sp"
android:maxLines="1"
android:text="Text on the Right"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
or that one
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:maxLines="3"
android:ellipsize="end"
android:text="Text On the Left - long random text to follow"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="10dp"/>
<TextView
android:id="#+id/textRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/textLeft"
android:layout_alignParentRight="true"
android:textSize="10sp"
android:maxLines="1"
android:text="Text on the Right"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/textLeft"
android:layout_margin="10dp"/>
I have read in a blog entry that in ConstraintLayout 2.0.0, a way was introduced to create a flow of views. What I exactly want to achieve:
I have several TextViews with a fixed size next to each other. Depending on screen size, some TextViews should be pushed into the next line.
Example on big screen with six TextViews:
[AAA] [BBB] [CCC] [DDD]
[EEE] [FFF]
Example on small screen with six TextViews:
[AAA] [BBB]
[CCC] [DDD]
[EEE] [FFF]
I already saw this Stackoverflow question proposing to use a FlexboxLayout, but there is a comment saying that the same thing now can be achieved using ConstraintLayout.
Anybody can give me an example on how to achieve the desired behavior using ConstraintLayout? I was not able to find any instructions about this. Thanks in advance.
You can achieve this by adding a androidx.constraintlayout.helper.widget.Flow virtual view inside the androidx.constraintlayout.widget.ConstraintLayout and by referencing all your textviews with app:constraint_referenced_ids attribute.
Example below shows how I've achieved it.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[AAAAAAAA]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[BBBBBBBB]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[CCCCCCCC]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[DDDDDDDD]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[EEEEEEEE]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[FFFFFFFF]"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_horizontalStyle="packed"
app:flow_verticalBias="0"
app:flow_wrapMode="chain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Play around with app:flow_ attributes to change the arrangement of the textviews such as alignment, margin, etc.
https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow
Final result should look like below depending on your screen size.
I'm working on a chat function where I want the users messages appear on the right side and messages from others on the left side. The right side is giving some trouble.
As the message is short, it should stick to the right side of the screen, then the name of the user should be right next to it as shown below (Android developers "show layout bounds" is on):
Just some simple LinearLayout with two TextViews aligned to the right, but you can see this doesn't work with longer messages, as they are clipped off and the name is often invisible at all. I've managed to do this with a constraint layout:
]
The ConstraintLayout (wrapper) has a 100dp constraint to the left for the margin and within it, the name and the message are chained. The downside is that short messages don't stick to the right anymore.
How do I manage the layout to automatically align the way I want?
Maybe this could help you, if you already have a ConstraintLayout, play a little bit more with the possible constraint attributes.
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:padding="16dp">
<TextView
android:id="#+id/name"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:paddingEnd="8dp"
android:text="Name"
app:layout_constraintEnd_toStartOf="#id/message"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="Message"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/name"/>
<TextView
android:id="#+id/name2"
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:paddingEnd="8dp"
android:text="Name"
app:layout_constraintEnd_toStartOf="#id/message2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/message"/>
<TextView
android:id="#+id/message2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="A Very Long message for you to read set we cen test to row breaking in this text Message"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/name2"
app:layout_constraintTop_toBottomOf="#id/message"/>
</android.support.constraint.ConstraintLayout>
The magic is: app:layout_constrainedWidth="true" which takes care about the maximum width of the view, depending on the surrounding views (simply constraint with toStartOf ... EndOf)(see: https://developer.android.com/reference/android/support/constraint/ConstraintLayout).
Also app:layout_constraintHorizontal_chainStyle="spread_inside" takes care, that the views always alligned to the maximum left and right, this is Chaining in constraint layouts (https://developer.android.com/training/constraint-layout/)
Hope it helps you to solve your problem.
You should be able to manage this functionality by implementing the constraint Guideline.
With this, you can split your entire layout vertically and separate user messages and responses while formatting each side individually.
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
Try using something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<LinearLayout
app:layout_constraintRight_toLeftOf="#id/guideline"
android:id="#+id/friend_column"
android:layout_width="0dp"
app:layout_constraintWidth_percent=".5"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Friend"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:gravity="end"
android:text="Whats up?"/>
</LinearLayout>
<LinearLayout
app:layout_constraintTop_toBottomOf="#id/friend_column"
app:layout_constraintLeft_toRightOf="#id/guideline"
android:id="#+id/user_column"
android:layout_width="0dp"
app:layout_constraintWidth_percent=".5"
android:layout_marginRight="10dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textStyle="bold"
android:text="User"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:gravity="end"
android:text="I'm sailing away set an open course for the virgin sea
I've got to be free free to face the life that's ahead of me
On board I'm the captain so climb aboard
We'll search for tomorrow on every shore
And I'll try oh Lord I'll try to carry on"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I have an XML file with an ImageView and a TextView. Everytime that the TextView is populated, the text goes off of the screen. I looked at other people who have had the same problem and the common solution seems to be to set the Textview's width to 0dp. This hasn't worked for me. Wondering if anyone knows why?
Here is my constraintLayout XML file:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Here is what it looks like, text is clearly getting cut off:
I got the solution of your problem just use it:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/weather_data"
android:layout_width="50dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE "
android:textStyle="bold"
android:paddingRight="16dp"
style="#style/TextAppearance.AppCompat.Large"
app:layout_constraintLeft_toRightOf="#id/weather_icon"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
You should set the width of your TextView to match_constraint which, in the XML, will be 0dp.
And I see you're using both left/right and start/end notations. Stick to only one of them.
I encourage you to use the start/end notation because there might be devices using your app that their language is one that reads from right to left, i.e.: Arabic, so using the start/end you don't have to worry about these devices.
Thanks to Sandeep and Martin. I combined their suggestions and this works well in the layout:
<ImageView
android:id="#+id/weather_icon"
app:layout_constraintEnd_toStartOf="#id/weather_data"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="50dp"
android:layout_height="wrapcontent" />
<TextView
android:id="#+id/weather_data"
android:text="EXAMPLE"
android:textStyle="bold"
android:paddingRight="16dp"
app:layout_constraintStart_toEndOf="#id/weather_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/TextAppearance.AppCompat.Large"
android:layout_width="0dp"
android:layout_height="wrap_content" />