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>
Related
I have an issue with constraint Layout overlapping. Basically, I have an image on the left and text view on the right. I am trying to have the text in the text view to appear in the centre of the screen, and it's appearing as expected. But when the text size is too big, the text view is overlapping with the image view.
If I set the TextView left constraint to the right of ImageView, the overlapping is not occurring. But when the text is small, the text is not appearing in the centre of the screen.
I tried to implement solutions from this post. But, it's not working for me. Kindly help me with this issue.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgBack"
android:layoutWidth="wrap_content"
android:layoutHeight="match_parent"
android:contentDescription="#null"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:text="I have a problem when the text is so big. It's overlapping"
android:fontFamily="#font/proxima_nova_semibold"
android:gravity="center"
android:lines="1"
android:textColor="#color/white"
android:textSize="#dimen/header_sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Please try this solution.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgBack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tvUserName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/backgrounds/scenic" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="200dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="center"
android:lines="1"
android:text="I have a problem when the text is so big. It's overlapping"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It doesn't overlap anymore:
<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:orientation="horizontal">
<ImageView
android:id="#+id/imgBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="I have a problem when the text is so big. It's overlapping"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imgBack"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Beside the issues the other user respond, i.e app:layout_constraintStart_toStartOf="parent" or wrap_content to the ImageView and the like, these attributes:
android:layoutWidth="wrap_content"
android:layoutHeight="match_parent"
Had typo.
I have a dialog layout that has a Title, Message and two buttons inside of it. I am using a Constraint layout at the moment.
I want the dialog to behave dynamically to the size of the Title, but when the Title's width is smaller than the combined width of the buttons than I want the dialog to adjust its size to the width of the Buttons. While at the same time keeping the Message displayed properly as well.
What happens now is that when the Title width is smaller than the combined width of the Buttons, the Buttons will be overlapped and the Message is cropped to the same size as the title.
This is my current XML layout file.
<?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="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dialog_title_background"
tools:ignore="SmallSp">
<View
android:id="#+id/background_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="57dp"
app:layout_constraintStart_toStartOf="parent"
android:background="#drawable/button_message_dialog_background"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/ubuntu_light"
android:layout_marginStart="37dp"
android:layout_marginEnd="37dp"
android:textColor="#color/color_primary_interactive_theme1"
android:textSize="18sp"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/background_gradient"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="37dp"
android:layout_marginTop="19dp"
android:layout_marginEnd="37dp"
android:fontFamily="#font/ubuntu_light"
android:textColor="#color/dialog_body_text_color"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/background_gradient"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="37dp"
android:paddingEnd="37dp"
android:paddingBottom="30dp"
app:layout_constrainedWidth="true"
android:paddingTop="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/message">
<TextView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dialog_button_background"
android:fontFamily="#font/ubuntu_light"
android:paddingStart="13dp"
android:paddingTop="3dp"
android:paddingEnd="13dp"
android:paddingBottom="3dp"
android:textColor="#color/white"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dialog_button_background"
android:fontFamily="#font/ubuntu_light"
android:layout_marginStart="5dp"
android:paddingStart="13dp"
android:paddingTop="3dp"
android:paddingEnd="13dp"
android:paddingBottom="3dp"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="#id/button1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Any feedback is greatly appreciated.
UPDATE
I have added two examples to explain my problem more clearly.
Dialog with long title
Dialog with short title
In the first example the Title width is longer than the combined width of the Buttons, if this is the case the layout should adjust its size to the width of the Title and Button 2 should align its end with the end of the title.
In the second example the title is shorter than the combined width of the Buttons, if this is the case the layout should adjust its size to the width of the 2 Buttons.
In both cases the Message can also be a long string but it can be cut of but should be displayed properly.
Thanks in advance.
Solved using Chains feature available in ConstraintLayout
Find full documentation here : Control linear groups with a chain
Here's your answer
<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="wrap_content"
android:layout_height="wrap_content"
android:background="#efefef"
tools:ignore="SmallSp">
<View
android:id="#+id/background_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="57dp"
android:background="#a1a1a1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="37dp"
android:layout_marginEnd="37dp"
android:textColor="#F44336"
android:textSize="18sp"
app:layout_constrainedWidth="true"
android:text="Title Text"
app:layout_constraintBottom_toTopOf="#id/background_gradient"
app:layout_constraintEnd_toEndOf="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:layout_marginStart="37dp"
android:layout_marginTop="19dp"
android:layout_marginEnd="37dp"
android:textColor="#000000"
android:textSize="13sp"
android:text="Message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/background_gradient" />
<TextView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:paddingStart="13dp"
android:paddingTop="3dp"
android:paddingEnd="13dp"
android:text="Button 1"
android:paddingBottom="3dp"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/message" />
<TextView
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:paddingStart="13dp"
android:paddingTop="3dp"
android:paddingEnd="13dp"
android:text="Button 2"
android:paddingBottom="3dp"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBaseline_toBaselineOf="#id/button1"
app:layout_constraintStart_toEndOf="#id/button1" />
</androidx.constraintlayout.widget.ConstraintLayout>
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>
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.