I have a dialog widget with navigation bar contains title and close button. I want to put the title in centre of the device, and put the close button in the end of layout. However when the title is long, then it will overlap with the close button. Here is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:maxLines="1"
android:ellipsize="end"
android:text="Title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="Close" />
</androidx.constraintlayout.widget.ConstraintLayout>
Any workaround to achieve this?
Thank you.
Normally, to center text, you would constrain the start and end of the text to the end point of the centering region. In this case, since the text should be centered on the screen, you would attach the start to the parent start and the end to the parent end. This works unless the centered text exceeds the empty center region and overlaps the "Close" TextView. Unfortunately, there is no way to make these constraints and tell the centered view to avoid overlapping the TextView on the right.
To make it work, I would introduce another TextView that is a duplicate of the "Close" TextView, make it invisible and attached to the top and start of the parent. This will create a region between the two TextViews where the text can be centered. To ensure that the text does not overlap the end TextView, specify app:layout_constrainedWidth="true" on the centered view. Something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Close"
android:visibility="invisible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="This is some very long text that should stretch across the device and ellipsize."
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toEndOf="#+id/space"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="left"
tools:layout_editor_absoluteX="306dp"
tools:layout_editor_absoluteY="62dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
which will show in the designer like this for long text:
and like the following for short text:
There are other ways to do this that would involve some coding, but this is an XML-only solution which, IMO, is preferable.
Related
If I have two textviews vertically aligned where either the one OR the other could contain the longer text, how can I vertically align these so their background image LOOKS like it is one complete background for both TextViews (so one big box no matter which of those views contains the longer text)
Reason is that I use the textviews on top of a picture but need to shadow them in case the picture has the same color as the textview
UPDATE:
As the comments suggested I now used a linear layout like this, but now there is a very small gap between the textviews that wasn't there with ConstraintLayout. Any idea how to fix?
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginEnd="10dp">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_overlay_top"
android:paddingStart="6dp"
android:paddingTop="6dp"
android:paddingEnd="6dp"
android:text="TextView1"
android:textColor="?colorOnPrimary"
android:textSize="13sp"/>
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="14dp"
android:background="#drawable/bg_overlay_bottom"
android:paddingStart="6dp"
android:paddingEnd="6dp"
android:paddingBottom="6dp"
android:text="TextVie2 long"
android:textColor="?attr/colorOnPrimary"
android:textSize="16sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.LinearLayoutCompat>
UPDATE 2
I now used a complete image as background of the linear layout, but sadly this solution does not work either, the linear layout only constraints to the lower text view, which means if the lower is shorter then the upper, the upper one gets truncated
Here is how you can get the two TextViews to have the same width regardless of which view has the longer text.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:text="Here is some long, long text."
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="wrap" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:gravity="center"
android:text="Bottom"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintWidth_min="wrap" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierEnd"
android:layout_width="0dp"
android:layout_height="0dp"
app:barrierDirection="end"
app:constraint_referenced_ids="textView1,textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
This solution was borrowed from here. I took a stab at explaining why it works here.
For one big blue background as you said, you can use a vertical LinearLayout as a container of both TextViews and set its background color to blue.
If you are using a vertical LinearLayout, you could set android:layout_width (of the TextViews) to "match_parent" instead of "wrap_content".
Edit: Into the outer vertical LinearLayout put an another vertical LinearLayout with android:layout_width="wrap_content" and the 2 TextViews inside with android:layout_width="match_parent"
If you're using constraint layout then
app:layout_constraintStart_toStartOf
would be working for you , also using baseline would be very useful too.
I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.
What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.
Here are 3 scenarios for the layout which I want to achieve:
I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="space_between"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text text"
android:gravity="start"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Button"
/>
</com.google.android.flexbox.FlexboxLayout>
So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.
Use justifyContent="flex_end" in the parent and set layout_flexGrow to the children like this works for me.
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_end">
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="blah blah"
app:layout_flexGrow="1" />
<TextView
android:id="#+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="( . )( . )"
app:layout_flexGrow="0" />
</com.google.android.flexbox.FlexboxLayout>
No need for a 3rd party layout.
ConstraintLayout should be more than enough - with a small tweak in code.
Your TextView will have straightforward constraints, set to parent layout (start, top, end).
<?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"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text text text text text text" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text" />
</android.support.constraint.ConstraintLayout>
In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).
If it does change(you will have to do this in code but this is the principle):
app:layout_constraintTop_toTopOf="#+id/text"
to
app:layout_constraintTop_toBottomOf="#+id/text"
If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.
Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.
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.
My end goal is to have two single-line TextViews in a left-aligned, packed horizontal chain that allows both of them to grow to fill the remaining space, splitting it evenly if necessary, ellipsizing when there's not space.
Visual Aid:
And here's the layout code that I've tried to accomplish this:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
tools:text="#tools:sample/lorem"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:ellipsize="end"
android:maxLines="1"
tools:text="#tools:sample/lorem"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
As you can see, I've laid out two textviews in a horizontal chain. I've got the chain style set to packed so that they stay together. I've got the horizontal bias set to 0 so that the chain is left aligned. I've got the width set to wrap_content so that they don't stretch when the text is short, and I've also set app:layout_constrainedWidth="true" so that they don't go past their bounds when the text is long. This works almost exactly how I want except when the text in textView2 grows. As textView1 grows, it pushes textView2 to the right until it hits its constraint, at which point it ellipsizes (as expected/desired), but the same is not true for textview2. As textView2 grows, it stretches to fill the room to its right, but once it hits its constraint, instead of ellipsizing, it keeps stretching and starts to push textView1 to the left until it is no longer visible at all.
Visual aid (actual behavior):
I've tried to use things like setting layout_constraintHorizontal_weight to .5 on each view but that has no effect unless I change both view widths to 0dp (match_constraints) which breaks the scenario where both views have short text (it adds extra space between the two text views).
What it feels like is that when you combine width=wrap_content with layout_constrainedWidth=true, the weight values are ignored. Is this just a limitation of ConstraintLayout? I've spent a lot of time trying to figure out a way to make this work and right now it doesn't seem like it's possible. I've fallen back to using a LinearLayout and making some design compromises, but I'd really like to get this working if anyone has any ideas. Thanks!
If someone is still looking for an answer, I think the following code will help.
<?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="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.5"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/text2"
app:layout_constraintHorizontal_chainStyle="packed"
android:background="#ff0000"
android:text="This is what you are looking for ?"
/>
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="1"
android:maxLines="1"
android:ellipsize="end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/text1"
app:layout_constraintEnd_toEndOf="parent"
android:background="#ee0"
android:text="This is a Long Text TextView2 And not something else"
/>
</android.support.constraint.ConstraintLayout>
I needed a fix in the another answers.
And performs the following actions.
<TextView
android:id="#+id/first_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintHorizontal_bias="0" <!-- if you want gravity left -->
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/second_tv"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="ABCDEFGHIJKLMNOPQRSTU" />
<TextView
android:id="#+id/second_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/first_tv"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="VWXYZ" />
In ConstraninLayout if you want set weight such as linearLayout's weight , you should set value between 0..1 in (layout_constraintWidth_percent):
app:layout_constraintWidth_percent="1"
or
app:layout_constraintWidth_percent="0.5"
and also connect the beginning and the end of component to each other:
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintEnd_toStartOf="#id/textView2"
completed code:
<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">
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintWidth_percent="0.5"
android:background="#color/yellow_light"
android:text="This is a long text that showing in textview1.This textview is a expanded textview.if you don't set (android:maxLines='1'),the whole text will be show." />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintWidth_percent="1"
android:background="#color/orange_dark"
android:maxLines="1"
android:text="This is a long text that showing in textview2 that set (android:maxLines='1')" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am having a problem with constraint layout where the text in one text view reaching the second line will not push down another text view that is constrained to be below it, until the middle of the line.
I have built a simple layout with three text views. The first text view sits on the left and has a set width. The second one sits to the right of this, between it and its parent. The third sits below the second and to the left of the first.
I want it to look like:
However if I remove the text "Not Overlapping." I get:
The point at which it changes (The "O" in "Not Overlapping")appears to be when the length of the text fills two lines when the first Text View is not there:
So how do I change this layout so that even when I have a text view on the left side of the screen it will push Text View 3 down as soon as it reaches two lines? As opposed to pushing it down half way through the second line.
My XML:
<?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="wrap_content"
tools:context="com.testapp.myapplication.MainActivity">
<TextView
android:id="#+id/text_view_1"
android:layout_width="120dp"
android:layout_height="0dp"
android:background="#color/colorAccent"
android:text="Text View 1"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_view_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#22AA99"
android:text="Text View 2 Showing problem with overlap. Overlapping. Not O"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintLeft_toRightOf="#id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:text="Text View 3"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/text_view_2" />
</android.support.constraint.ConstraintLayout>
Thanks.
I have since found
app:layout_constrainedHeight="true"
from constraint layout 1.1.0-beta2 which enforce constraints on wrap_content. I therefore feel this is the correct solution as this also allows me to set the app:layout_constraintBottom_toBottomOf="parent" which enables a margin at the bottom of the view.
Remove this line:
app:layout_constraintBottom_toBottomOf="parent"
from your TextView with id text_view_3 like:
<TextView
android:id="#+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:text="Text View 3"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintLeft_toRightOf="#id/text_view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/text_view_2" />