How to get the middle part of the activity to be scrollable? - android

I am trying to get something like this in one of my activities:
attraction detailed view
I want the image to be fixed at the top, the middle bit with the text to be scrollable as description and short description will have quite a lot of text, and the buttons to be fixed to the bottom. only the middle one is permanent visibility, the margin ones are hidden or visible depending type of attraction listed.
I tried to enclose in linear layouts but didnt work, most probably my mistake.
My xml file is :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
tools:context=".DetailedViewActivity">
<TextView
android:id="#+id/textViewDetailedName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/share_bold"
android:text="#string/name"
android:textAlignment="center"
android:textColor="#color/colorDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4" />
<TextView
android:id="#+id/textViewDetailedAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/address"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoAddress"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoAddress"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoAddress" />
<TextView
android:id="#+id/textViewDetailedPostCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/post_code"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoPostCode"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoPostCode"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoPostCode" />
<TextView
android:id="#+id/textViewDetailedShortDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/short_description"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedInfoShortDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedInfoShortDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoShortDesc" />
<TextView
android:id="#+id/textViewDetailedDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/description"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoDescription" />
<TextView
android:id="#+id/textViewDetailedPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/share"
android:text="#string/price"
android:textAlignment="viewStart"
android:textColor="#color/colorDark"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedInfoPrice" />
<TextView
android:id="#+id/textViewDetailedInfoAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:fontFamily="#font/share"
android:text="#string/address"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedName"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedName"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedName" />
<TextView
android:id="#+id/textViewDetailedInfoPostCode"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/post_code"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedAddress"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedAddress"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedAddress" />
<TextView
android:id="#+id/textViewDetailedInfoShortDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/short_description"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedPostCode"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedPostCode"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedPostCode" />
<TextView
android:id="#+id/textViewDetailedInfoDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/description"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedShortDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedShortDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedShortDesc" />
<TextView
android:id="#+id/textViewDetailedInfoPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/share"
android:text="#string/price"
android:textColor="#color/colorTeal"
app:layout_constraintEnd_toEndOf="#+id/textViewDetailedDesc"
app:layout_constraintStart_toStartOf="#+id/textViewDetailedDesc"
app:layout_constraintTop_toBottomOf="#+id/textViewDetailedDesc" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="270dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image" />
<Button
android:id="#+id/btnReadReviews"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/read_reviews"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btnBook"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/book"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/btnPostReview"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:fontFamily="#font/share_bold"
android:text="#string/add_review"
android:textAllCaps="false"
android:textColor="#color/colorDark"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>


You can wrap all scroll views into ScroolView and use another ConstraintLayout inside the ScroolView. You can found an example here

Related

Recyclerview layout in dialog box

I am facing a problem while opening recyclerview in a dialog box. The layout in the recyclerview is overlapping and cutting when I open this in a dialog box same like this:
But, my original layout is look like this:
and here is the code for my layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="14dp"
android:elevation="10dp"
android:padding="8dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/corner_layout"
android:paddingTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/r_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Admission No."
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/r_d_field_name"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/admission_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="45654"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_name"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/r_d_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toTopOf="#+id/p_a_field_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/r_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />
<TextView
android:id="#+id/p_a_field_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Parents Name"
android:textColor="#009EBB"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/btn_call_st"
app:layout_constraintStart_toStartOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/r_d_field_name"
tools:ignore="RtlHardcoded" />
<TextView
android:id="#+id/st_father_mother_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suresh Kumar Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/btn_view_st_profile"
app:layout_constraintStart_toStartOf="#+id/st_name"
app:layout_constraintTop_toBottomOf="#+id/st_name" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_view_st_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="100dp"
android:layout_marginBottom="12dp"
android:gravity="center"
android:src="#drawable/view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/btn_call_st"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.9"
app:tint="#color/white" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_call_st"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:backgroundTint="#E10751"
android:gravity="center"
android:src="#drawable/phone"
app:layout_constraintBottom_toBottomOf="#+id/btn_view_st_profile"
app:layout_constraintEnd_toStartOf="#+id/btn_view_st_profile"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btn_view_st_profile"
app:tint="#color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

