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.
Related
I'm trying to create a chat bubble with the following code,
<?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:orientation="vertical">
<LinearLayout
android:id="#+id/chat_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginStart="64dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="4dp"
android:background="#drawable/my_text_bg"
android:elevation="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/replyUI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/reply_ui_margin"
android:layout_marginTop="#dimen/reply_ui_margin"
android:layout_marginEnd="#dimen/reply_ui_margin"
android:layout_marginBottom="#dimen/reply_ui_minus_margin"
android:background="#drawable/reply_box_bg_sent"
android:clickable="true"
android:elevation="#dimen/reply_ui_elevation"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical"
android:padding="#dimen/reply_ui_padding"
android:visibility="gone">
<TextView
android:id="#+id/replyToName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="?replyTitleSentColor"
android:textSize="#dimen/chat_reply_to_text_size" />
<TextView
android:id="#+id/replyToTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:textColor="?replyTxtColor"
android:textSize="#dimen/chat_reply_to_text_size" />
</LinearLayout>
<TextView
android:id="#+id/sentTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/chat_text_margin_start"
android:layout_marginTop="#dimen/chat_text_margin"
android:layout_marginEnd="#dimen/chat_text_margin"
android:layout_marginBottom="#dimen/chat_text_margin"
android:autoLink="all"
android:textColor="?chatTxtColor"
android:textColorLink="?attr/chatLinkColorSent"
android:textSize="#dimen/chat_text_size" />
</LinearLayout>
<TextView
android:id="#+id/timeStamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginEnd="#dimen/chat_timestamp_text_margin"
android:layout_marginBottom="#dimen/chat_timestamp_text_margin"
android:drawablePadding="#dimen/chat_timestamp_drawable_padding"
android:textColor="#color/grey"
android:textSize="#dimen/chat_timestamp_text_size" />
</LinearLayout>
And it produces the following output,
As you can see, the replyUI is not filling the entire width of the chat bubble.
So, I tried setting replyUI width to match_parent, it fills the parent and the output looks like this,
But now I have another problem, If the sentTxt text is too short it shrinks the whole layout and replyUI is not readable at all. See below image.
How can I get the replyUI to fill the entire bubble width without shrinking when sentTxt is too short? I tried to set a minWidth property, but that didn’t work. Any help appreciated.
I think it would be better for you to use ConstraintLayout in this case.
You want the replyUI width to always match the constraint making it go until to the end of chat_parent but at the same time you want its minimum width constrained to its own content width.
chat_parent width needs to be wrap_content, it will have the width decided by either replyUI (if replyToTxt is longer than the sentTxt) or sentTxt (if sentTxt is longer than replyToTxt)
Using app:layout_constraintWidth_min="wrap" in replyUI is the key to achieving the desired effect
I've played around a little bit changing the dimension, drawables and color values of your snippet just to give you an example. You would probably need to tweak some values (like gravity, maxLines, maxWidth and constraints margins)
Short Reply vs Long Sent Text
Long Reply vs Short Sent Text
Here is the .xml for these
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/chat_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="8dp"
android:background="#color/purple_500"
android:elevation="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/replyUI"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:background="#color/purple_200"
android:clickable="true"
android:elevation="4dp"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:maxWidth="160dp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="wrap">
<TextView
android:id="#+id/replyToName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#color/purple_500"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="You" />
<TextView
android:id="#+id/replyToTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="4dp"
android:maxWidth="160dp"
android:textColor="#color/white"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/replyToName"
tools:text="This is a long text" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/sentTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="4dp"
android:autoLink="all"
android:maxWidth="160dp"
android:textColor="#color/white"
android:textColorLink="#color/purple_500"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/replyUI"
tools:text="Hi" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/timeStamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:drawablePadding="4dp"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/chat_parent"
app:layout_constraintTop_toBottomOf="#+id/chat_parent"
tools:text="13:45" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can check the text length with code and see if it's too short, set a fixed height for your layout with code, or else set the height to match_parent.
LinearLayout view = findViewById(R.id.replyUI);
int size = replyToTxt.getText().toString().length();
if (size < 14)
{
LayoutParams layoutParams = view.getLayoutParams();
layoutParams.width = newWidth;
view.setLayoutParams(layoutParams);
}
else {
LayoutParams layoutParams = view.getLayoutParams();
layoutParams.width = LayoutParams.MATCH_PARENT;
view.setLayoutParams(layoutParams);
}
You can use android:minWidth="" in replyUI linear layout, it will keep min width in case of short test, make sure to use dimens for differnt device support.
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 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.
I have the following configuration in my view using ConstraintLayout:
I want that "Admin" view was always on the right side of username view, but when username is too large admin view should always be visible. How to achieve it?
Currently:
EDIT:
Current code
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight="0.8">
<TextView
android:id="#+id/name"
style="#style/Text.Black"
android:layout_width="wrap_content"
android:layout_marginTop="12dp"
android:ellipsize="marquee"
android:paddingBottom="#dimen/dp6"
android:singleLine="true"
android:textSize="#dimen/sp16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="veryveryveryverylongvervrusername" />
<TextView
android:id="#+id/mail"
style="#style/Text.Grey"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/name"
android:ellipsize="marquee"
android:singleLine="true"
tools:text="fjfdjdf"
android:textSize="#dimen/sp12" />
<TextView
android:id="#+id/status"
style="#style/Text.White"
android:layout_height="#dimen/dp18"
android:layout_marginLeft="#dimen/dp9"
android:layout_marginStart="#dimen/dp9"
android:layout_marginTop="#dimen/dp2"
app:layout_constraintStart_toEndOf="#id/name"
app:layout_constraintTop_toTopOf="#+id/name"
android:ellipsize="marquee"
android:paddingLeft="#dimen/dp5"
android:paddingRight="#dimen/dp5"
android:singleLine="true"
tools:text="Admin"
tools:background="#drawable/bg_text_round_corners_blue"
android:textSize="#dimen/sp12" />
First on Admin Textview (#id+id/status) you have to add
app:layout_constraintEnd_toEndOf="parent"
Then on Username Textview (#+id/name) you can try add the following lines,
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/status"
which whould constrain the width to be max until admin TextView
update (since i didn't fully understand your constraints)
the only way I could figure out to get this work is to create another ConstraintLayout inside the one that's already there, like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:background="#color/colorPrimaryDark">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="12dp"
tools:text="veryveryveryverylongvervrusername" />
<TextView
android:id="#+id/status"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/name"
tools:layout_editor_absoluteY="12dp"
tools:text="Admin" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The important point is to set
app:layout_constrainedWidth="true"
for both the username TextView and and the inner ConstraintLayout
You can try to set the layout_witdh of your Admin textview to 0dp like this:
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/name"
app:layout_constraintEnd_toStartOf="#+id/settings_icon"
The name textview needs to have something like this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/status"
For the field with id #+id/name, add below line:
app:layout_constraintEnd_toStartOf="#id/status"
android:layout_height="wrap_content"
and change it's layout_width to
android:layout_width="0dp"
try this :
<TextView
android:id="#+id/status"
style="#style/Text.White"
android:layout_height="#dimen/dp18"
android:layout_marginLeft="#dimen/dp9"
android:layout_marginStart="#dimen/dp9"
android:layout_marginTop="#dimen/dp2"
app:layout_constraintStart_toEndOf="#id/name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:ellipsize="marquee"
android:paddingLeft="#dimen/dp5"
android:paddingRight="#dimen/dp5"
android:singleLine="true"
tools:text="Admin"
tools:background="#drawable/bg_text_round_corners_blue"
android:textSize="#dimen/sp12" />
#bvk256
You can achieve the behavior with the following xml code, maybe slight bit cleanup.
<?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:minHeight="90dp"
android:padding="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/startIcon"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#android:drawable/ic_btn_speak_now"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/firstEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:padding="0dp"
app:layout_constraintEnd_toStartOf="#id/admin"
app:layout_constraintStart_toEndOf="#+id/startIcon"
app:layout_constraintTop_toTopOf="parent"
tools:text="hello world to this long and very very very very long text" />
<TextView
android:id="#+id/admin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="Admin"
app:layout_constraintEnd_toStartOf="#+id/endIcon"
app:layout_constraintTop_toTopOf="#+id/firstEditText" />
<EditText
android:id="#+id/secondEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:padding="0dp"
app:layout_constraintEnd_toStartOf="#id/admin"
app:layout_constraintStart_toEndOf="#+id/startIcon"
app:layout_constraintTop_toBottomOf="#+id/firstEditText"
tools:text="hello world to this long and very very very very long text" />
<ImageView
android:id="#+id/endIcon"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#android:drawable/ic_menu_delete"
android:tint="#android:color/holo_blue_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Thank you all for the responses. I tried all of the solutions, but they either pushed "Admin" text out of the visibility when "username" is too large or made "admin" textview be glued to the right side without accounting the "username" size.
I was able to solve my problem to some extend by adding this percentage constraint to the "username" textview:
android:layout_width="0dp"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.75"
So it behaves like this:
I am not sure whether it is a bug of ConstraintLayout or not, so I try to ask if somebody knows I made any mistake.
I have a layout which I want to spread evenly on the screen 3 elements.
Just like below:
I formed horizontal chains between them and as you can see, they are distributing themselves evenly and working good.
Now I want to place an image plus a TextView centered inside each element, like this:
So this is what I tried to do, taking element 1 as example:
<ImageView
android:id="#+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/image1"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintLeft_toLeftOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1"
app:layout_constraintRight_toLeftOf="#+id/text1"
app:layout_constraintHorizontal_chainStyle="packed"/>
<TextView
android:id="#+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:text="#string/text1"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintLeft_toRightOf="#id/image1"
app:layout_constraintRight_toRightOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
android:gravity="center_vertical"/>
Sadly, it seems to "break" the chain of the 3 elements. The 3 elements now does not spread horizontally, but wrapped to a very small size:
If I removed the chain between the ImageView and TextView, it works fine. But then I cannot center the ImageView and TextView inside the element.
Does anyone encountered something like this? How do you solve it?
Now, I know I have at least 2 alternatives to solve this problem:
(1) Use one TextView with a compound drawable, instead of ImageView + TextView;
(2) Use a LinearLayout to wrap the ImageView and TextView
But I want to know why it does not work (So that we can have better understanding of ConstraintLayout), instead of finding an alternative.
Thanks!
After posting my other answer to this question, I realized that it did not address how to center a multi-line TextView.
Referring to the image above, the leftmost box has a single line TextView. The TextView and the ImageView are centered as a group in the the box. This was accomplished by specifying the following for the TextView.
<TextView
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
.. the rest of it .../>
See this posting regarding the use of app:layout_constraintWidth_default="wrap".
app:layout_constraintWidth_default="wrap" (with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)
Update: It looks like the XML above needs to be changed for ConstraintLayout 1.1.0 beta2. See the release update.
I think what we are now looking for in the XML is the following:
<TextView
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
.. the rest of it .../>
I have left the rest of this posting using the pre-1.1.0 beta2 layout. To update, just make the changes mentioned above. The centering issue remains.
This works great for the single line example and the views are centered in the box, but we run into difficulty when the TextView spans multiple lines as it does in the middle box of image above. Although the text within the TextView is wrapped and does not expand beyond its constraints, the ImageView and TextView are not centered like we might expect. In fact, the bounds of the TextView extend to the right of the blue box.
My quick fix for this is to insert a zero-width Space widget to the left of the ImageView in the rightmost box. The chain is that box is now anchored between the Space widget and the righthand side of the box. The ImageView is constrained on the left by the Space.
The Space widget can now be expanded to act like a shim to move the ImageView to the right by the amount that will center the chain. (See right box in the image above.) The getExcessWidth() method of MainActivity calculates how wide the Space widget needs to be.
Here is the XML:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#+id/element_2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toStartOf="#+id/element_3"
app:layout_constraintStart_toEndOf="#+id/element_1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_1"
app:layout_constraintRight_toLeftOf="#+id/text1"
app:layout_constraintTop_toTopOf="#id/element_1" />
<ImageView
android:id="#+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_2"
app:layout_constraintRight_toLeftOf="#+id/text2"
app:layout_constraintTop_toTopOf="#id/element_2" />
<android.support.v4.widget.Space
android:id="#+id/spacer3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintLeft_toLeftOf="#id/element_3"
app:layout_constraintTop_toTopOf="#id/element_3" />
<ImageView
android:id="#+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginLeft="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/spacer3"
app:layout_constraintRight_toLeftOf="#id/text3"
app:layout_constraintTop_toTopOf="#id/element_3" />
<TextView
android:id="#+id/text1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="String"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintLeft_toRightOf="#id/image1"
app:layout_constraintRight_toRightOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintLeft_toRightOf="#id/image2"
app:layout_constraintRight_toRightOf="#id/element_2"
app:layout_constraintTop_toTopOf="#id/element_2"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="#+id/text3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginRight="8dp"
android:gravity="center_vertical"
android:text="A 2-line string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintLeft_toRightOf="#id/image3"
app:layout_constraintRight_toRightOf="#id/element_3"
app:layout_constraintTop_toTopOf="#id/element_3"
app:layout_constraintWidth_default="wrap" />
</android.support.constraint.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chained_chains);
ConstraintLayout layout = (ConstraintLayout) findViewById(R.id.constraintLayout);
layout.post(new Runnable() {
#Override
public void run() {
final TextView textView = (TextView) findViewById(R.id.text3);
int excessWidth = getExcessWidth(textView);
if (excessWidth > 0) {
Space spacer = (Space) findViewById(R.id.spacer3);
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) spacer.getLayoutParams();
lp.width = getExcessWidth(textView) / 2;
spacer.setLayoutParams(lp);
}
}
});
}
private int getExcessWidth(TextView textView) {
if (textView.getLineCount() <= 1) {
return 0;
}
Layout layout = textView.getLayout();
int maxWidth = 0;
for (int i = 0; i < textView.getLineCount(); i++) {
maxWidth = Math.max(maxWidth, (int) layout.getLineWidth(i));
}
return Math.max(textView.getWidth() - maxWidth, 0);
}
}
ConstraintLayout appears to be working as expected. You don't specify what kind of view the elements are, so I have taken the TextView and ImageView and chained them inside a View. I also changed the width of the TextView from 0dp (match_constraints) to wrap_content. Here is the result:
..and the XML.
<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">
<View
android:id="#+id/element_1"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimary"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/element_2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_1"
app:layout_constraintRight_toLeftOf="#+id/text1"
app:layout_constraintTop_toTopOf="#id/element_1" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/image1"
app:layout_constraintRight_toRightOf="#id/element_1"
app:layout_constraintTop_toTopOf="#id/element_1" />
<View
android:id="#+id/element_2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="#+id/element_1"
app:layout_constraintRight_toLeftOf="#+id/element_3"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image2"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_2"
app:layout_constraintRight_toLeftOf="#+id/text2"
app:layout_constraintTop_toTopOf="#id/element_2" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A longer string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/image2"
app:layout_constraintRight_toRightOf="#id/element_2"
app:layout_constraintTop_toTopOf="#id/element_2" />
<View
android:id="#+id/element_3"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:background="#color/colorPrimary"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="#+id/element_2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/image3"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#id/element_3"
app:layout_constraintRight_toLeftOf="#+id/text3"
app:layout_constraintTop_toTopOf="#id/element_3" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:text="A still longer string"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="#id/element_3"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/image3"
app:layout_constraintRight_toRightOf="#id/element_3"
app:layout_constraintTop_toTopOf="#id/element_3" />
</android.support.constraint.ConstraintLayout>
If this continues to be a problem for you, it would be helpful if you can post more of your XML including the elements. In the meantime, a couple of thoughts.
First, check to make sure that you are not mixing left/right with start/end constraints. If you supply both, they should agree. There has been an inconsistency in how these have been applied by the designer in the past.
Secondly, you can set up barriers to the left and right of each of your elements and chain the TextView and ImageView between these barriers. See this writeup about barriers in ConstraintLayout.
I noticed that you have your inner view chains set to 'packed' with the line
app:layout_constraintHorizontal_chainStyle="packed"
It almost seems like the this functionality is extending out to the parent views (the 'elements in your case').
You should try temporarily removing this line in your markup to see if your problem goes away.
If so, the fix should be easy enough. There are many ways to achieve that same effect without nesting layouts.
This is perhaps the closest you can get to centering the ImageView and TextView in the ConstraintLayout without any kind of Nested layouts.
And here is the code that does that
<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">
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/border_normal"
app:layout_constraintRight_toLeftOf="#+id/frameLayout"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/frameLayout2"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
android:id="#+id/frameLayout"
android:background="#drawable/border_normal"
app:layout_constraintRight_toLeftOf="#+id/frameLayout3"
app:layout_constraintLeft_toRightOf="#+id/frameLayout2"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="110dp"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/border_normal"
app:layout_constraintLeft_toRightOf="#+id/frameLayout"
android:id="#+id/frameLayout3"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
</FrameLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout2"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
android:layout_marginStart="24dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="#+id/frameLayout2"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout2"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/imageView"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
android:layout_marginStart="24dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
android:text="TextView"
android:layout_marginEnd="8dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
android:layout_marginLeft="16dp"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout3"
app:layout_constraintTop_toTopOf="#+id/frameLayout3"
android:layout_marginStart="24dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="#+id/frameLayout3"
app:layout_constraintTop_toTopOf="#+id/frameLayout3"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout3"
android:layout_marginRight="16dp"
app:layout_constraintLeft_toRightOf="#+id/imageView3"
android:text="TextView"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
Alternate Solution
A better solution would be to wrap the Image view and Text view in a ConstraintLayout
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintRight_toRightOf="#+id/frameLayout"
app:layout_constraintLeft_toLeftOf="#+id/frameLayout"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView2" />
</android.support.constraint.ConstraintLayout>
EDIT
<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"
tools:layout_editor_absoluteY="73dp"
tools:layout_editor_absoluteX="0dp">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/border_normal"
app:layout_constraintRight_toLeftOf="#+id/frameLayout3"
app:layout_constraintLeft_toRightOf="#+id/frameLayout2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout3"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/border_normal"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp">
</FrameLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher_round"
app:layout_constraintLeft_toLeftOf="#id/frameLayout2"
app:layout_constraintRight_toLeftOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginLeft="24dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintRight_toRightOf="#id/frameLayout2"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/frameLayout2"
app:layout_constraintBottom_toBottomOf="#id/frameLayout2"
android:layout_marginTop="8dp"
android:layout_marginRight="24dp" />
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="0dp"
android:layout_height="110dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/border_normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/frameLayout"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
The layout will be positioned correctly only if the chain style is set to app:layout_constraintHorizontal_chainStyle="spread_inside"
This is how the output will look like