ConstraintLayout cuts off too long text in TextView - android

I'm trying to make a master-detail view and I have a ListView with items of following layout:
<?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">
<TextView
android:id="#+id/tv_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/start_point"
app:layout_constraintStart_toStartOf="#+id/tv_date"
app:layout_constraintTop_toBottomOf="#+id/tv_date_val" />
<TextView
android:id="#+id/tv_to_vall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/end_point"
android:textSize="18sp"
android:baselineAligned="false"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_to"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/end_point"
app:layout_constraintStart_toStartOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_from_vall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:gravity="center"
android:text="#string/start_point"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_from"
app:layout_constraintStart_toEndOf="#+id/tv_from"
app:layout_constraintTop_toTopOf="#+id/tv_from" />
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="#string/date"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_date_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/date"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
which produces:
and the text of two last lines of list item on right side is cut off. I would like line break if text is too long.
I tried android:lines="4", android:singleLine = "false"
Is there a way to fix it in TextView without changing the whole layout?


you need to change
Change right text view width with 0dp. You are using wrap_content and because of that this issue generate.
Change top to bottom constraint to all right textview, because when text increase it will overlap in your constraint.
<?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/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="date"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_date_val"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="start"
android:text="date text date text date text date text date text date text date text date text"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="start_point"
app:layout_constraintStart_toStartOf="#+id/tv_date"
app:layout_constraintTop_toTopOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_from_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:gravity="start"
android:text="start_point start_point start_point start_point start_point start_point start_point"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/tv_date_val"
app:layout_constraintStart_toEndOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_date_val" />
<TextView
android:id="#+id/tv_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="end_point"
app:layout_constraintStart_toStartOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_to_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="start"
android:text="end_point end_point end_point end_point end_point end_point end_point"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_to"
app:layout_constraintEnd_toEndOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall" />
</androidx.constraintlayout.widget.ConstraintLayout>


You can solve this by:
Using a match constraints width of each TextView which is (0dp) instead of
wrap_content
Add end constraint to the end of the parent
app:layout_constraintEnd_toEndOf="parent"
So your layout would be:
<?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">
<TextView
android:id="#+id/tv_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/start_point"
app:layout_constraintStart_toStartOf="#+id/tv_date"
app:layout_constraintTop_toBottomOf="#+id/tv_date_val" />
<TextView
android:id="#+id/tv_to_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/end_point"
android:textSize="18sp"
android:baselineAligned="false"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_to"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/end_point"
app:layout_constraintStart_toStartOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_from_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:gravity="center"
android:text="#string/start_point"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_from"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_from"
app:layout_constraintTop_toTopOf="#+id/tv_from" />
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="#string/date"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_date_val"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/date"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.

Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

Android constraint layout textview to wrap context and show ellipse if no more space

I want to use a constraint layout that will be able to satisfy
(1) wrap the content of 2nd TextView
(2) extend the width of the 2nd TextView until it shows ellipses when there are no more spaces.
All these 3 TextViews are on the same line and the background colours are much needed.
<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"
tools:context=".MainActivity">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#android:color/darker_gray"
android:padding="4dp"
android:text="Text View 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#android:color/holo_green_light"
android:ellipsize="end"
android:gravity="fill"
android:maxLines="1"
android:padding="4dp"
android:text="Short Text "
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintStart_toEndOf="#+id/text1"
app:layout_constraintTop_toTopOf="#+id/text1" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_orange_dark"
android:padding="4dp"
android:text="Text View 3"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text1" />
</androidx.constraintlayout.widget.ConstraintLayout>

Constrain the middle text view to the last and use layout_constrainedWidth="true" with the width set to wrap_content instead of 0dp, as well as setting layout_constraintHorizontal_bias="0.0" so it aligns to the first view.
Short text, Long text
<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">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#android:color/darker_gray"
android:padding="4dp"
android:text="Text View 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#android:color/holo_green_light"
android:ellipsize="end"
android:maxLines="1"
android:padding="4dp"
android:text="Short text"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintEnd_toStartOf="#+id/text3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/text1"
app:layout_constraintTop_toTopOf="#+id/text1" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_orange_dark"
android:padding="4dp"
android:text="Text View 3"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text1" />
</androidx.constraintlayout.widget.ConstraintLayout>

