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.
Related
I've had weird experience when i scroll the RecyclerView.
There is a item_layout for the RecyclerView's item.
The item layout xml consists of 3 Textview and 1 ConstraintLayout.
the rootview is ConstriantLayout.
please check this image.
All the TextView's layout_height is wrap_content and layout_width is 0dp(match_constraint) but basically TextView autosize doesn't work correctly when the view's layout_height is wrap_content.
so everytime i scroll the RecyclerView, the TextView3's characters become smaller and then get back to the maxSize.
so i changed the layout_height of TextView3 into 0dp(match_constrarint). it worked fine.
but the reason why i ask is TextView1 and TextView2 works fine even though they still have wrap_content.
how does it work???
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textSize="#dimen/detail_txt_title"
app:autoSizeMaxTextSize="#dimen/detail_txt_title"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/TextView2"
app:layout_constraintRight_toLeftOf="#id/TextView3"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
android:textSize="#dimen/detail_txt_title_small"
app:autoSizeMaxTextSize="#dimen/detail_txt_title_small"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/textView1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/daily_history_text_black"
android:textSize="#dimen/detail_txt_title"
app:autoSizeMaxTextSize="#dimen/detail_txt_title"
app:autoSizeMinTextSize="#dimen/detail_txt_summary"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toRightOf="#id/textview1"
app:layout_constraintTop_toTopOf="parent" />
See this: Autosize textview is not working It seems to be normal for autoSize text to produce inconsistent results when used with wrap_content the fact that it is working is just one of those inconsistences.
Your mistake was only in the names of the textviews and here is the fix for your question:
<?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"
>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/textView2"
app:layout_constraintRight_toLeftOf="#id/textview3"
app:layout_constraintHorizontal_weight="2.1"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
app:autoSizeTextType="uniform"
android:text="textView2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/textView1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="textView3"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="2.1"
app:layout_constraintLeft_toRightOf="#id/textView1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
or you can use this way:
<?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"
tools:context=".MainActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toTopOf="#id/textView2"
app:layout_constraintRight_toLeftOf="#id/textview3"
app:layout_constraintHorizontal_weight="2.1"
android:text="textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:textColor="#color/black"
app:autoSizeTextType="uniform"
android:text="textView2"
/>
</LinearLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/textview3"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:text="textView3"
app:autoSizeTextType="uniform"
/>
</LinearLayout>
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 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>
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" />
I want the TextView to be able to warp its text when it gets too long.
I am using chain method for the layout. But didn't get what I want.
This is what it looks like:
This is what I want to achieve:
<?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:layout_gravity="center_vertical"
android:background="#drawable/bg_trans_bg_light_top_bdr"
android:orientation="horizontal"
tools:showIn="#layout/fragm_edit_split">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iv_user_photo"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_margin="16dp"
android:src="#drawable/homer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
app:layout_constraintVertical_weight="1"
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="This is a very long long long long name"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/iv_user_photo"
app:layout_constraintEnd_toStartOf="#+id/v_space"
app:layout_constraintStart_toEndOf="#+id/iv_user_photo"
app:layout_constraintTop_toTopOf="#+id/iv_user_photo" />
<android.support.v4.widget.Space
android:id="#+id/v_space"
android:layout_width="0dp"
android:layout_height="1dp"
app:layout_constraintEnd_toStartOf="#+id/tv_dollar_sign"
app:layout_constraintStart_toEndOf="#+id/tv_name" />
<TextView
android:id="#+id/tv_dollar_sign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$"
android:textColor="#color/text_light"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/et_amount"
app:layout_constraintEnd_toStartOf="#+id/et_amount"
app:layout_constraintStart_toEndOf="#id/v_space"
app:layout_constraintTop_toTopOf="#+id/et_amount" />
<EditText
android:id="#+id/et_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="#null"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:inputType="number"
android:textColor="#000"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_dollar_sign"
app:layout_constraintTop_toTopOf="parent"
tools:text="20.00" />
</android.support.constraint.ConstraintLayout>
By using RelativeLayout there is no issue. But I prefer ConstraintLayout.
OK. Found out after 10 minutes. Just set the width to 0dp for the TextView..
Add these attributes to your TextView:
<TextView
app:layout_constraintVertical_weight="1"
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="This is a very long long long long name"
android:textColor="#000"
android:textSize="12sp"
android:ellipsize="end"
android:lines="1"
app:layout_constraintBottom_toBottomOf="#+id/iv_user_photo"
app:layout_constraintEnd_toStartOf="#+id/tv_dollar_sign"
app:layout_constraintStart_toEndOf="#+id/iv_user_photo"
app:layout_constraintTop_toTopOf="#+id/iv_user_photo" />
android:lines="1"
android:ellipsize="end"
add above line in the textView .should do the trick
you can also make use of android:maxEms="10" but layout_width should be wrap_content in order to work