If you constrain both left and right, you need to set width=0dp
<TextView
android:id="#+id/st_name"
android:layout_width="0dp" <-- change to 0dp
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Harikant Sharma"
android:textColor="#555555"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/st_father_mother_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/r_d_field_name"
app:layout_constraintTop_toBottomOf="#+id/admission_no" />

dynamic height alignment in constraintlayout

I have 3 textview in which the text can change dynamically, I need to make them equal to each other, whose height is greater than that height and take for all. I'm trying using barriers but don't get positive result, also i try set all textviews height 0dp but all textviews then disappeared, i can set the height for one textview wrap_content and for another 0dp but then they will be equal only in the first textview. When I used linearlayout I did it, but with constraintlayout i don't understand how do it.
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="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/label_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="15dp"
android:fontFamily="#font/gothic_bold"
android:gravity="center"
android:text="test 1"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/label_zone2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/coefficient_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="#font/gothic"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone1"
app:layout_constraintStart_toStartOf="#+id/label_zone1"
app:layout_constraintTop_toBottomOf="#+id/label_zone1" />
<TextView
android:id="#+id/consumption_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/input_border"
android:fontFamily="#font/gothic"
android:gravity="center|center_vertical"
android:text="1234567"
android:textColor="#color/orange"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="#+id/coefficient_zone1"
app:layout_constraintStart_toStartOf="#+id/coefficient_zone1"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<TextView
android:id="#+id/label_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:fontFamily="#font/gothic_bold"
android:gravity="center"
android:text="test 2"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/label_zone3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/label_zone1"
app:layout_constraintTop_toTopOf="#+id/label_zone1" />
<TextView
android:id="#+id/coefficient_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="#font/gothic"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone2"
app:layout_constraintStart_toStartOf="#+id/label_zone2"
app:layout_constraintTop_toBottomOf="#+id/label_zone2" />
<TextView
android:id="#+id/consumption_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/input_border"
android:fontFamily="#font/gothic"
android:gravity="center|center_vertical"
android:text="1234567"
android:textColor="#color/orange"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="#+id/coefficient_zone2"
app:layout_constraintStart_toStartOf="#+id/coefficient_zone2"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<TextView
android:id="#+id/label_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:fontFamily="#font/gothic_bold"
android:gravity="center"
android:text="test 3"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/label_zone2"
app:layout_constraintTop_toTopOf="#+id/label_zone2" />
<TextView
android:id="#+id/coefficient_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="#font/gothic"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone3"
app:layout_constraintStart_toStartOf="#+id/label_zone3"
app:layout_constraintTop_toBottomOf="#+id/label_zone3" />
<TextView
android:id="#+id/consumption_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/input_border"
android:fontFamily="#font/gothic"
android:gravity="center|center_vertical"
android:text="12345678"
android:textColor="#color/orange"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="#+id/coefficient_zone3"
app:layout_constraintStart_toStartOf="#+id/coefficient_zone3"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="coefficient_zone1,coefficient_zone2,coefficient_zone3" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="consumption_zone1,consumption_zone2,consumption_zone3" />
<TextView
android:id="#+id/label_calculated_indicators"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="#font/gothic_bold"
android:gravity="center"
android:text="title title title title"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone3"
app:layout_constraintStart_toStartOf="#+id/label_zone1"
app:layout_constraintTop_toBottomOf="#+id/consumption_zone1" />
</androidx.constraintlayout.widget.ConstraintLayout>