how to align a text view in a listView?

I am not getting proper alignment even though I constrained the textviews.My text is running over the other text which looks messy.
Here is the screenshot of that.
I want it to align properly even if the text goes some large.Please suggest some ways to do that.
Here is the code for my 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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/magnitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
android:maxWidth="135dp"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/date"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.967"
app:layout_constraintStart_toEndOf="#+id/magnitude"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:text="May 20,2016" />
</android.support.constraint.ConstraintLayout>
The New layout that I want is in this image

You can use this library to fit text
build gradle file(app):
implementation 'me.grantland:autofittextview:0.2.+'
Usage in layout
<me.grantland.widget.AutofitTextView
android:id="#+id/question_title"
android:layout_width="match_parent"
android:layout_height="125dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="8dp"
android:text="Post samething"
android:textAlignment="center"
android:textColor="#color/icons"
android:textStyle="bold"
android:maxLines="2"
android:textSize="30sp"
autofit:minTextSize="16sp"
/>
You can read more from this link
Hope this helps

I have re created your layout please use below
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum=".6"
android:padding="15dp"
android:orientation="horizontal">
<TextView
android:id="#+id/magnitude"
android:layout_width="0dp"
android:layout_weight=".1"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
android:textStyle="bold"
android:textColor="#color/colorPrimary"
tools:text="7.5" />
<TextView
android:id="#+id/place"
android:layout_width="0dp"
android:layout_weight=".3"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="5dp"
tools:text="Rio de Janerio" />
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_weight=".2"
android:padding="5dp"
android:layout_height="wrap_content"
android:textSize="20sp"
tools:text="May 20,2016" />
</LinearLayout>

if you are working with constraint layout you can use the baseline of the text view for this purpose
Baseline alignment
Align the text baseline of a view to the text baseline of another view.
See the related section in the documentation in order to learn how to use the baseline allinment
https://developer.android.com/training/constraint-layout/#baseline

ConstraintLayout sub textview cut off text

I layout the cell of RecyclerView with ConstraintLayout, and the element TextView (id:cell_summary) cut off its long text;
here is the cell layout xml code:
<?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="wrap_content">
<TextView
android:id="#+id/cell_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:maxLines="2"
android:text="And we find ourselves cruelly cut off from the wireless world"
android:textColor="#android:color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/cell_thumb"
android:layout_width="120dp"
android:layout_height="88dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:background="#cccccc"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/cell_title" />
<TextView
android:id="#+id/cell_datetime"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:text="2Hours"
android:textColor="#999999"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/cell_thumb"
app:layout_constraintLeft_toRightOf="#id/cell_thumb"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/cell_summary"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="12dp"
android:text="But then we were not being singled out, the entire country lives in a bubble of unreality, cut off from the outside world and watched by an army of informers."
android:ellipsize="end"
app:layout_constraintBottom_toTopOf="#id/cell_datetime"
app:layout_constraintLeft_toLeftOf="#id/cell_datetime"
app:layout_constraintRight_toRightOf="#id/cell_datetime"
app:layout_constraintTop_toTopOf="#id/cell_thumb" />
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="16dp"
android:background="#dddddd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/cell_thumb" />
</android.support.constraint.ConstraintLayout>
If I add android:maxLines="3", the TextView will work correctly. But here I need an unbounded TextView.

remove android:layout_marginBottom="12dp" from cell_summary

Try below code this will help you out :-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/cell_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:text="And we find ourselves cruelly cut off from the wireless world"
android:textColor="#android:color/black"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/cell_thumb"
android:layout_width="120dp"
android:layout_height="88dp"
android:layout_gravity="center_vertical"
android:background="#cccccc"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/cell_summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:text="But then we were not being singled out, the entire country lives in a bubble of unreality, cut off from the outside world and watched by an army of informers." />
<TextView
android:id="#+id/cell_datetime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2Hours"
android:textColor="#999999"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#dddddd" />

