Develop Reference

TextView pushed outside parent layout

I'm building a timeline that looks like this
The center circle can be moved using horizontal bias, and can be on top of the first or last circle, or anywhere in between.
It's build using a ConstraintLayout, and the the date belonging to the center node is centered below it using start and end of the circle as constraints.
If the center node is moved to the far right, it looks like this
My issue is the fact that the TextView have been moved outside the parent layout. Is it possible to constraint it to the center node as I have, but force it to be 1 line and always within the parent layout?
EDIT
Here's the XML. It seemed like a pretty generic question, so I didn't expect the XML would be needed.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/timeline_layout"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/goal_chart_inner_layout"
app:layout_constraintTop_toTopOf="parent">
<!-- START -->
<TextView
android:textSize="12sp"
android:id="#+id/fast_started_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/timeline_start_node"
app:layout_constraintStart_toStartOf="#+id/timeline_start_node"
toots:text="STARTED" />
<ImageView
android:layout_marginStart="15dp"
android:id="#+id/timeline_start_node"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 1 EDGE -->
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_marginStart="#dimen/timeline_edge_padding"
android:layout_marginEnd="#dimen/timeline_edge_padding"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="#+id/timeline_start_node"
app:layout_constraintEnd_toStartOf="#id/timeline_split_node"
app:layout_constraintStart_toEndOf="#id/timeline_start_node"
app:layout_constraintTop_toTopOf="#+id/timeline_end_node" />
<!-- SPLIT -->
<ImageView
android:id="#+id/timeline_split_node"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.84"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/fast_goal_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="#+id/timeline_split_node"
app:layout_constraintStart_toStartOf="#+id/timeline_split_node"
app:layout_constraintTop_toBottomOf="#+id/timeline_split_node"
toots:text="GOAL - TEST - LONG" />
<!-- 2 EDGE -->
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_marginStart="#dimen/timeline_edge_padding"
android:layout_marginEnd="#dimen/timeline_edge_padding"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="#+id/timeline_start_node"
app:layout_constraintEnd_toStartOf="#id/timeline_end_node"
app:layout_constraintStart_toEndOf="#id/timeline_split_node"
app:layout_constraintTop_toTopOf="#+id/timeline_end_node" />
<!-- END -->
<TextView
android:textSize="12sp"
android:id="#+id/fast_ended_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/timeline_end_node"
app:layout_constraintEnd_toEndOf="#+id/timeline_end_node"
toots:text="ENDED" />
<ImageView
android:layout_marginEnd="15dp"
android:id="#+id/timeline_end_node"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

When you move the circle change the constraints of the textview programmatically to the end of the parent layout instead:
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.connect(R.id.your_textview,ConstraintSet.END,R.id.the_parent_layout,ConstraintSet.END,0);
constraintSet.applyTo(yourConstraintLayout);
check the documentation for more details.

#lukas hansen
If you want to align the TextView to center, you could do something like this:
<TextView
android:textSize="12sp"
android:id="#+id/fast_ended_datetime_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:text="ENDED" />
Note: This will constraint the TextView to parent on both edges.
Also, assign a top_to_bottom_of one of the view above the TextView in the hierarchy.

Layout is being overlapped by buttons. How do I hide the buttons?

I have been learning for a couple of weeks and have been struggling with layouts in this situation. It's just a small project intended for learning. Button upg calls the LinearLayout ShopL as a popup window but it overlaps.Basically i want the red buttons to be behind(hidden from) the blue Linearlayout (see picture).
<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="#android:color/background_dark"
tools:context="com.example.daniela.test003.MainActivity"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/Total"
android:layout_width="287dp"
android:layout_height="25dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Total Geld"
android:textColor="#android:color/holo_green_dark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/perClickShower"
android:layout_width="188dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="perClickShower"
android:textColor="#android:color/holo_green_dark"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/perSecondShower"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.262"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Total"
app:layout_constraintVertical_bias="0.85" />
<TextView
android:id="#+id/perSecondShower"
android:layout_width="188dp"
android:layout_height="0dp"
android:layout_marginBottom="372dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="perSecondShower"
android:textColor="#android:color/holo_green_dark"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.262"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#android:color/holo_red_dark"
android:text="btn1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/upg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/holo_red_dark"
android:text="upg"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/perSecondShower"
app:layout_constraintVertical_bias="0.892" />
<LinearLayout
android:id="#+id/ShopL"
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/holo_blue_dark"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="81dp"
android:layout_marginTop="159dp"
android:layout_weight="0"
android:baselineAligned="false"
android:text="Button" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