As Nikos Hidalgo stated in the comment to your question, this is a common question that is asked on Stack Overflow. I have come across four ways to accomplish a common width and/or common height for a set of views. Unfortunately, none is ideal.
Here is a screen shot showing the three of the four ways to get to common dimensions. The XML for this screen is at the end of this post.
Embedded LinearLayout
This is probably the easiest way. Place the TextViews in a horizontal LinearLayout setting their heights to MATCH_PARENT. Set the height of the LinearLayout to WRAP_CONTENT and all will work out. The benefit of this way is its simplicity. Negatives include the overhead of a nested layout and the inability for any of the views within the LinearLayout to be connected to any view outside the LinearLayout - they become an island.
Invisible Views
This is probably the most complicated way of doing things but it may be OK depending upon the layout. The basic problem with setting up barriers to adjust the height of a set of views is that the barrier placement depends upon the height of the views and the height of the views depend upon the barrier placement. This is a referential quandary and does not work with the current version of ConstraintLayout.
The invisible view solution is to duplicate the views for which height is to be adjusted as invisible views. Set a top and a bottom barrier to these invisible views. Set the height of the visible views to MATCH_CONSTRAINTS and connect the tops to the top barrier and the bottom to the bottom barrier.
The benefit of this approach is that it is totally flat and involves just the ConstraintLayout. The drawbacks are that it increases the view count by the number of views to be adjusted, its complexity and everything that complexity entails.
Constraint Layout Size Helper
The third approach is to use a custom ConstraintHelper to change the heights of the views. The custom ConstraintHelper is inserted into the XML for the layout like any other view and made to reference the views to be adjusted.
The benefit of this approach is that the changes are all kept within the XML. The negative is that a custom class must be referenced and maintained.
Listener to Update Width/Height
This final approach is to custom code the height adjustments using a global layout listener, a layout listener or the like. This is similar to the ConstraintHelper approach but exists outside of the XML and may not be well encapsulated.
It might also be possible to code custom views to set heights of views to the greatest height either with a custom ConstraintLayout or a custom TextView.
Sample Layout
<TextView
android:id="#+id/textView2_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Embedded LinearLayout"
app:layout_constraintBottom_toTopOf="#+id/layout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
tools:ignore="HardcodedText" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toTopOf="#id/textView3_0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2_0">
<TextView
android:id="#+id/textView2_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_weight="1"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView2_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:layout_weight="1"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView2_3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:layout_weight="1"
android:background="#android:color/white"
android:gravity="center"
android:text="This is the TextView that has the maximum height."
tools:ignore="HardcodedText" />
</LinearLayout>
<TextView
android:id="#+id/textView3_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Invisible Views"
app:layout_constraintBottom_toTopOf="#id/textView3_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/layout2"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView3_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView3_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3_2"
tools:visibility="invisible"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView3_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#id/textView5_0"
app:layout_constraintEnd_toStartOf="#+id/textView3_3"
app:layout_constraintStart_toEndOf="#+id/textView3_1"
app:layout_constraintTop_toBottomOf="#id/textView3_0"
tools:visibility="invisible"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView3_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="This is the TextView that has the maximum height."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3_2"
app:layout_constraintTop_toTopOf="#+id/textView3_2"
tools:visibility="invisible"
tools:ignore="HardcodedText" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="textView3_1,textView3_2,textView3_3" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrierBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView3_1,textView3_2,textView3_3" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toTopOf="#id/barrierBottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrierTop" />
<TextView
android:id="#+id/textView4_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#id/barrierBottom"
app:layout_constraintEnd_toStartOf="#+id/textView4_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrierTop"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView4_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#id/barrierBottom"
app:layout_constraintEnd_toStartOf="#+id/textView4_3"
app:layout_constraintStart_toEndOf="#+id/textView4_1"
app:layout_constraintTop_toBottomOf="#+id/barrierTop"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView4_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="This is the TextView that has the maximum height."
app:layout_constraintBottom_toTopOf="#id/barrierBottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4_2"
app:layout_constraintTop_toBottomOf="#+id/barrierTop"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView5_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ConstraintLayout Size Helper"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrierBottom"
tools:ignore="HardcodedText" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintBottom_toBottomOf="#id/textView5_1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/textView5_1" />
<TextView
android:id="#+id/textView5_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView5_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView5_2"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView5_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/textView5_3"
app:layout_constraintStart_toEndOf="#+id/textView5_1"
app:layout_constraintTop_toBottomOf="#+id/textView5_0"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/textView5_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:background="#android:color/white"
android:gravity="center"
android:text="This is the TextView that has the maximum height."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView5_2"
app:layout_constraintTop_toTopOf="#+id/textView5_2"
tools:ignore="HardcodedText" />
<com.example.constraintsizehelper.ConstraintSizeHelper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="textView5_1,textView5_2,textView5_3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:setCommonWidth="true"
app:setCommonHeight="true"
tools:layout_height="120dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is a reduced version of your layout using a Constraint Size Helper class (not provided):
And its XML:
activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/label_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="15dp"
android:gravity="center"
android:text="test 1"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/label_zone2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/coefficient_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone1"
app:layout_constraintStart_toStartOf="#+id/label_zone1"
app:layout_constraintTop_toBottomOf="#+id/label_zone1" />
<TextView
android:id="#+id/consumption_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/input_border"
android:gravity="center|center_vertical"
android:text="0"
android:textColor="#color/orange"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="#+id/coefficient_zone1"
app:layout_constraintStart_toStartOf="#+id/coefficient_zone1"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<TextView
android:id="#+id/label_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:gravity="center"
android:text="test 2"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/label_zone3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/label_zone1"
app:layout_constraintTop_toTopOf="#+id/label_zone1" />
<TextView
android:id="#+id/coefficient_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone2"
app:layout_constraintStart_toStartOf="#+id/label_zone2"
app:layout_constraintTop_toBottomOf="#+id/label_zone2" />
<TextView
android:id="#+id/consumption_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/input_border"
android:gravity="center|center_vertical"
android:text="12345678"
android:textColor="#color/orange"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="#+id/coefficient_zone2"
app:layout_constraintStart_toStartOf="#+id/coefficient_zone2"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<TextView
android:id="#+id/label_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="test 3"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/label_zone2"
app:layout_constraintTop_toTopOf="#+id/label_zone2" />
<TextView
android:id="#+id/coefficient_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone3"
app:layout_constraintStart_toStartOf="#+id/label_zone3"
app:layout_constraintTop_toBottomOf="#+id/label_zone3" />
<TextView
android:id="#+id/consumption_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/input_border"
android:gravity="center|center_vertical"
android:text="1234567890"
android:textColor="#color/orange"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="#+id/coefficient_zone3"
app:layout_constraintStart_toStartOf="#+id/coefficient_zone3"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="coefficient_zone1,coefficient_zone2,coefficient_zone3" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="consumption_zone1,consumption_zone2,consumption_zone3" />
<TextView
android:id="#+id/label_calculated_indicators"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="title title title title"
android:textAllCaps="true"
android:textColor="#color/blue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone3"
app:layout_constraintStart_toStartOf="#+id/label_zone1"
app:layout_constraintTop_toBottomOf="#+id/consumption_zone1" />
<com.example.myapplication.ConstraintSizeHelper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_height="120dp"
app:setCommonWidth="false"
app:setCommonHeight="true"
app:constraint_referenced_ids="consumption_zone1,consumption_zone2,consumption_zone3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

