I am using a ConstraintLayout and I want to create a TextView that takes up 30% of the height of the screen or the size of its content, whichever is greater.
I can use constraints to make it take up 30% of the screen via a horizontal guideline, and I can leave off those constraints to make it grow/shrink with the size of the text. However, I can't get it to do both --- that is, be 30% as a minimum but grow beyond that if needed.
I tried using layout_constraintHeight_min and setting it to a percent, to a guideline, and to a view with a set height, but none of those works. I know it will work if I put in a hardcoded value like 200dp, but I want the value to be proportional --- that is, a percent.
I essentially want something like this, though as I mentioned above, this code doesn't work because technically a guideline has a height of 0:
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_min="#+id/guideline8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="MyText" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7" />
I also tried
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintHeight_min="#+id/heightGuide"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="MyText" />
<View
android:id="#+id/heightGuide"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#+id/guideline8"
app:layout_constraintBottom_toBottomOf="parent"
android:visibility="invisible"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7" />
but that doesn't work either.
How can I make a view have a minimum height that is a proportion of the parent, but also allow it to grow beyond that height if needed?
I had to deal with a similar situation and finally managed to solve it by adding the following to my view:
android:layout_height="0dp"
app:layout_constraintHeight_min="wrap"
app:layout_constraintHeight_percent="0.66"
Hope this works for you
Related
I have a CardView inside a ConstraintLayout, and I want the CardView to have a width of 70%, a min width of 300dp, and a max of 450dp.
The max works fine, if 70% is more than 450dp, the CardView width is set to 450dp.
The min width however, behaves very strangely.
When 70% is less than 300dp, instead of making the CardView 300dp wide, it makes it as wide as the available space, so 100%.
Here is the CardView inside the layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:id="#+id/balanceCard"
android:layout_width="0dp"
android:layout_height="0dp"
app:cardCornerRadius="40dp"
app:cardElevation="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="300dp"
app:layout_constraintWidth_percent="0.7"/>
<androidx.constraintlayout.widget.ConstraintLayout/>
This is the layout with min width of 280dp
And this is the layout with min width of 300dp
I don't know what is happening, and I would appreciate any help.
This looks like a bug to me. The width of the CardView is incorrect when the minimum width exceeds 70% of the layout's width. For a Nexus 6 emulator (dp==3.5px), the ConstraintLayout width would be 1440px and 70% of that is 1008px. (I am using px instead of dp because I think that it makes what's happening clearer.)
When the minimum width is set to 288dp (1008px), everything looks good.
<View
android:id="#+id/balanceCard"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="288dp"
app:layout_constraintWidth_percent="0.7" />
I am using a straight View instead of a CardView for simplicity.
However, if we set the minimum width to 289dp (1011.5px), we see the problem.
Notice that 288dp (1008px) is equal to 70% of the layout's width (1008px) while 289dp (1011.5px) is greater than 70% of the layout's width.
It is interesting that, if we keep the minimum width at 289dp but remove the end constraint, the width is correct:
<View
android:id="#+id/balanceCard"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_min="289dp"
app:layout_constraintWidth_percent="0.7" />
I will note that I am using version 2.1.4 of ConstraintLayout.
The only work-around that I can see One work-around is, upon layout, check the width of the view and if it exceeds 70% of the layout's width, set the width to the minimum width that you want.
Another work-around that is more complex but involves just XML is to split the 70% behavior and the minimum width into two separate Space views. You can then set a barrier to the start and end of these two views and constrain the card view to the barriers. Remove the minimum width and 70% width attributes from the card view. This looks like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Space
android:id="#+id/spacePct"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.7" />
<Space
android:id="#+id/spaceMinwidth"
android:layout_width="289dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="spacePct,spaceMinwidth"/>
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="spacePct,spaceMinwidth"/>
<View
android:id="#+id/balanceCard"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="#id/barrierEnd"
app:layout_constraintStart_toStartOf="#id/barrierStart"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
If you agree with my assessment, you may want to consider submitting a bug report on the Issue Tracker, but that is totally up to you.
I have a ConstraintLayout with an inner ConstraintLayout and a inner linear layout in Android. Here you can see my code:
<?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/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginBottom="#dimen/_8sdp"
android:layout_width="#dimen/_235sdp"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#drawable/rim"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.93"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.75">
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innerConstraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/linearLayout"
app:layout_constraintEnd_toStartOf="#+id/linearLayout"
android:layout_marginLeft="#dimen/_10sdp"
android:layout_marginRight="#dimen/_30sdp"
android:background="#drawable/rim"
android:padding="12dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/linearLayout"
>
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inner Constrained Layout"
android:textColor="#000000"
android:textSize="#dimen/_10ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_okay"
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:background="#color/colorGreen"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="#dimen/_8ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.553"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that the two layouts have different proportions when being displayed on different screens (see screenshot):
This does not look good as depending on the used device the layouts look quite different regarding their proportions (width and height). Now my question is whether there is a way of just setting the layouts' width and height generally as a percentage of the screen size and thus make the proportions of the width and height of layouts independent of the screen size? Or how else would you design layouts sucht that their proportions between width and height is more or less independant of the screen size?
I'd appreciate every comment and will be happy if you share your experience on that issue?
Now my question is whether there is a way of just setting the layouts' width and height generally as a percentage of the screen size
It can be done using constarintLayout like this:
Take any view, give it android:layout_height="0dp" - now it will respect your constraints, in additions add to it app:layout_constraintHeight_percent="0.15"
Now the view got the height of 15% of the parent size.
the same can be done for the width android:layout_width="0dp"
together with app:layout_constraintWidth_percent="0.5" and now your view will take 50% of your parent size.
You can combine those 2 like this:
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintHeight_percent="0.15"
Now your view is both 15% of the parent Width and 50% the parent height, change those numbers and you can control your view size according to your needs.
<LinearLayout
...
android:layout_width="#dimen/_235sdp"
...
>
I assume in #dimen/_235sdp you have a value of 235dp. If so, that line gives your LinearLayout fixed width of 235dp on all devices, so you can't expect it to scale percentage-wise.
Try using a vertical Guideline with percentage value and remove all other fixed sizes:
<?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:id="#+id/outerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"/>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginBottom="#dimen/_8sdp"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#android:color/holo_red_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent">
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/innerConstraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/_10sdp"
android:layout_marginEnd="#dimen/_30sdp"
android:background="#android:color/holo_blue_dark"
android:padding="12dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline">
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inner Constrained Layout"
android:textColor="#000000"
android:textSize="#dimen/_10ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_okay"
android:layout_width="match_parent"
android:layout_height="#dimen/_25sdp"
android:background="#android:color/holo_green_light"
android:text="Okay"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="#dimen/_8ssp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
In the updated code I added a vertical guidline splitting the screen to 0.3 and 0.7, then I constrained the inner layouts against the guideline to keep the ratio. Now on any device, you should see the left inner layout taking always 0.3 of the width, and the right inner layout taking always 0.7 of the width.
Tip: try avoiding ConstraintLayout inside ConstraintLayout, it should be fully possible to constrain the inner content (i.e. TextView, Button) against the parent ConstraintLayout without breaking the layout.
I had almost the same problem and to solve this problem, I divided each layer into two modes (mobile and tablet) (the Android system itself can recognize the sizes) and expanded both.
In this way, my work was more regular and changes in the next modes were easily possible for me.
my solution:
Make your resource like this.
res/layout/my_layout.xml
layout for normal screen size ("default")
res/layout-large/my_layout.xml
layout for large screen size
If you do not know how to create a layout-large folder, all you have to do is create a folder with the same name in the Project Explorer path and place your layer there.
Then Android itself will automatically be placed in a separate folder for each layer you have in the Android Studio Live folder.
For example, the activity_main folder consists of two layers as shown below
First of all simplify views tree. Use virtual layouts instead of nesting. You can use Guideline, Flow, attribute app:layout_constraintDimensionRatio or chains with weight for ConstraintLayout's children to use needed proportions.
This article may help you
Another way is to create different layout with qualifiers. Would be better to use single layout for better design management.
This is a question specifically for ConstraintLayout -
We can use margins as an attribute or layout_constraintWidth_percent as an attribute while working with width for an UI element.
Example - I have a button in centre of my UI which have some empty space to its left and right. Say something like this -
Approach1- uses "marginLeft" and "marginRight"
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:text="#string/button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
or
Approach2- uses "app:layout_constraintWidth_percent"
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="40dp"
app:layout_constraintWidth_percent="0.8"
android:text="#string/button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Which of the following ways will be a more efficient way to render the UI element?
For efficiency of the two methods, there won't be any difference, at least that you will be able to measure, between the two (IMO), but the two methods are not the same.
Settting
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
will place margins of 24dp to the right and left of the ConstraintLayout regardless of the ConstraintLayout's width. The view's width will take up the remainder of the width which will vary according to the width of the ConstraintLayout.
If you set
app:layout_constraintWidth_percent="0.8"
then the view's width will be 80% of the ConstraintLayout's width and each margin (left and right) will effectively be 10% of the ConstraintLayout's width (1/2 of 20%). So, the width of the view and it's margins will vary based upon the width of the ConstraintLayout.
If it really doesn't matter to your design then just pick one. But since there is a difference in how the two layout, I would look at the layout on the smallest screen you support and the largest and include any other alternate layout for landscape/portrait, etc. You may find that there is a good reason to prefer one over the other.
In case you have more complex structure of the ConstraintLayout layout_constraintWidth_percent will continue measure percents from the ConstraintLayout's width, not from the width it occupies.
For instance, I want to draw this picture:
<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">
<View
android:id="#+id/left"
android:layout_width="50dp"
android:layout_height="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_marginStart="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/left"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/bottom"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="#id/top"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/top"
app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then you will get bottom rectangle wider, than upper.
I'm having an issue sizing children in a ConstraintLayout. I have 3 views:
TextView (item_quantity): I want this to grow indefinitely, but not push the TextInputLayout off the screen
TextInputLayout (data_entry_layout): I want this to fill all available horizontal space and have a minimum width of 120dp no matter what
ImageView (camera_scan): This will not grow, just needs to not get pushed off the screen
If item_quantity has short text, I want it to look like the image below. I want data_entry_layout to fill all available space.
If item_quantity has long text, I want it to fill and grow but I want the data_entry_layout to never be smaller than 120dp. I want it to honor the minWidth. So, I want it to look like this:
Here is my current configuration:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/item_quantity"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/data_entry_layout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="90,000 Boxes of Stuff Are Needed"
android:textColor="#color/color_on_background"
android:textSize="#dimen/workflow_item_view_item_quantity_text_size" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/data_entry_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/camera_scan"
app:layout_constraintStart_toEndOf="#id/item_quantity"
app:layout_constraintVertical_chainStyle="spread_inside"
android:contentDescription="#string/disable_realwear_asr"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:minWidth="120dp"
app:errorIconDrawable="#null">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/data_entry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/activity_instruction_data_entry_text_size"/>
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:id="#+id/camera_scan"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginEnd="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/data_entry_layout"
app:layout_constraintTop_toTopOf="#id/data_entry_layout"
android:background="#android:color/transparent"
android:clickable="true"
android:foreground="#drawable/ripple_selector"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:src="#drawable/qrcode_scan"
android:visibility="visible"
tools:ignore="ContentDescription,KeyboardInaccessibleWidget" />
</androidx.constraintlayout.widget.ConstraintLayout>
If I set item_quantity's layout_width to 0dp then the UI works with lots of text, but takes up too much horizontal space with short text:
If I set item_quantity's layout_width to wrap_content then the UI works with short text, but pushes the data_entry_layout off the screen with large text:
I must be missing something simple. Is there a way I can get both of these situations to do what I want?
Rather than use the android:minWidth property try using app:layout_constraintWidth_min. ConstraintLayout seems to either ignore or overrule certain properties with the "android" namespace when it comes to sizing of elements.
Is there a possibility (in ConstraintLayout) to let a view grow only as long as there is space for another view at his right?
The use case is to have a value and unit TextViews besides each other. The value TextView should be able to grow as long as there is space for the unit. If there is not enough space, the value should be cut.
I've tried it with chains and some other things but can't get it done. The value doesn't stop growing and then the unit is not visible anymore. Here's the current code:
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:lines="1"
app:layout_constraintBaseline_toBaselineOf="#+id/unit"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/unit"
tools:text="12533939532" />
<TextView
android:id="#+id/unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#id/value"
app:layout_constraintRight_toRightOf="parent"
tools:text="km" />
yes you can by using match_constraint (0dp) which equal to match_parent for other layout, so by using match_constraint we set weight for first view which will occupies all available space also add
app:layout_constraintWidth_default="wrap"
to apply default width behavior as wrap_content
here is code with change
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/value"
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:lines="1"
app:layout_constraintBaseline_toBaselineOf="#+id/unit"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/unit"
tools:text="12533939532" />
<TextView
android:id="#+id/unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#id/value"
app:layout_constraintRight_toRightOf="parent"
tools:text="km" />
</android.support.constraint.ConstraintLayout>
got some explanation from site
Better view dimension controls
The new available behaviors when a dimension is set to 0dp (MATCH_CONSTRAINT). As before, both endpoints (left/right or top/bottom) need to be connected to targets.
layout_constraintWidth_default = spread (default, similar to the previous behavior)
layout_constraintWidth_default = wrap
layout_constraintHeight_default = spread
layout_constraintHeight_default = wrap
Wrap provides a significant new behaviour, with the widget resizing as if wrap_content was used, but limited by the connected constraints. A widget will thus not grow beyond the endpoints.
http://tools.android.com/recent/constraintlayoutbeta5isnowavailable