If you run this layout on multiple phones, you'll notice that the "bad" behavior (the buttons appearing even though they're "covered" by the linear layout) will only happen on phones with Android Lollipop or newer.
Lollipop introduced the concept of "elevation", and all buttons on Lollipop+ have elevation by default. Pressing on one of these buttons also adds elevation for the duration of the press (that's why the shadow the button casts on the background appears to grow).
Elevation works just like the real world; things with higher elevation appear above things with lower elevation. Your linear layout doesn't define an elevation value, and linear layouts don't have elevation by default, so its elevation is 0dp. A button in the default resting state has an elevation of 2dp. As long as the button's elevation is greater than the linear layout's, the button will appear "in front" of the linear layout.
An easy solution would be to add some large amount of elevation to your linear layout:
android:elevation="12dp"
This can have other side-effects, but it's possible it will just work for you.

Text wrapping in Constraint layout

Trying to make a really simple layout for a settings page using ConstraintLayout.
Simple text views to the left one below the other and a switch to the right to the center.
The layout I have works fine for newer devices, but as soon I switch to a Nexus 4 or older, the switch goes below/disappears from the view.
Here is my layout code,
<android.support.constraint.ConstraintLayout
android:id="#+id/locationLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="parent">
<TextView
android:id="#+id/locationTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/location_title"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/guidelineLocationLayout"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textSize="16sp"/>
<TextView
android:id="#+id/locationDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/location_description"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/locationTitle"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#id/locationTitle"
app:layout_constraintRight_toLeftOf="#id/guidelineLocationLayout"
android:textSize="12sp"
/>
<Switch
android:id="#+id/locationPermissionSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guidelineLocationLayout"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/viewLocationLayout"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#d6d6d6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/locationDescription"/>
<android.support.constraint.Guideline
android:id="#+id/guidelineLocationLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="48dp" />
</android.support.constraint.ConstraintLayout>
And here are how the constraints look like for the Pixel 2XL,
Here is how they look on a smaller device,
I have used 0dp width for the long description and defined left and right constraints, anything else I could do?

You can use barriers instead of guidelines because a Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side.
According to the Documentation
Similar to a guideline, a barrier is an invisible line that you can
constrain views to. Except a barrier does not define its own position;
instead, the barrier position moves based on the position of views
contained within it. This is useful when you want to constrain a view
to the a set of views rather than to one specific view.
Hope this helps you. I've used barrier instead of guideline.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/locationLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="parent">
<TextView
android:id="#+id/locationTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Save location to the song"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/locationDescription"
android:layout_width="261dp"
android:layout_height="32dp"
android:text="Your location is only requested when a new song is identified. Location details are never sent to the server"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/locationTitle" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="locationDescription,locationTitle" />
<Switch
android:id="#+id/locationPermissionSwitch"
android:layout_width="41dp"
android:layout_height="26dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/viewLocationLayout"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#d6d6d6"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/locationDescription" />
</android.support.constraint.ConstraintLayout>

You need to change the constraints of the switch like this
<Switch
android:id="#+id/locationPermissionSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guidelineLocationLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
You are constraining the bottom of the switch to the top of the parent and top of the switch to the bottom of the parent. You have to change it to layout_constraintTop_toTopOf and layout_constraintBottom_toBottomOf

Android Bottom Sheet Peek Height get trimmed after Search View inside it get clicked

So, I have a layout, which becomes my BottomSheet view. Everything going great, and its peekHeight matches my xml. Like below gif:
Until I decided to type (or even just click) in the SearchView inside it.
When the app first run, before the SearchView's TextBox doesn't get focused, it's no problem (still neat). But after it get focused, then suddenly the bottom sheet peekHeight get trimmed.
Idk what caused this, since basically there's no setup done programatically. I even tried to reset the peekHeight programmatically each time I finish typing in the SearchView, but no luck.
So far my workaround is to add some DP to the peekHeight right in the XML. It should be 80dp, but I declare it 100dp right from the XML (GIFs are without some addtional DPs).
It gets ugly on the app first run, but after I click the SearchView, then it's all good, since the extra height get trimmed, anyway.
This is my bottom navigation xml. (Used with <include layout=".."/> on the main 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/bssf_cl_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<ImageView
android:id="#+id/bssf_iv_search_by_algolia"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:adjustViewBounds="true"
android:background="#80FFFFFF"
android:padding="#dimen/spacing_quarter"
android:src="#drawable/search_by_algolia"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bssf_sv_search_box" />
<android.support.v7.widget.SearchView
android:id="#+id/bssf_sv_search_box"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:theme="#style/AppTheme"
android:visibility="visible"
app:iconifiedByDefault="false"
app:layout_constraintBottom_toBottomOf="#id/bssf_iv_show_filter_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bssf_iv_search_by_algolia"
app:queryHint="Search" />
<ImageView
android:id="#+id/bssf_iv_show_filter_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:padding="#dimen/spacing_single"
android:src="#drawable/ic_filter_list_white_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bssf_iv_search_by_algolia" />
<TextView
android:id="#+id/bssf_tv_distance_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_single"
android:layout_marginTop="#dimen/spacing_single"
android:text="Any Distance"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bssf_iv_show_filter_button" />
<TextView
android:id="#+id/bssf_tv_warning_location_not_turned_on"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/spacing_single"
android:layout_marginStart="#dimen/spacing_single"
android:drawablePadding="2dp"
android:drawableStart="#drawable/ic_warning_accent_16dp"
android:gravity="bottom"
android:text="Location is turned off. Tap to turn on"
android:textSize="#dimen/font_small"
app:layout_constraintBaseline_toBaselineOf="#id/bssf_tv_distance_label"
app:layout_constraintStart_toEndOf="parent" />
<SeekBar
android:id="#+id/bssf_sb_distance"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/spacing_single"
android:layout_marginStart="#dimen/spacing_single"
android:layout_marginTop="#dimen/spacing_half"
android:max="25"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bssf_tv_distance_label" />
<TextView
android:id="#+id/bssf_tv_price_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_single"
android:layout_marginTop="#dimen/spacing_single"
android:text="Any Price"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bssf_sb_distance" />
<SeekBar
android:id="#+id/bssf_sb_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:layout_marginTop="#dimen/spacing_half"
android:max="9"
app:layout_constraintEnd_toEndOf="#+id/bssf_sb_distance"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="#+id/bssf_sb_distance"
app:layout_constraintTop_toBottomOf="#+id/bssf_tv_price_label" />
<TextView
android:id="#+id/bssf_tv_appetizer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/spacing_half"
android:layout_marginStart="#dimen/spacing_single"
android:layout_marginTop="#dimen/spacing_single"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:padding="#dimen/spacing_half"
android:text="Appetizer / Snack"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:layout_constraintEnd_toStartOf="#+id/bssf_tv_main_course"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bssf_sb_price" />
<TextView
android:id="#+id/bssf_tv_main_course"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/spacing_single"
android:layout_marginStart="#dimen/spacing_half"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:padding="#dimen/spacing_half"
android:text="Main Course"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:layout_constraintBaseline_toBaselineOf="#id/bssf_tv_appetizer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/bssf_tv_appetizer" />
<TextView
android:id="#+id/bssf_tv_dessert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/spacing_single"
android:layout_marginEnd="#dimen/spacing_half"
android:layout_marginStart="#dimen/spacing_single"
android:layout_marginTop="#dimen/spacing_single"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:padding="#dimen/spacing_half"
android:text="Dessert"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/bssf_tv_beverage"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bssf_tv_appetizer" />
<TextView
android:id="#+id/bssf_tv_beverage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_half"
android:layout_marginStart="#dimen/spacing_half"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:padding="#dimen/spacing_half"
android:text="Beverage"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:layout_constraintBaseline_toBaselineOf="#id/bssf_tv_dessert"
app:layout_constraintEnd_toStartOf="#+id/bssf_tv_other"
app:layout_constraintStart_toEndOf="#+id/bssf_tv_dessert" />
<TextView
android:id="#+id/bssf_tv_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/spacing_single"
android:layout_marginStart="#dimen/spacing_half"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:padding="#dimen/spacing_half"
android:text="Other"
android:textAllCaps="true"
android:textColor="#android:color/white"
app:layout_constraintBaseline_toBaselineOf="#id/bssf_tv_dessert"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/bssf_tv_beverage" />
Any one knows how to resolve this? Thanks
P.S. If anyone doesn't notice the difference, note that on the first
gif, there's a grey line under the SearchView, which is still visible
before / after collapse / expand. But on the second gif, after i click
the SearchView, there's no grey line anymore (weirdly got trimmed)
P.S.S. Oh and, maybe this detail is related, but if I try to show a Snackbar, regardless the state of the bottom sheet (expanded or collapsed), the sheet will jump to the top, leaving a grey area (from the background), between the bottom sheet and the Snackbar at the bottom of the screen. Even before the SearchView get clicked. And after the Snackbar event, occurrence on gif 2 happened (even if SearchView hasn't been clicked yet). Like below gif:

ConstraintLayout chain does not work if some chained views constrained to another chained view

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