As per I understand your question try to use horizontal chain for "consumption_zone" all textviews.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/label_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="15dp"
android:gravity="center"
android:text="test 1"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/label_zone2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/coefficient_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone1"
app:layout_constraintStart_toStartOf="#+id/label_zone1"
app:layout_constraintTop_toBottomOf="#+id/label_zone1" />
<TextView
android:id="#+id/label_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="15dp"
android:gravity="center"
android:text="test 2"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/label_zone3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/label_zone1"
app:layout_constraintTop_toTopOf="#+id/label_zone1" />
<TextView
android:id="#+id/coefficient_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone2"
app:layout_constraintStart_toStartOf="#+id/label_zone2"
app:layout_constraintTop_toBottomOf="#+id/label_zone2" />
<TextView
android:id="#+id/coefficient_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text="
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/label_zone3"
app:layout_constraintStart_toStartOf="#+id/label_zone3"
app:layout_constraintTop_toBottomOf="#+id/label_zone3" />
<TextView
android:id="#+id/label_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="test 3"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/label_zone2"
app:layout_constraintTop_toTopOf="#+id/label_zone2" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="coefficient_zone1,coefficient_zone2,coefficient_zone3" />
<TextView
android:id="#+id/consumption_zone1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center|center_vertical"
android:text="123456789"
android:textColor="#color/colorAccent"
android:textSize="24sp"
android:layout_marginStart="10dp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toStartOf="#+id/consumption_zone2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<TextView
android:id="#+id/consumption_zone2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center|center_vertical"
android:text="123456789"
android:textColor="#color/colorAccent"
android:textSize="24sp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toStartOf="#+id/consumption_zone3"
app:layout_constraintStart_toEndOf="#+id/consumption_zone1"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<TextView
android:id="#+id/consumption_zone3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="center|center_vertical"
android:text="123456789"
android:textColor="#color/colorAccent"
android:textSize="24sp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toBottomOf="#+id/barrier2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/consumption_zone2"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="consumption_zone1,consumption_zone2,consumption_zone3" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android ConstraintLayout - Top constraint for two layout

