Develop Reference

Last view is getting cropped in constraint layout

I want to build a listview whose every item can have different height as per text content length.
Below is the layout of my listview item. When I tried to set lengthy content on title, the bottom textview is getting cropped, however I wanted parent constraint layout to be expanded as per the text.
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="wrap_content"
android:background="#color/background"
android:minHeight="90dp"
android:padding="16dp">
<ImageView
android:id="#+id/iv_notification_thumbnail"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/ic_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tv_notification_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto"
android:text="If the cont"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#id/tv_notification_time"
app:layout_constraintStart_toEndOf="#id/iv_notification_thumbnail"
app:layout_constraintTop_toTopOf="#id/iv_notification_thumbnail" />
<TextView
android:id="#+id/tv_notification_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto"
android:text="#string/value_place_holder"
android:textColor="#color/text_desc"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_notification_title" />
<TextView
android:id="#+id/tv_notification_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/submit_to_oms"
android:textColor="#color/text_desc"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/tv_notification_title"
app:layout_constraintStart_toStartOf="#id/tv_notification_title"
app:layout_constraintTop_toBottomOf="#id/tv_notification_title"
tools:ignore="SmallSp" />
<ImageButton
android:id="#+id/ib_unread_dot"
android:layout_width="8dp"
android:layout_height="8dp"
android:background="#drawable/shape_circle_orange"
android:clickable="false"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
</androidx.constraintlayout.widget.ConstraintLayout>

0dp makes the view follow the defined constraints as priority, and when there is no left space in the Item, it still follows the constraints, making the bottom of the view at the bottom of the parent and the top on the bottom of the title. There is no space between these two constraints when the title is too big.
Instead of 0dp, change the layout_height to wrap_content and it should wrap it's content:
<TextView
android:id="#+id/tv_notification_desc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/submit_to_oms"
android:textColor="#color/text_desc"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/tv_notification_title"
app:layout_constraintStart_toStartOf="#id/tv_notification_title"
app:layout_constraintTop_toBottomOf="#id/tv_notification_title"
tools:ignore="SmallSp" />

how can I align textview in Constrainlayout

I am developing news app but I am not able to align textview so that
it is overlapping around imageview how can I show it properly
I am developing news app but I am not able to align textview so that
it is overlapping around imageview how can I show it properly
below my xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
xmlns:app="http://schemas.android.com/apk/res-auto">
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55"
android:id="#+id/guideline"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintDimensionRatio="16:9"
android:layout_margin="16dp"
android:id="#+id/articleImage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/articleAuthor"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"
android:layout_marginLeft="25dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/articleAuthor"
app:layout_constraintStart_toStartOf="#id/articleAuthor"
android:layout_marginTop="5dp"
android:maxLines="2"
android:text="Secondary"
android:id="#+id/articleTitle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/articleTitle"
app:layout_constraintStart_toStartOf="#id/articleAuthor"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:text="Tertiary"
android:id="#+id/articleTime"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/articleTime"
app:layout_constraintBottom_toBottomOf="#id/articleTime"
app:layout_constraintStart_toEndOf="#id/articleTime"
android:layout_marginStart="15dp"
android:id="#+id/articleShare"
android:background="#color/colorWhite"
android:src="#drawable/ic_share"
android:layout_marginLeft="15dp" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/articleShare"
app:layout_constraintBottom_toBottomOf="#id/articleShare"
app:layout_constraintStart_toEndOf="#id/articleShare"
android:layout_marginStart="15dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
android:layout_marginLeft="15dp" />
</android.support.constraint.ConstraintLayout>
below current screenshot of app
below screenshot which I want to achieve
screenshot I want

Add this attribute to both your articleAuthor and articleTitle TextViews:
app:layout_constraintEnd_toStartOf="#id/guideline"
Additionally, set the layout_width attribute to 0dp (i.e. "match constraints") for both of these same views:
android:layout_width="0dp"
This will cause the TextViews to be exactly as wide as the space between the left edge of the parent and the right edge of the guideline. For text that is shorter than this width, you'll get one line of left-justified text. For text that is longer than this width, you'll get multiple lines of left-justified text that wrap before the ImageView.

ConstraintLayout: Compound ImageView that stays in parent when text expands

