Develop Reference

Convert children to proper way in parent constraint layout Android

Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.xml
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.

There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.

You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews

How to make an item's height in GridLayoutManager adjust relatively to another item?

I have a RecyclerAdapter with two different types of views and a GridLayoutManager with 15 columns. In the first row there's one view of type1 that uses 9 grids, followed by two views of type2 that use 3 grids each. In the second row I have five views of type2 that use 3 grids each; the pattern repeats from there.
The problem is this: if one row combines a view of type1 with views of type2, the view of type1 grows with a bigger height, leaving the views of type2 with a space at the bottom. I would like to adjust the height of the first view depending on what height the other views have. I can't use fixed heights, the first view should adjust relatively to the others.
type1 layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_list_item_subtitle">
<ImageView
android:id="#+id/cover"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#id/cover"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="#+id/title"
style="title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/category_title"
android:textColor="#color/white"/>
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/text_list_item_subtitle"
android:textColor="#color/white"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
type2 layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cover"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textSize="#dimen/category_title"
android:textColor="#color/white"
android:maxLines="1"
android:ellipsize="end"/>
</androidx.constraintlayout.widget.ConstraintLayout>

I changed my type1 layout to this and now it stretches only as high as its siblings.
<?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:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/recommendations_tracks_item_background">
<ImageView
android:id="#+id/cover"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="1"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#id/cover"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="#+id/title"
style="title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/category_title"
android:textColor="#color/white"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/text_list_item_subtitle"
android:textColor="#color/white"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to layout 2 textviews in a custom compound constraint layout

I'm trying to give two Textviews the correct position in the Constraintlayout in my layout file. The problem is the textviews needs to be scalable using app: autoSizeTextType="uniform". To make them scale I also have to match_parent on the layout_width and layout_height. This makes the two textviews overlap. How can I accomplish the desired result?
Current XML file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.362" />
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Actual result:
Both textviews scales, but overlaps, and are placed in the center of the constraintlayout.
The current state:
The expected result:
One textview centered in the middle. One textview aligned at the bottom. Both textviews scales with the constraintlayout.
Expected result: (3 different custom compounds in an activity)

you have to give top and bottom proper constraint
<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:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

It might be helpful
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:gravity="center"
android:text="1"
android:textSize="50sp"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textSize="28sp"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
</android.support.constraint.ConstraintLayout>
Textview size we have to add

Modify the TextView to have height and width of 0dp, this will match parent constraint view, add in a constraint for the views in relation to each other and that should give you as you asked for
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="1"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="ABC"
android:textColor="#4689C8"
android:textStyle="bold"
app:autoSizeTextType="uniform"
app:layout_constrainedHeight="true"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

Center Vertically multiple view using Constraint Layout

I'm trying to make a ConstraintLayout to replace a regular layout with Relative and Linear layout but I'm having some troubles to center vertically two views inside a cardview.
The below layout file is my current layout that I want to replace.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/main_button_side_margin"
android:layout_marginStart="#dimen/main_button_side_margin"
android:layout_marginTop="#dimen/main_button_top_margin"
android:paddingBottom="2dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="2dp">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/select_language_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/language_stroke"
android:minHeight="80dp">
<ImageView
android:id="#+id/img_language"
android:layout_width="#dimen/main_button_size"
android:layout_height="#dimen/main_button_size"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/main_button_icon_margin"
android:layout_marginStart="#dimen/main_button_icon_margin"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/menu_text_margin"
android:layout_marginLeft="#dimen/menu_text_margin"
android:layout_marginRight="#dimen/menu_text_margin"
android:layout_marginStart="#dimen/menu_text_margin"
android:layout_toEndOf="#id/img_language"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/main_button_text_title_margin"
android:text="Text" />
<TextView
android:fontFamily="sec-roboto-light"
android:gravity="start"
android:id="#+id/language_desc"
android:text="description"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
My current result is below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/select_language_button"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/language_stroke">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:text="desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/img_language"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img_language"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
The problem is to center textView + textView1 inside cardview. I'm only getting textView centered and textView1 below.
I already tried to "pack vertically" and then "center vertically" both but I'm not getting the result that a LinearLayout (holding the two textsview) achieve when it's android:layout_centerVertical="true" inside the cardview.
I would like to do it with the visual editor instead changing the xml.
I know that the way to achive it is using Chains but I'm not able to do it inside cardview, using layout edit.
Can someone help with some screenshots/screen recorder ?