I am stuck with ConstraintLayout and confused to use which property to do as I want.
As per the following image, I wanted to give top-constraint of Details to either TextView of OrderTakenBy or OrderCollectedBy as per the height of that view.
Scenario:
If I give top constraint of Detail view as the bottom of OrderTakenBy TextView, It will overlap (as below image) the view of OrderCollectedBy Textview if it gets more lines. Vice versa.
Note: Order Taken By or Order Collected By may contain two or three lines.
So what can I do for top constraints which can work for both dynamic heights?
Edited:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.AccountMasterAddActivity"
tools:showIn="#layout/activity_account_master_add">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_no"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/supplierNameTextView"
app:layout_constraintTop_toBottomOf="#+id/supplierNameTextView" />
<TextView
android:id="#+id/orderNoTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="#string/hint_supplier_name"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/supplierNameTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="TextView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:gravity="end"
android:text="#string/hint_order_date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/supplierNameTextView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/orderDateTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6"
tools:text="TextView" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_taken_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/orderNoTextView"
app:layout_constraintTop_toBottomOf="#+id/orderNoTextView" />
<TextView
android:id="#+id/orderTakenByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="TextView TextView"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView8"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="#string/hint_order_collected_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderDateTextView"
app:layout_constraintStart_toStartOf="#+id/orderDateTextView"
app:layout_constraintTop_toTopOf="#+id/textView8" />
<TextView
android:id="#+id/orderCollectedByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10"
tools:text="TextView TextView TextView TextView TextView" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/hint_details"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderCollectedByTextView"
app:layout_constraintStart_toStartOf="#+id/orderTakenByTextView"
app:layout_constraintTop_toBottomOf="#+id/orderCollectedByTextView" />
<TextView
android:id="#+id/detailsTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:autoLink="phone"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView12"
app:layout_constraintStart_toStartOf="#+id/textView12"
app:layout_constraintTop_toBottomOf="#+id/textView12"
tools:text="TextView" />
<TextView
android:id="#+id/productLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Products"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/detailsTextView"
app:layout_constraintStart_toStartOf="#+id/detailsTextView"
app:layout_constraintTop_toBottomOf="#+id/detailsTextView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/productLabel"
app:layout_constraintStart_toStartOf="#+id/productLabel"
app:layout_constraintTop_toBottomOf="#+id/productLabel" />
</androidx.constraintlayout.widget.ConstraintLayout>
Anyone can help?

You can use the Barrier To overcome this issue.
A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.
Here is the Documentation for Barrier
Add Order Taken By or Order Collected By as app:constraint_referenced_ids="view1,view2" and set the Detail view top to the bottom of the Barrie.
XML Reference:
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="411dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="order_taken_by,order_collected_by"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="21dp"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New"
android:textSize="#dimen/_16sp"
app:layout_constraintTop_toBottomOf="#+id/barrier"/>
Here is the output:

Use bottom barrier
Use Deatils textview top constraint to barrier and barrier reference to OrderTakenBy, OrderCollectedBy textview.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/OrderTakenBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="warehouse sdgjklsdj jgkjskg"
app:layout_constraintEnd_toStartOf="#+id/OrderCollectedBy"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/OrderCollectedBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="hospital fhkhsf "
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/OrderTakenBy"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="OrderCollectedBy, OrderTakenBy" />
<TextView
android:id="#+id/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="lorem_ipsum"
android:gravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>

I think you can wrap order taken by and order collected by in another constraint layout or to check programmatically the height(after setting the text) of the TextView's and change programmatically the top constraint.

ConstraintLayout not showing last child

I've defined a ConstraintLayout which consists of 3 parts
a chart
a block containing informations relative to the chart
a refresh rate
defined as follow:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/graph_frame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/chartBackgroundColor"
android:paddingBottom="8dp"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/chartBackgroundColor" />
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/information"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#F21F2124"
android:padding="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/graph_frame">
<!-- title -->
<TextView
android:id="#+id/current_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:text="Current Volt. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Average Volt."
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_title" />
<TextView
android:id="#+id/range_min_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range min. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_title" />
<TextView
android:id="#+id/range_max_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range max. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_min_title" />
<TextView
android:id="#+id/auto_focus_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Auto Focus"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_max_title" />
<TextView
android:id="#+id/lecture_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Lecture"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_title" />
<!-- value -->
<TextView
android:id="#+id/current_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{viewModel.currentVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toRightOf="#+id/current_voltage_title"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.averageVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_value" />
<TextView
android:id="#+id/range_min_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMinVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_value" />
<TextView
android:id="#+id/range_max_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMaxVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_min_value" />
<TextView
android:id="#+id/auto_focus_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoFocusLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_max_value" />
<TextView
android:id="#+id/lecture_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoPlayLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_value" />
<!-- pause -->
<ImageButton
android:id="#+id/pause_button"
android:onClick="#{() -> viewModel.pauseButtonPressed()}"
android:src="#drawable/ic_pause_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/auto_focus_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<!-- auto-focus -->
<ImageButton
android:id="#+id/auto_focus_button"
android:onClick="#{() -> viewModel.autoFocusButtonPressed()}"
android:src="#drawable/ic_pause_white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pause_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/warning"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CC1F2124"
android:gravity="center"
android:text="#{viewModel.refreshRateLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/information"
tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>
<data>
<variable
name="viewModel"
type="com.imihydronic.hytune.features.oscilloscope.OscilloscopeViewModel" />
</data>
Everything is showing as expected in the preview from Android Studio:
But unfortunately the last block (the refresh rate one) does not appear on a real device:
What am I missing here?
Update:
The layout given above was used for a Fragment. This Fragment was inflated inside a FrameLayout container which in turns was wrapped by a ScrollView. Removing the ScrollView and using Taslim Oseni solution did the work.

I can see that you have three views lined up linearly with id: graph_frame, information and warning. A quick fix would be to constrain each of these three views at both vertical ends (top and bottom). This way all three views would always fit the screen no matter what.
Therefore your code would look this way (I truncated the code to improve readability):
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/graph_frame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/chartBackgroundColor"
android:paddingBottom="8dp"
app:layout_constraintDimensionRatio="5:4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/information">
...
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/information"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#F21F2124"
android:padding="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/graph_frame"
app:layout_constraintBottom_toTopOf="#+id/warning">
...
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/warning"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CC1F2124"
android:gravity="center"
android:text="#{viewModel.refreshRateLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/information"
tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>
I hope this helps. Merry coding!

Use guidelines and constraint children between them.