Consider the following layout:
<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/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text" />
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/text_view"
app:layout_constraintTop_toTopOf="parent"
tools:background="#android:color/black" />
</android.support.constraint.ConstraintLayout>
The image view (or button, or any other widget, important is that it has a fixed size) is aligned right/end of a TextView with a size of wrap_content, thus, the text itself only takes the space it needs.
What I now want is, when the text expands (aka if it's longer), that the button gets aligned to the right of the parent, and the text view only gets the width that is left and gets ellipsized.
At the moment, the image view is pushed outside and the text gets ellipsized once it fills the whole parent.
I tried to fix this by adding a endToEnd="parent" constraint the the image and setting the horizontal bias to 0 (see code), but that doesn't work.
Any suggestions on what I could do instead?

In order to prevent the ImageView from getting pushed outside the parent you need to constrain the end of the TextView to the start of the ImageView to create a chain. Now to ensure that the TextView only takes the space it needs but also has its constraints enforced, you need to add app:layout_constrainedWidth="true" attribute to your TextView.
If you want the ImageView to stay immediately to the right of the TextView can use packed chain style with a horizontal bias of 0.
If you want the ImageView to be aligned to the right of the parent you can use the spread_inside chain style without bias.
The resulting XML with above changes might look like this:
<?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/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/image_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text" />
<ImageView
android:id="#+id/image_view"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/text_view"
app:layout_constraintTop_toTopOf="parent"
tools:background="#android:color/black" />
</android.support.constraint.ConstraintLayout>
EDIT: As requested in the comment, here's how it would work with a Barrier sparating the 3 TextViews and the ImageView. In this case you don't specify the constraints for the ends of the TextViews thus you no longer have them chained horizontally. Instead, you create a Barrier with the direction being the end of all TextViews that are referenced in the Barrier. This will ensure that the Barrier is always at the end of the widest TextView. The last thing to do is to constrain the start side of the ImageView to the Barrier.
Example XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="#id/text_view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text1" />
<TextView
android:id="#+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="#id/text_view3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/text_view1"
tools:text="Text2" />
<TextView
android:id="#+id/text_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/text_view2"
tools:text="Text3" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="text_view1,text_view2,text_view3" />
<ImageView
android:id="#+id/image_view"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent"
tools:background="#android:color/black" />
</android.support.constraint.ConstraintLayout>

How to give background color to Group in Constraintlayout

I have grouped 3 textview in a constraint layout. I have background to the group, but its not working.
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/text_color_3"
app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv" />
Is there anyway other round to do it.

According to the documentation, Group is only used for controlling the visibility of a set of widgets.
You can set the background to a View and constrain the view to how you desire the background to appear.
In the code sample below, after setting the background to the View with ID background, I constrained the top, left and right sides of the view to the parent and the bottom of the view to the last TextView in the group, which in this case is the TextView with ID textView3. I also added a 16dp bottom padding to textView3 so the background doesn't look weird. You could also use a Guideline for this.
Also note that the view background needs to be added before the group of views that need the background. If it's placed after the group of views, the background would be drawn over the group (and that's not what you want).
<?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"
android:background="#444444">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:text="TextView 3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2"/>
</android.support.constraint.ConstraintLayout>
I hope this helps.

Though the group is only for visibility purpose but you can easily put a background to group.
Group view doesn't have any width and height, so wrap content wouldn't be visible on actual screen.
Provide constraints to Group view and set background attributes.
Eg:
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="0dp" //match constraint
android:layout_height="0dp" //match constraint
android:background="#color/text_color_3"
app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv"
app:layout_constraintBottom_toBottomOf="#+id/frequency_tv"
app:layout_constraintEnd_toEndOf="#+id/price_tv"
app:layout_constraintStart_toStartOf="#+id/price_tv"
app:layout_constraintTop_toTopOf="#+id/price_tv" />
//below are your TextViews aligned vertically
<TextView android:id="#+id/price_tv"/>
<TextView android:id="#+id/currency_unit_tv" .../>
<TextView android:id="#+id/frequency_tv" .../>
Hope it helps :)