Why does my ScrollView in my ConstraintLayout keep having no height instead of following the constraints?

I am having issues with my ScrollView having no height in my fragment. I'm adding views to my LinearLayout nested in my ScrollView.
If I set the height of the ScrollView to 0dp then I don't see the views in my LinearLayout.
If I set the height of the ScrollView to 410dp then I see the views.
I am just trying to fill up the bottom part of the screen.
What am I missing?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/seriesTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/seriesTitleEditBox"
android:text="Series Title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<EditText
android:id="#+id/seriesTitleEditBox"
android:layout_width="390dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleTextView"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleTextView"
/>
<TextView
android:id="#+id/tvmdIDTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/tvmdIDEditBox"
android:text="TVMD ID"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleEditBox"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleEditBox"
/>
<EditText
android:id="#+id/tvmdIDEditBox"
android:layout_width="200dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/tvmdIDTextView"
app:layout_constraintTop_toBottomOf="#+id/tvmdIDTextView"
/>
<Switch
android:id="#+id/finishedSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tvmdIDTextView"
app:layout_constraintRight_toRightOf="parent"
android:text="Finished? "/>
<TextView
android:id="#+id/detailsHeaderBackgroundTextView"
android:text=" "
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="#color/colorPrimary"
app:layout_constraintTop_toBottomOf="#+id/finishedSwitch"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<TextView
android:id="#+id/detailHeaderTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:background="#color/colorPrimary"
android:text="Season 99"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="#+id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView"
/>
<ImageButton
android:id="#+id/addViewing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/colorPrimary"
android:contentDescription="Add Button"
android:onClick="addViewingClickHandler"
android:src="#android:drawable/ic_menu_add"
app:layout_constraintRight_toRightOf="#id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView"/>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/detailsHeaderBackgroundTextView"
app:layout_constraintBottom_toBottomOf="parent"
>
<LinearLayout
android:id="#+id/detailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
/>
</ScrollView>
</android.support.constraint.ConstraintLayout>

Just change your scrollview to like below
<?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/seriesTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/seriesTitleEditBox"
android:text="Series Title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/seriesTitleEditBox"
android:layout_width="390dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleTextView"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleTextView" />
<TextView
android:id="#+id/tvmdIDTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:labelFor="#+id/tvmdIDEditBox"
android:text="TVMD ID"
app:layout_constraintLeft_toLeftOf="#+id/seriesTitleEditBox"
app:layout_constraintTop_toBottomOf="#+id/seriesTitleEditBox" />
<EditText
android:id="#+id/tvmdIDEditBox"
android:layout_width="200dp"
android:layout_height="40dp"
android:imeOptions="actionNext"
android:inputType="textCapWords"
android:selectAllOnFocus="true"
app:layout_constraintLeft_toLeftOf="#+id/tvmdIDTextView"
app:layout_constraintTop_toBottomOf="#+id/tvmdIDTextView" />
<Switch
android:id="#+id/finishedSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Finished? "
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvmdIDTextView" />
<TextView
android:id="#+id/detailsHeaderBackgroundTextView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="#color/colorPrimary"
android:text=" "
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/finishedSwitch" />
<TextView
android:id="#+id/detailHeaderTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:background="#color/colorPrimary"
android:text="Season 99"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintLeft_toLeftOf="#+id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView" />
<ImageButton
android:id="#+id/addViewing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/colorPrimary"
android:contentDescription="Add Button"
android:onClick="addViewingClickHandler"
android:src="#android:drawable/ic_menu_add"
app:layout_constraintRight_toRightOf="#id/detailsHeaderBackgroundTextView"
app:layout_constraintTop_toTopOf="#id/detailsHeaderBackgroundTextView" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailsHeaderBackgroundTextView">
<LinearLayout
android:id="#+id/detailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--SAMPLE TEXTVIEW-->
<android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello" />
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

The issue came from a parent layout having the height set to wrap_content, instead of match_parent.

Categories

Resources