I am trying to use constraint flow. I need to arrange the TextView one after another on the screen.
Here is my code:
<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:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[AAAAAAAA]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[BBBBBBBB]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[CCCCCCCC]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[DDDDDDDD]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[EEEEEEEE]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_horizontalStyle="packed"
android:layout_marginEnd="20dp"
app:flow_verticalBias="0"
app:flow_wrapMode="chain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginEnd="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Everything works well except for the last TextView. Since the text is very long, some of the text goes off the screen (See the picture below). I am trying to set margin, but it doesn't work.
I added TextView in xml for clarity. I need to add them dynamically at runtime, so I can't set the width of my TextView to match_parent, because I don't know if the content will fit within the screen.
Please help me. I need a margin on the right, regardless of the length of the text in the TextView.
Note: TextViews can also be added dynamically. I need add TextView at runtime. Therefore, I cannot set the width of the TextView to match_parent in runtime, because I don’t know if the text can fit within the width of the screen or not.
Here is my code to add View programatically:
private fun addViews() {
val list = generateChipButtons()
list.forEach { button ->
val view = LayoutInflater.from(baseContext).inflate(R.layout.chip_view, constraintContainer, false).apply {
id = View.generateViewId()
this.findViewById<TextView>(R.id.tvChipText).text = button.text
}
constraintContainer.addView(view)
flowView.addView(view)
}
}
Set 0dp at width and add a contrast to set the size ratio for width. The code above is shown with wrap_content, with the width exceeding the text size.
<TextView
android:id="#+id/text6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="[FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]"
tools:ignore="MissingConstraints"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
Use match_parent for TextView text6. Try below code
<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:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[AAAAAAAA]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[BBBBBBBB]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[CCCCCCCC]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[DDDDDDDD]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[EEEEEEEE]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_horizontalStyle="packed"
app:flow_verticalBias="0"
app:flow_wrapMode="chain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_goneMarginEnd="20dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Just set the width match_parent of textView #+id/text6
<TextView
android:id="#+id/text6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFaslkfjadflskjflasdkjfsdlajkfasdlfjkasdlfjkaslkdfjasdflkjasdfasdlfjksdafFFFFsdflkfdaslkfjsdafkljsdlafkjdasfljk]"
tools:ignore="MissingConstraints" />
i Have similar issue i just set to match parent and margin working fine code snippet
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/_20sdp"
android:layout_marginBottom="#dimen/_22sdp"
android:fontFamily="#font/font_muli"
android:text="#string/welcome_msg"
android:textColor="#color/white"
android:textSize="#dimen/_11sdp"
app:layout_constraintBottom_toTopOf="#+id/btn_login"
app:layout_constraintEnd_toEndOf="#+id/btn_login"
app:layout_constraintStart_toStartOf="#+id/btn_login" />
Where btn_login is MaterialButton.
Related
I am trying to learn constraint layout by converting a list item from a linear + relative layout. I have a checkbox and 3 text views arranged in a line followed by a recyclerview underneath.
Phone preview:
Tablet preview:
Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_qty"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/line_item_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="8dp"
android:textAppearance="?attr/textAppearanceBody2"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintStart_toEndOf="#+id/checkBox"
tools:text="5 x" />
<TextView
android:id="#+id/line_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody2"
app:layout_constraintEnd_toStartOf="#+id/line_item_price"
app:layout_constraintStart_toEndOf="#+id/line_item_qty"
app:layout_constraintTop_toTopOf="parent"
tools:text="Club sandwich with ranch dressing and extra mustard" />
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
tools:text="€4.50" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/item_mods_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line_item_name"
tools:itemCount="3"
tools:listitem="#layout/item_line_modifier"
tools:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see the preview renders fine but when I run the code, the name of the item is gone (it's width needs to be 0dp, if it's wrap_content then on phones it just previews as one line of text and overlaps the qty and price text views).
Image from device (tablet):
Is it because I am aligning baselines to the name and the name itself has no bottom constraint?
Add app:layout_constraintStart_toEndOf="line_item_name" to your line_item_price, so your price will be always come after your item name
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="line_item_name" //Add this
tools:text="€4.50" />
It's good that you are learning new things and trying to implement them.
Below is the code that will give you your desired output.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/line_item_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="8dp"
app:layout_constraintTop_toTopOf="#+id/checkBox"
app:layout_constraintBottom_toBottomOf="#+id/checkBox"
app:layout_constraintStart_toEndOf="#+id/checkBox"
android:textAppearance="?attr/textAppearanceBody2"
android:textStyle="bold"
tools:text="5 x" />
<TextView
android:id="#+id/line_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody2"
app:layout_constraintEnd_toStartOf="#+id/line_item_price"
app:layout_constraintStart_toEndOf="#+id/line_item_qty"
app:layout_constraintTop_toTopOf="#+id/line_item_qty"
app:layout_constraintBottom_toBottomOf="#+id/line_item_qty"
tools:text="Club sandwich with ranch dressing and extra mustard" />
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintTop_toTopOf="#+id/line_item_name"
app:layout_constraintBottom_toBottomOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
tools:text="€4.50" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/item_mods_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/checkBox"
tools:itemCount="3"
tools:listitem="#layout/item_line_modifier"
tools:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>
Do let me know if you have any queries on this.
Output :
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.
I need some help regarding an Android layout.
I have the following 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.725" />
<TextView
android:id="#+id/data_field_1_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dip"
android:layout_marginTop="10dip"
app:layout_constraintLeft_toLeftOf="#id/guideline"
app:layout_constraintRight_toLeftOf="#id/guideline2"
app:layout_constraintTop_toTopOf="parent"
tools:text="ACTIVE" />
<TextView
android:id="#+id/data_field_1_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dip"
android:layout_toEndOf="#id/data_field_1_name"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_1_name"
app:layout_constraintLeft_toLeftOf="#id/guideline2"
app:layout_constraintRight_toRightOf="parent"
tools:text="1750" />
<TextView
android:id="#+id/data_field_2_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dip"
android:layout_marginTop="8dip"
app:layout_constraintLeft_toLeftOf="#id/guideline"
app:layout_constraintRight_toLeftOf="#id/guideline2"
app:layout_constraintTop_toBottomOf="#id/data_field_1_name"
tools:text="ACTIVE" />
<TextView
android:id="#+id/data_field_2_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dip"
android:layout_toEndOf="#id/data_field_2_name"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_2_name"
app:layout_constraintLeft_toLeftOf="#id/guideline2"
app:layout_constraintRight_toRightOf="parent"
tools:text="1750" />
<TextView
android:id="#+id/data_field_3_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dip"
android:layout_marginTop="8dip"
app:layout_constraintLeft_toLeftOf="#id/guideline"
app:layout_constraintRight_toLeftOf="#id/guideline2"
app:layout_constraintTop_toBottomOf="#id/data_field_2_name"
tools:text="ACTIVE" />
<TextView
android:id="#+id/data_field_3_value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dip"
android:layout_toEndOf="#id/data_field_3_name"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_3_name"
app:layout_constraintLeft_toLeftOf="#id/guideline2"
app:layout_constraintRight_toRightOf="parent"
tools:text="1750" />
<TextView
android:id="#+id/value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dip"
android:layout_marginStart="15dip"
android:textSize="25sp"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_2_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
tools:text="17.40" />
<ImageView
android:id="#+id/flag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginTop="2dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="#+id/unit"
app:layout_constraintStart_toStartOf="#+id/unit"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/unit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:gravity="center_horizontal"
app:layout_constraintBaseline_toBaselineOf="#id/value"
app:layout_constraintStart_toEndOf="#+id/value"
tools:text="KG" />
<TextView
android:id="#+id/label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dip"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_3_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/guideline"
tools:text="TOTAL" />
</android.support.constraint.ConstraintLayout>
The output is:
My problem is: If the main value(17.40) is too large, that value should be "ellipsized" to end, but it goes over the "Active" text.
The input for large text is:
I need something like that for large value:
PS: the unit and and the flag should be always displayed at the end of the main value.
Could you please help me with suggestions? I tried a lot of ideas, but didn't find a solution.
Set Children Layout Width to 0dp
android:layout_width="0dp"
Set Right_toRightOf andLeft_toRightOf
app:layout_constraintLeft_toRightOf="#+id/listingImageView"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
First, you need to add android:ellipsize="end" and android:maxLines="1" to your TextView android:id="#+id/value". Then you need to add value and unit into a horizontal chain. Connect start of the chain to the parent start and end of the chain to start/end of the Guideline android:id="#+id/guideline".
After that value and unit will have the same width and fill whole space between the parent start and the Guideline android:id="#+id/guideline". To make the width different you can set android:layout_width="wrap_content" to unit or you can play with app:layout_constraintHorizontal_weight for both
The code can be like that:
<TextView
android:id="#+id/value"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dip"
android:layout_marginStart="15dip"
android:textSize="25sp"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_2_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="#+id/unit"
tools:text="17.40000000" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:gravity="center_horizontal"
android:maxLines="1"
android:layout_marginEnd="8dp"
app:layout_constraintBaseline_toBaselineOf="#id/value"
app:layout_constraintStart_toEndOf="#+id/value"
app:layout_constraintEnd_toStartOf="#+id/guideline"
tools:text="KG" />
It will look like this:
For that
1) you will have to specify fixed length for that, textview width 0dp won't work.
2) you need ellipsize attribute set to "end" to the textview.
3) along with maxlines attribute set to 1.
Tested this and works fine.
You can keep fix width as you like..
<TextView
android:id="#+id/value"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dip"
android:ellipsize="end"
android:maxLines="1"
android:layout_marginStart="15dip"
android:textSize="25sp"
app:layout_constraintBaseline_toBaselineOf="#id/data_field_2_name"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
tools:text="17.40000000000000" />
Assuming you have your value TextView set up to ellipsize itself, you can solve this by programmatically setting the TextView's maximum width after the ConstraintLayout finishes laying out all the views.
I created a tiny app that just inflates the layout you posted in your question (though I had to change the flag to an image I had). I added these attrs to the value view:
android:maxLines="1"
android:ellipsize="end"
And this is my Java code:
public class MainActivity extends AppCompatActivity {
private TextView value;
private TextView data2;
private TextView unit;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
value = (TextView) findViewById(R.id.value);
data2 = (TextView) findViewById(R.id.data_field_2_name);
unit = (TextView) findViewById(R.id.unit);
value.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
value.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
else {
value.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
setMaxWidth();
}
});
}
private void setMaxWidth() {
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) value.getLayoutParams();
int maxWidth = data2.getLeft() - value.getLeft();
int maxWidthConsideringUnits = maxWidth - unit.getWidth();
int maxWidthIncludingMargin = maxWidthConsideringUnits - params.getMarginEnd();
value.setMaxWidth(maxWidthIncludingMargin);
}
}
Here are some screenshots:
Here we go.
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textSize="25sp"
android:ellipsize="end"
android:singleLine="true"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/unit"
tools:text="17.40000" />
<TextView
android:id="#+id/unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
app:layout_constraintBaseline_toBaselineOf="#id/value"
app:layout_constraintStart_toEndOf="#+id/value"
app:layout_constraintEnd_toEndOf="#id/guideline"
tools:text="KG" />
Note that, ensure the LayoutParam.width of the parent ConstraintLayout is not wrap_content.
I'm using ConstraintLayout where I will show as below
I would like to hide First (using gone), and which the view I expect to be as below (where ElasticBody will stretch over to use up the original First view space as well.
However, when I actual set First to gone, my view turn out to be as below (all image as from Android Studio Design view). My Elastic Body is missing as well, and the height expanded weirdly.
My layout code as below
<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"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:visibility="gone"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_body"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:background="#f0f"
android:layout_height="wrap_content"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_tail"
app:layout_constraintStart_toEndOf="#+id/txt_first"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_tail"
android:background="#ff0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/txt_body"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
(Note, if you remove the gone, you'll get the first image view).
Why is this so? How could I fix it where when my First is gone, I could the Elastic Body stretch out correctly?
p/s: I know how to do it in LinearLayout and RelativeLayout... but wonder if this is a limitation on ConstraintLayout?
Try following.
Set the first view's left and top constraints to "parent". After that:
set the txt_body textview width to "0dp"
set the left constraint to the first view's right side
set the right constraint to the tail view's left side.
So, whenever you set the first view's visibility to "gone", the body view will be stretched like how you want it.
<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"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="#+id/txt_body"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:background="#f0f"
android:layout_height="wrap_content"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintRight_toLeftOf="#+id/txt_tail"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/txt_first"
/>
<TextView
android:id="#+id/txt_tail"
android:background="#ff0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Update
If you want to do using barrier then also you can do it.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="#+id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#f0f"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintStart_toEndOf="#+id/barrier"
app:layout_constraintEnd_toStartOf="#+id/txt_tail"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_tail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<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="txt_body,txt_first" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="txt_body,txt_tail" />
</androidx.constraintlayout.widget.ConstraintLayout>
Say, you want to have a picture like this:
Here you have indents between the title and "Nice work", between "Nice work" and time, also horizontal indent to "Opinions". They are centered vertically.
"Opinions" is attached to the star, so that can be multilined and stay centered. I show results for 2 variants: in the first row opinions are multilined, while in the next row it is a single line. In columns you can see 4 variants of showing/hiding 2 labels.
A more simple and preferrable way is to wrap both labels into LinearLayout and insert it into parent ConstraintLayout. Then you can set vertical gravity, show or hide labels, hide the LinearLayout itself.
If you don't want to have nested layouts, use Barriers and Groups. It is a difficult task that can waste many hours. A key is having additional Views for aligning. Here I have 2 hiding labels ("Nice work" and "Opinions"), and I have to add 2 views (spaces).
The height of the right space is equal to the height of the star (14dp).
To simplify hiding several views, I joined them into groups.
You can see horizontal dotted lines - they are Barriers. I align them on tops and bottoms of the most big views (barrier_2 is similar):
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
Vertical aligning is based on these 2 additional Spaces (see marginTop="10dp"):
<Space
android:id="#+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintTop_toBottomOf="#id/title" />
It is difficult to cover all situations, so see the 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:paddingBottom="5dp">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lineSpacingExtra="4sp"
android:lines="1"
android:paddingBottom="5dp"
android:text="«Title text»"
android:textColor="#333333"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#112233"
android:paddingLeft="5dp"
android:paddingTop="4dp"
android:paddingRight="5dp"
android:paddingBottom="4dp"
android:text="Nice work"
android:textColor="#ffffff"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="#id/barrier_2"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toTopOf="#id/left_text_space" />
<Space
android:id="#+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.constraintlayout.widget.Group
android:id="#+id/left_text_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="left_text,left_text_space" />
<Space
android:id="#+id/opinion_space"
android:layout_width="1dp"
android:layout_height="14dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="#id/left_text_space"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="left_text,opinion" />
<ImageView
android:id="#+id/opinion_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="#id/barrier_2"
app:layout_constraintStart_toEndOf="#id/left_text_space"
app:layout_constraintTop_toTopOf="#id/opinion_space"
app:srcCompat="#drawable/ic_filled_rate_star" />
<TextView
android:id="#+id/opinion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:lineSpacingExtra="1sp"
android:text="1. Opinion 1.\n2. Opinion 2.\n3. Opinion 3.\n4. Opinion 4."
android:textColor="#1122aa"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/opinion_icon"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/opinion_icon"
app:layout_constraintTop_toTopOf="#id/opinion_icon" />
<androidx.constraintlayout.widget.Group
android:id="#+id/opinion_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="opinion_icon,opinion,opinion_space" />
<ImageView
android:id="#+id/time_icon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="center_vertical"
android:layout_marginTop="8dp"
android:contentDescription="#null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier_2"
app:srcCompat="#drawable/ic_time" />
<TextView
android:id="#+id/time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginLeft="7dp"
android:ellipsize="end"
android:lineSpacingExtra="1sp"
android:lines="2"
android:paddingBottom="7dp"
android:text="17:00"
android:textColor="#9e9e9e"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/time_icon"
app:layout_constraintTop_toTopOf="#id/time_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then in your activity you can show/hide labels. Hide Groups, not views inside, because strangely inside a Group views are always visible.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
left_text_group.visibility = View.GONE
opinion_group.visibility = View.VISIBLE
}
An answer has already been given linking to Barriers. I will provide an example of how I've actually implemented it:
<TextView
android:id="#+id/textView1"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textView2"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some other text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView1,textView2" />
This example shows 2 TextViews either of which can be gone. The Views are on stacked from top to bottom, so barrierDirection is set to bottom. Should you need another direction, just change that line accordingly.
Setting any of the 2 TextViews to gone, will result in the Barrier shifting to the bottom of the other, and if we set both to gone, it'll just shift up to the element that textView1's top constraint was referencing, in this case, the parent.
Note: If your textView1's top constraint is something else, i.e. it's below another element, the barrier will end up there if both views are set to gone.
I am trying to use this layout as a header in a listview but the bottom row of textviews below the inner constraintlayout is not visible - it's like its height has collapsed to zero.
In the xml the inner constraintlayout declaration has a red line under it with a popup message "This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint..." (jump to the LEFT? does that even make sense?) and I have tried to add vertical constraints like
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
but what happens is the whole layout loses its height.
I also find it very confusing when the design editor changes my xml without asking or warning me. It seems to like to set layout_width and height elements to "0dp" alot and also setting the guidelines width and height to
android:layout_width="wrap_content"
android:layout_height="wrap_content".
Back when the only elements were the bottom row of textviews I did not set layout_width and layout_height as the constraints seemed to do the work. But now that I have added the top part "leaderinfo", the designer has added them as "0dp". I know I can reset them to be "wrap_content" and then the textviews will reappear but why should that be necessary - doesn't the designer set them to "0dp" for a good reason?
Thanks for any help !
<?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="wrap_content"
android:background="#color/listheaderbg"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/leaderinfo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/subsection1background"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_profilepic"
android:src="#drawable/ic_flag"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="2dp"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_username"
tools:text="#string/username"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toTopOf="#+id/iv_profilepic"
tools:layout_editor_absoluteX="150dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_firstname"
tools:text="#string/first_name"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toBottomOf="#+id/tv_username"
tools:layout_editor_absoluteX="150dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_lastname"
tools:text="#string/last_name"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toBottomOf="#+id/tv_firstname"
tools:layout_editor_absoluteX="150dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:elevation="0dp"
app:elevation="0dp"
app:fabSize="mini"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toStartOf="#+id/guideline04"
app:srcCompat="#android:drawable/ic_input_add"
app:layout_constraintTop_toTopOf="parent"
android:tint="#FFFFFF"
app:backgroundTint="#color/submitbuttoncolor_hotpink"
tools:layout_editor_absoluteX="351dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_weight"
android:src="#drawable/ic_scale"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/iv_profilepic"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_weight"
tools:text="#string/_225"
android:padding="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_weight"
app:layout_constraintTop_toTopOf="#+id/iv_weight"
app:layout_constraintBottom_toBottomOf="#+id/iv_weight"
tools:layout_editor_absoluteX="62dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/guideline02"
android:id="#+id/iv_height"
android:src="#drawable/ic_height"
app:layout_constraintTop_toTopOf="#+id/iv_weight"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="206dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_height"
tools:text="#string/_0_0"
app:layout_constraintStart_toEndOf="#+id/iv_height"
app:layout_constraintTop_toTopOf="#+id/iv_height"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_height"
tools:layout_editor_absoluteX="248dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_age"
android:src="#drawable/ic_age"
app:layout_constraintTop_toBottomOf="#+id/tv_weight"
android:layout_marginTop="10dp"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_age"
tools:text="23"
app:layout_constraintStart_toEndOf="#+id/iv_age"
app:layout_constraintTop_toTopOf="#+id/iv_age"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_age"
tools:layout_editor_absoluteX="62dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline02"
android:id="#+id/iv_country"
android:src="#drawable/ic_flag"
app:layout_constraintTop_toTopOf="#+id/iv_age"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="206dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_country"
tools:text="CA"
app:layout_constraintStart_toEndOf="#+id/iv_country"
app:layout_constraintTop_toTopOf="#+id/iv_country"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_country"
tools:layout_editor_absoluteX="248dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/iv_followers"
android:src="#drawable/ic_followers"
app:layout_constraintStart_toStartOf="#+id/guideline01"
app:layout_constraintTop_toBottomOf="#+id/tv_age"
android:layout_marginTop="10dp"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_followers"
tools:text="223"
app:layout_constraintStart_toEndOf="#+id/iv_followers"
app:layout_constraintTop_toTopOf="#+id/iv_followers"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_followers"
tools:layout_editor_absoluteX="62dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline01"
app:layout_constraintGuide_percent="0.05"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="21dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline02"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="206dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline03"
app:layout_constraintGuide_percent="0.69"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="284dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline04"
app:layout_constraintGuide_percent="0.95"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="391dp" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/text1"
style="#style/MyTextView"
android:gravity="center"
android:text="#string/exercise"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp" />
<TextView
style="#style/MyTextView"
app:layout_constraintStart_toEndOf="#+id/guideline1"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
android:gravity="center"
android:text="#string/rm1"
android:id="#+id/text2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp"
tools:layout_editor_absoluteX="213dp" />
<TextView
style="#style/MyTextView"
app:layout_constraintStart_toEndOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:text="#string/rm1bw"
android:id="#+id/text3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp"
tools:layout_editor_absoluteX="310dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
android:id="#+id/iv_rank"
android:src="#drawable/ic_rank"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:visibility="gone"
android:background="#color/listheaderbg"
tools:layout_editor_absoluteX="376dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
app:layout_constraintGuide_percent="0.44"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="181dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.71"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="292dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_percent="0.83"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="341dp" />
For the first issue about the inner layout needing a vertical constraint, you just need to constrain the top like this:
app:layout_constraintTop_toTopOf="parent"
The bottom does not need a constraint since the height is wrap_content.
Concerning the bottom text views, you have the outer constraint layout as wrap_content, so if the text views also have a height of wrap_content, then the layout can determine the appropriate size of the outer container which is the height of the inner constraint layout + the height of the text views.
But if the text views are set to 0dp which means to match the constraints, then there is a dependency that cannot be resolved. In other words, the size of the height of the text views depend upon the size of the outer constraint layout (match constraints) but the size of the outer constraint layout depends on the size of its contents which include the height of the text views but that can't be determined without knowing the size of its container. It can't be both, so the designer is trying to help you out of this dilemma by making the changes that you mention.
The bottom line is to constrain just the top of the inner layout and to specify a height size for the text views. If you make those changes, then it should work.