Group is useful for the visibility purpose in ConstraintLayout. ConstraintLayout is introduced to remove the hierarchy of the multiple ViewGroups(Layouts).
We can simply use for the background purpose. If you simply have 3 TextView and want to apply the background color to the TextView don't add it to any ViewGroup(Layout), just check this:
<?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="#AAA">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
</android.support.constraint.ConstraintLayout>
Result:
You can find the source here

Group is only used for controlling the visibility of Referenced Ids in app:constraint_referenced_ids. According to the documentation. Solution is just put views in a Viewgroup. I had to put all the views in ConstraintLayout to constrol the visibility + benefits of chaining views in CL.
<android.support.constraint.ConstraintLayout
android:id="#+id/area_range_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
visibility = "View.VISIBLE"
>
<TextView
android:id="#+id/area_title_tv"
style="#style/filter_heading_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/STR_AREA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/area_range_from"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:hint="#string/STR_MIN_AREA"
android:inputType="number"
android:maxLength="10"
android:text='#{searchQueryModel.areaMin==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMin())))}'
android:textAlignment="center"
android:textDirection="anyRtl"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/textView254"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/area_title_tv" />
<EditText
android:id="#+id/area_range_to"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="#string/STR_MAX_AREA"
android:inputType="number"
android:maxLength="10"
android:text='#{searchQueryModel.areaMax==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMax())))}'
android:textAlignment="center"
android:textDirection="anyRtl"
android:textSize="14sp"
app:layout_constraintBaseline_toBaselineOf="#+id/textView254"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView254" />
<TextView
android:id="#+id/textView254"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/STR_TO"
android:textColor="#color/text_color_3"
android:textSize="#dimen/text_size_normal"
app:layout_constraintBaseline_toBaselineOf="#+id/area_range_from"
app:layout_constraintEnd_toStartOf="#+id/area_range_to"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/area_range_from" />
<TextView
android:id="#+id/area_range_value_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text='#{`(` + areaUnit + `)`}'
android:textColor="#color/colorPrimary"
android:textSize="#dimen/text_size_normal"
app:layout_constraintBottom_toBottomOf="#+id/area_title_tv"
app:layout_constraintStart_toEndOf="#+id/area_title_tv"
app:layout_constraintTop_toTopOf="#+id/area_title_tv" />
</android.support.constraint.ConstraintLayout>

Use the new Layer that was introduced in ConstraintLayout 2

As per the official documentation, group is only used to control the visibility and you cannot change the background of the views of a particular group.
Documentation: This class controls the visibility of a set of referenced widgets. Widgets are referenced by being added to a comma separated list of ids.
To change it dynamically, use for all the three TextViews.
textView.setBackgroundColor(Color.RED);
or
textView..setBackgroundColor(Color.parseColor("#ffffff"));

ConstraintLayout last view is getting cropped

In my layout, the last view (Blue Text) is getting cropped like shown in the image below.
I have my ConstraintLayout setup like follows
<?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">
<ImageView
android:id="#+id/ivIcon"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:background="#color/blue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tvMain"
style="#style/ActorTextMainOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="28dp"
android:text="28"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tvSecondaryOne"
style="#style/ActorTextSecondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="4dp"
android:text="Jun"
app:layout_constraintBottom_toTopOf="#+id/tvSecondaryTwo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvMain"/>
<TextView
android:id="#+id/tvSecondaryTwo"
style="#style/ActorTextSecondary"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="4dp"
android:text="2017"
app:layout_constraintBottom_toBottomOf="#+id/tvMain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvMain"/>
<TextView
android:id="#+id/tvDescription"
style="#style/ActorTextDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="4dp"
android:text="#string/arrival_date"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tvMain"
app:layout_constraintTop_toBottomOf="#+id/tvSecondaryTwo"/>
</android.support.constraint.ConstraintLayout>
ConstraintLayout version being used is 1.0.2
I think I am missing something obvious here but I am unable to figure it out. How can I make the blue text at the bottom fully visible while keeping the ConstraintLayout's height to wrap_content?

Try Changing
app:layout_constraintTop_toBottomOf="#+id/tvSecondaryTwo"
to
app:layout_constraintTop_toBottomOf="#+id/tvMain"
for textview with id tvDescription
This makes the textview with id tvDescription to be below the textview with id tvMain.