Yep, you have to use vertical packed chain for your textView and textView1 to center them within your CardView.
To add chain in Layout Editor you should select both textView and textView1, right-click on them and select "Center Vertically"
To change chain style to packed, you should tap on "chain" icon until packed style selected
Build a Responsive UI with ConstraintLayout - Control linear groups with a chain contains a video showing how to add chain in Layout Editor and change its style.
XML layout for your particular case:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/select_language_button"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/language_stroke">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:text="desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Text"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintLeft_toRightOf="#+id/img_language"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<ImageView
android:id="#+id/img_language"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

ConstraintLayout: set height of all views in row to match the tallest one

I'm trying to utilize a ConstraintLayout (version 1.0.2) to set the height of 2 side-by-side views to match the tallest one of them. This serves as a ViewHolder in for a RecyclerView, where each TextView gets an arbitrary length of text...
If I set each to wrap_content, the shorter one will shrink.
If I set both to 0dp (match_contraints), both end up 0 height.
Here's the setup:
<?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_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id1"
android:layout_width="60dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/id2"/>
<TextView
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/id1"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
I suppose this is a bug, as "0dp" should act more like match_parent than actual 0 dp.
On iOS, by the way, the equivalent Auto Layout rules (of setting views' heights to match top and bottom of parent) produce the expected result.
Of course this is pretty simple using LinearLayout, but this layout plays part in a larger layout, and I'd like to trim the view hierarchy...

Answering, in case anyone is looking out for answer in future.
ConstraintLayout introduced Barrier in v1.1 to achieve one such functionality asked by the OP in the question
The above mentioned functionality can be achieved using below xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/id1"
android:layout_width="60dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/barrier"
app:layout_constraintVertical_bias="0.0"
android:text="#string/id1_text" />
<TextView
android:id="#+id/id2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/id1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/barrier"
app:layout_constraintVertical_bias="0.0"
android:text="#string/id2_text" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="id1,id2" />
</android.support.constraint.ConstraintLayout>

This might help you.
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tv_1"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorAccent"
android:gravity="center"
android:padding="#dimen/activity_vertical_margin"
android:text="sjdjhshdjhdjhsdgfjhgsdjfgjsdgfjsdgfhgdsjhfghs"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/tv_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_2"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:padding="#dimen/activity_vertical_margin"
android:text="sjdjhsjhd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/tv_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

This is tricky and slow, but it works.
The point is:
Add additional invisible same layout for measure height. This one has wrap_content height attribute, so it will stretch parent if it is big enough.
Set your visible layout height to 0dp, so it will fill rest of parent.
As you can see the capture below, we have two layouts. Hidden one is wrap_contents
<?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="wrap_content">
<TextView
android:id="#+id/view_1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#DDDDDD"
android:text="#android:string/yes"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_1_invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:text="#android:string/yes"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/view_2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_2"
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#DDDDDD"
android:text="#android:string/httpErrorBadUrl"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/view_2_invisible"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:text="#android:string/httpErrorBadUrl"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/view_1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

I've managed to do this with LinearLayout
parent to be height = wrap content
children to be height = match parent
children width = 0 and same weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
>
<TextView
android:layout_weight="1"
android:id="#+id/id1"
android:layout_height="match_parent"
android:layout_width="0dp"
android:background="#color/green_400"
android:text="11"
android:textSize="50sp"
/>
<TextView
android:layout_weight="1"
android:id="#+id/id2"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:background="#color/cat_grey_lite"
android:text="2222222222"
android:textSize="50sp"
/>
</LinearLayout>

<TextView
android:id="#+id/txt_service_request_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_id"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_status"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_status"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_desc"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_id"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_desc"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_desc"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toStartOf="#+id/txt_service_request_cat"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_status"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_service_request_cat"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/bg_rectangle_blue"
android:gravity="center"
android:padding="8dp"
android:text="#string/service_request_cat"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/txt_service_request_id"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txt_service_request_desc"
app:layout_constraintTop_toTopOf="parent" />