Use GuideLine Constraint to get this.
I added two horizontal guideline to divide screen in three section.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/graph_frame"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/chartBackgroundColor"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.github.mikephil.charting.charts.LineChart
android:id="#+id/graph"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/chartBackgroundColor" />
</FrameLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp"
app:layout_constraintGuide_percent="0.4" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/information"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#F21F2124"
android:padding="16dp"
app:layout_constraintBottom_toTopOf="#+id/guideline1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline">
<!-- title -->
<TextView
android:id="#+id/current_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"
android:text="Current Volt. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Average Volt."
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_title" />
<TextView
android:id="#+id/range_min_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range min. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_title" />
<TextView
android:id="#+id/range_max_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Range max. (3s)"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_min_title" />
<TextView
android:id="#+id/auto_focus_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Auto Focus"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/range_max_title" />
<TextView
android:id="#+id/lecture_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:minWidth="150dp"
android:text="Lecture"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_title"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_title" />
<!-- value -->
<TextView
android:id="#+id/current_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{viewModel.currentVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toRightOf="#+id/current_voltage_title"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/average_voltage_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.averageVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/current_voltage_value" />
<TextView
android:id="#+id/range_min_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMinVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/average_voltage_value" />
<TextView
android:id="#+id/range_max_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.rangeMaxVoltageLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_min_value" />
<TextView
android:id="#+id/auto_focus_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoFocusLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/range_max_value" />
<TextView
android:id="#+id/lecture_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#{viewModel.autoPlayLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintLeft_toLeftOf="#+id/current_voltage_value"
app:layout_constraintTop_toBottomOf="#+id/auto_focus_value" />
<!-- pause -->
<ImageButton
android:id="#+id/pause_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{() -> viewModel.pauseButtonPressed()}"
android:src="#drawable/ic_pause_white"
app:layout_constraintBottom_toTopOf="#+id/auto_focus_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<!-- auto-focus -->
<ImageButton
android:id="#+id/auto_focus_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{() -> viewModel.autoFocusButtonPressed()}"
android:src="#drawable/ic_pause_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pause_button" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="16dp"
app:layout_constraintGuide_percent="0.7" />
<TextView
android:id="#+id/warning"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CC1F2124"
android:gravity="center"
android:text="#{viewModel.refreshRateLabelValue}"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline1"
tools:text="Refresh rate = 125ms" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output :

ConstraintLayout left align the middle element of two horizontal chains?

I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.
I have created 2 horizontal chains with chainStyle as spread_inside.
Here is the layout xml:
https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896
Any idea how to do that?

Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.
<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/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/tvStockName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ICICI BANK LIMITED" />
<TextView
android:id="#+id/tvStockSymbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/tvStockName"
app:layout_constraintTop_toBottomOf="#+id/tvStockName"
tools:text="ICICIBANK" />
<TextView
android:id="#+id/tvStockValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="306.75" />
<TextView
android:id="#+id/tvStockPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="(1.44%)"
/>
<TextView
android:id="#+id/tvStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/tvStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="-4.50"
/>
<TextView
android:id="#+id/tvAvgPriceTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Avg. Price"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQtyTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvQtyTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Qty"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvCurrentValueTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvAvgPriceTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvCurrentValueTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Curr. Value"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQtyTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvAvgPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQty"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAvgPriceTitle"
tools:text="241.83" />
<TextView
android:id="#+id/tvQty"
android:layout_width="0dp"
android:layout_height="20dp"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockInvestment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvAvgPrice"
app:layout_constraintTop_toBottomOf="#+id/tvQtyTitle"
tools:text="4901" />
<TextView
android:id="#+id/tvTotalStockInvestment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQty"
app:layout_constraintTop_toBottomOf="#+id/tvCurrentValueTitle"
tools:text="15,13,184" />
<TextView
android:id="#+id/tvTotalStockPercent"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="(+27.69%)"
/>
<TextView
android:id="#+id/tvTotalStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="+3,28,234"
/>
<TextView
android:id="#+id/tvDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference"
tools:text="-24,015"
/>
<TextView
android:id="#+id/tvTitleDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Today's Gain"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvDayStockDifference"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference" />
Output of the layout above:

Categories

Resources