I have a layout consisting of 2 textviews, aligned horizontally. The right textview should always display the whole text, and the left one should expand to take whatever space it needs, ellipsizing if it does not fit. When both views fit, the views should only take the minimum space.
These images illustrate what I'm after:
When all text fits:
When the left text is too long:
I have this starting layout, but I can't get it to work for both scenarios at the same time.
<?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">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:lines="1"
android:textSize="24sp"
app:layout_constraintHorizontal_chainStyle="packed"
android:text="Left text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Right text"
android:textSize="24sp"
app:layout_constraintStart_toEndOf="#+id/left"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
This can be achieved by creating a packed chain with a bias of 0 to make it start-aligned and setting app:layout_constrainedWidth="true" for both TextViews so that their constraints are respected when wrapping content.
<?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">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:ellipsize="end"
android:lines="1"
android:textSize="24sp"
android:text="Left text"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Right teasdasda asdsdsddddddd"
android:textSize="24sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/left"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Related
I have 3 text views placed horizontally. Leftmost one and rightmost one are of fixed size, but middle one can vary in length significantly. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:text="LEFT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toEndOf="#+id/left"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/message"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
This results in following layout:
But if we have short text in the middle, like this:
tools:text="#tools:sample/lorem"
it will look:
Rightmost view is "glued" to the end.
I want it to follow the middle view, like this:
How can it be achieved?
You should use app:layout_constraintWidth_default="wrap" for the middle view and app:layout_constraintHorizontal_chainStyle="packed". Also don't forget to set app:layout_constraintHorizontal_bias="0.0" for the first view to align the whole layout to the start of the screen. Here how the whole layout should look:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="LEFT"
app:layout_constraintEnd_toStartOf="#id/message"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#id/apply_text"
app:layout_constraintStart_toEndOf="#id/left"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="#tools:sample/lorem" />
<TextView
android:id="#+id/apply_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="RIGHT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/message"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is the result:
It is quite a challenge. AFAIK, To do what you want, you have to change the width of the middle TextView to wrap_content and remove right TextView constraint with parent's right.
You could try something like calculating width of left and right then if the total width of the device is more than or equal left + right + middle then you switch from
to this
I have been facing a problem and believe it is a set of multiple incorrect positioning choices, some information before:
1 - Drawable image has larger width and height than it fits.
2 - TextView text is dynamic but it should never be more than one line, if it is more than one line it should be "cut".
I have the following code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/icon"
android:text="my small text"
android:lines="1"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/description"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/icon"
android:text="description text"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/icon"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintTop_toTopOf="#id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/description"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="#drawable/ic_print"
app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"
android:padding="8dp"
android:layout_width="0dp"
android:layout_height="0dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Some explanations: As the image is very large and I need it positioned to the left I use android:scaleType="fitEnd" and android:padding="8dp".
The result is satisfactory:
Problem:
When I put very large text in my title I would like it to "push" ImageView to its limit when it is actually limiting itself to 50%.
It's like my ImageView has a "fixed" width when I'm actually using "match contraints with 0dp"
I already tried to add app:layout_constrainedWidth="true" to id: title and id: description (unsuccessfully)
Add a guideline and constrain your title instead of constraining it to the icon. That way when it reaches the guideline it will stop increasing and the icon that’s still constrained to the title will keep its minimum space. The ellipsize property will add the dots at the end of the title when it gets too big. All you need to do is decide what the minimum space is going to be for your icon, by adjusting the percentage on the guideline.
<?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">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="my small text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="description text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/title" />
<ImageView
android:id="#+id/icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:padding="8dp"
android:scaleType="fitEnd"
android:src="#drawable/ic_print"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintTop_toTopOf="#id/title" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT after clarification in comments:
This is the proposed Barrier solution.
<?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">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="my small text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="#id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="description text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/title" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:src="#drawable/app_logo"
app:layout_constraintBottom_toBottomOf="#id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintTop_toTopOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
This is the code I'm using:
<?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="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.
There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to align three TextViews horizontally (as the title may suggest), but even after chaining they together and using app:layout_constrainedWidth="true" they're still being pushed out of the screen, strangely only by the left side when the middle or the last one grows large. Notice that I'm setting the android:maxLines="1" and android:ellipsize="end" and aligning they at the start of the screen, not sure if it matters though.
I also tried to limit their sizes, but on the case where there are two small texts and a very large one the large one will be ellipsized even when the layout still have some space left.
Sample layout:
<?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"
android:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
tools:text="Another TextView " />
<TextView
android:id="#+id/orangetextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Another TextView" />
</android.support.constraint.ConstraintLayout>
These are some cases using the sample layout
None of the TextViews are ellipsizing:
The first TextView is ellipsizing:
The last TextView don't ellipsize and pushes the other ones out of the screen:
These are some possible solutions that aren't covering all of the cases
Using android:maxWidth="90dp" to prevent the TextView to grow, but also limiting the text unnecessarily:
Using android:layout_width="0dp" to enable "match_constraint" is not a optimal solution as well, since the layout will reserve a third of the display width for each TextView, even if the text is smaller than that:
Use a Flexbox
<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="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="nowrap"
app:dividerDrawable="#drawable/ic_divider"
app:showDivider="middle">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:textColor="#android:color/holo_green_dark"
android:ellipsize="end"
android:text="Text View"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#android:color/holo_blue_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:text="Another TextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:ellipsize="end"
android:text="Another TextView"/>
</com.google.android.flexbox.FlexboxLayout>
Output of this layout:
You can use linear layout instead. When the text grows it will ellipsized end with ...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
tools:text="TextView" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
tools:text="Another TextView " />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
tools:text="Another TextView" />
</LinearLayout>
OUTPUT:
Can you try this one (just make sure to replace androidx.constraintlayout.widget.ConstraintLayout with android.support.constraint.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="First Very Long Text 123456789" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Second Very Long Text 123456789" />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Third Very Long Text 123456789" />
</androidx.constraintlayout.widget.ConstraintLayout>
Ellipsize will work as expected.
Hi I have made a custom listview where each row in the row item layout has three textviews. I am fetching data from the server and displaying in the listview. When there is a large chunk of text in the first textview, the first textview starts overlapping the other two textviews. I want all the textviews in one line. How do I do this?
This is my listview row item layout:
<?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"
android:padding="8dp">
<TextView
android:id="#+id/ingredientName"
style="#style/MyTextFont"
android:lines="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:ellipsize="none"
android:scrollHorizontally="false"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/quantity"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/measureTv"
app:layout_constraintHorizontal_bias="0.94"
app:layout_constraintStart_toEndOf="#+id/ingredientName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/measureTv"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You can use LinearLayout in place of ConstraintLayout with layout_weight.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="#+id/ingredientName"
style="#style/MyTextFont"
android:lines="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:ellipsize="none"
android:scrollHorizontally="false"
android:layout_weight:"1"
/>
<TextView
android:id="#+id/quantity"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:layout_weight:"1" />
<TextView
android:id="#+id/measureTv"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:layout_weight:"1"/>
</LinearLayout>
You should use these below attributes in your TextView tag.
android:maxLines="1"
android:ellipsize="end"
Or
In Case you want to scroll the Text from right to left in the same
TextView (to see complete Text), try using this below code :-
android:ellipsize="marquee"
When using constrainLayouts, make sure you give width or height as 0dp if you are making constraints on both the sides.
In your case the textview is wrap content and it will overlap other textviews no matter what, simply change it to 0dp and it will work perfectly.
Making constraint will lead to multiple lines text, if you dont want that define the maxLines in the textview and use ellipse end as well
<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"
android:padding="8dp">
<TextView
android:id="#+id/ingredientName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="16dp"
android:lines="3"
android:scrollHorizontally="false"
android:text="TextVidasdsdadadsadadasdaew"
app:layout_constraintEnd_toStartOf="#+id/quantity"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/quantity"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/measureTv"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ingredientName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/measureTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="TextViedssadadasdasdasdasdasdw"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/quantity"
app:layout_constraintTop_toTopOf="parent" />