My project is using Constraintlayout 1.1.3 and i've just updated its version to 2.0.4.
and the part of entire layout got mixed up a little. so i checked my code and i realized that i use layout_ConstraintLeft or right.
so i added "start" and "end" of attribute of ConstraintLayout. but it's stil not working.
they stick to each other.
this constraintLayout is made of flat hierarchy. and the other part of this layout still works.
why dose it not work?
how can i fix it?
this is what i want.
but it ended up being like tihs. they stick to each other. when i upgrade ConstraintLayout version.
This is my xml code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="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="#FFF"
android:fillViewport="true"
android:clickable="true"
tools:context=".ManiActivity">
<ImageView
android:id="#+id/container_outline"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#333"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
tools:viewBindingIgnore="true" />
<ImageView
android:id="#+id/iv_drawer_info_logo"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:src="#drawable/img_drawer_logo"
app:layout_constraintBottom_toBottomOf="#id/container_outline"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#id/container_outline"
app:layout_constraintStart_toStartOf="#id/container_outline"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintEnd_toEndOf="#id/container_outline"
app:layout_constraintTop_toTopOf="#id/container_outline"
tools:viewBindingIgnore="true" />
<ImageView
android:id="#+id/iv_drawer_info_name_icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:paddingTop="1dp"
android:src="#drawable/icn_drawer_name"
app:layout_constraintBottom_toBottomOf="#id/tv_drawer_info_name"
app:layout_constraintDimensionRatio="3:5"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toRightOf="#id/iv_drawer_info_logo"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_drawer_info_name"
app:layout_constraintVertical_bias="1"
tools:viewBindingIgnore="true" />
<TextView
android:id="#+id/tv_drawer_info_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:gravity="left|bottom"
android:textColor="#FFF"
android:textSize="#dimen/text_main_big"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv_drawer_info_id"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toRightOf="#id/iv_drawer_info_name_icon"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintTop_toTopOf="#id/container_outline"
app:layout_constraintVertical_chainStyle="packed"
tools:text="Hello" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_drawer_info_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/detail_margin_3"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#FFF"
android:textSize="14dp"
app:autoSizeMaxTextSize="14dp"
app:autoSizeMinTextSize="9dp"
app:autoSizeTextType="uniform"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#id/container_outline"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#id/iv_drawer_info_name_icon"
app:layout_constraintStart_toStartOf="#id/iv_drawer_info_name_icon"
app:layout_constraintRight_toLeftOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintEnd_toStartOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintTop_toBottomOf="#id/tv_drawer_info_name"
tools:text="hello wordhello wordhello wordhello wordhello wordhello wordhello wordhello word" />
<ImageView
android:id="#+id/iv_drawer_info_expire_icon"
android:layout_width="20dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="3dp"
android:layout_marginEnd="3dp"
android:paddingTop="1dp"
android:src="#drawable/icn_drawer_expire"
app:layout_constraintBottom_toBottomOf="#id/tv_drawer_info_expire_title"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintLeft_toLeftOf="#id/container_outline"
app:layout_constraintStart_toStartOf="#id/container_outline"
app:layout_constraintRight_toLeftOf="#id/tv_drawer_info_expire_title"
app:layout_constraintEnd_toStartOf="#id/tv_drawer_info_expire_title"
app:layout_constraintTop_toTopOf="#id/tv_drawer_info_expire_title"
app:layout_constraintVertical_bias="1"
tools:viewBindingIgnore="true" />
<TextView
android:id="#+id/tv_drawer_info_expire_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:text="Hello word"
android:textColor="#FFF"
android:textSize="14dp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv_drawer_info_expire"
app:layout_constraintHorizontal_bias="0.6"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/container_outline"
app:layout_constraintVertical_chainStyle="packed"
tools:viewBindingIgnore="true" />
<TextView
android:id="#+id/tv_drawer_info_expire"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/detail_margin_3"
android:textColor="#FFF"
android:textSize="14dp"
app:layout_constraintBottom_toBottomOf="#id/container_outline"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintLeft_toLeftOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintStart_toStartOf="#id/iv_drawer_info_expire_icon"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintEnd_toEndOf="#id/container_outline"
app:layout_constraintTop_toBottomOf="#id/tv_drawer_info_expire_title"
tools:text="~2020.12.31" />
<ImageButton
android:id="#+id/btn_drawer_pay"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginRight="24dp"
android:background="#drawable/ripple_white"
android:padding="15dp"
android:scaleType="fitCenter"
android:src="#drawable/img_drawer_payment"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#id/iv_drawer_info_logo"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintLeft_toLeftOf="#id/container_outline"
app:layout_constraintStart_toStartOf="#id/container_outline"
app:layout_constraintRight_toRightOf="#id/container_outline"
app:layout_constraintEnd_toEndOf="#id/container_outline"
app:layout_constraintTop_toTopOf="#id/iv_drawer_info_logo" />
</androidx.constraintlayout.widget.ConstraintLayout>
It's not clear to me why your layout doesn't work or why it stopped working when you upgraded ConstraintLayout. I suggest the you break down the layout to its basic components and build back up to the full layout.
Considering the images that you posted, the following is how I would approach this using ConstraintLayout chains:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintHeight_percent="0.15"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="TextView"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/imageView"
tools:layout_editor_absoluteY="172dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
tools:layout_editor_absoluteY="172dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
This XML produces the following image:
Other than that, check that all the constraints you have are what you want and that you understand what they are doing. Starting from the basic layout and added one component or small set of components at a time would be a reasonable approach to solving the problem.
Related
I'm building an app and I can't figure out how can I make my app not break on certain screen sizes.
I want the app to have a standard look on all devices.
how it should look here
how it looks on the pixel 3
how it looks on a tablet
<ImageView
android:scaleType="fitXY"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/hub_background" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="19dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="19dp" />
<ImageView
android:translationZ="3dp"
android:id="#+id/background2"
android:layout_width="409dp"
android:layout_height="1200dp"
android:adjustViewBounds="true"
android:maxWidth="302dp"
android:maxHeight="722dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/start_anim_background_color"
tools:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/monthProgress"
android:layout_width="327dp"
android:layout_height="159dp"
android:layout_marginTop="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintVertical_bias="0.0"
tools:ignore="=">
<TextView
android:id="#+id/topPanel"
android:layout_width="320dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:background="#drawable/btn_shape_capsule_empty"
android:gravity="center_vertical"
android:textAlignment="center"
android:textSize="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/time"
app:layout_constraintStart_toStartOf="#+id/money"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/money"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="1500$"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/time"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="150hrs"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="Your month's progress:"
android:textColor="#color/white"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/line"
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#757575"
app:layout_constraintBottom_toBottomOf="#+id/topPanel"
app:layout_constraintEnd_toEndOf="#+id/topPanel"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/topPanel" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout1"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="start a new\nshift"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="360dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="see all of\nyour shifts"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout3"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="settings"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout4"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/btn_shape_lightedge1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="#color/white"
android:gravity="center"
android:text="about"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm using up as my measurement unit for everything.
It's impossible for it to look the same on all different screens as they have different ratios. But what is possible is to make it look very similar on different screens with the same ratio.
Generally the best is going with dp since the user can then rescale your app via Android settings if he/she has sight difficulties (to e.g. make it bigger). But if you prefer your app to always use the same design ratios you can for example use GridLayouts and weights. You can then specify how much percentage of your screen should be covered by a view. Additionally, you could of course also always go by manually implementing stuff like
desiredRatio = 0.4f;
viewHeight = desiredRatio * getMeasuredHeight();
and then applying the height to your view by changing the LayoutParams or implementing your own ViewGroup and do the whole onLayout stuff yourself (sure possible and necessary in rare occasions)
Generally, I'd try to get it done with GridLayouts or LinearLayouts using weights and in rare cases implement your own ViewGroup.
So in your case that could be something like
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height=match_parent"
app:orientation="horizontal"
app:columnCount="2">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/monthProgress"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout_4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
</androidx.gridlayout.widget.GridLayout>
Sorry for the missing indentations, the StackOverFlow code "editor" is just horrible.
Anyhow, that's how you'll get some parts done. Make sure to set the height in your ConstraintLayouts to "0dp", likewise with the width. Otherwise, GridLayout won't be able to do what you want.
Additionally, you used android:scaleType="fitXY" in your ImageView. That will look weird. Instead, I'd recommend centerCrop instead.
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.
I have read about the Chains feature in ConstraintLayout and all the examples mention chaining a set of View/ViewGroup objects as follows:
I have a set of View objects as follows:
Where, each 'X' image is constrained with the text on the right respectively but each 'X' and the text view to right are not wrapped in any ViewGroup. All these items are direct children of ConstraintLayout.
What I want is to have a chain of,
{{'X' image, TextView to its right},
{'X' image, TextView to its right},
{'X' image, TextView to its right}}
But I don't want to(or wouldn't prefer to) have the {'X' image, TextView to its right} as a ViewGroup as I am aiming for a flat hierarchy ultimately as much as possible through the use of ConstraintLayout.
What would be the optimum way to design this interface?
How about something like this
<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"
tools:context=".MainActivity">
<ImageView
android:id="#+id/iv_one"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="50dp"
app:layout_constraintEnd_toStartOf="#+id/tv_one"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_three" />
<TextView
android:id="#+id/tv_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="#+id/iv_one"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/iv_one" />
<ImageView
android:id="#+id/iv_two"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="50dp"
app:layout_constraintEnd_toStartOf="#+id/tv_two"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/iv_one"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_one" />
<TextView
android:id="#+id/tv_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="#+id/iv_two"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_two" />
</androidx.constraintlayout.widget.ConstraintLayout>
<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/text_white"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_20sdp"
app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteY="72dp"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_10sdp"
app:layout_constraintEnd_toStartOf="#+id/textView1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
tools:layout_editor_absoluteY="72dp"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toTopOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginTop="#dimen/_10sdp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView1"
tools:layout_editor_absoluteY="72dp"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output
I want to make layout with dynamic text like on the picture. The nearest thing I came up is this code: I still have problems like hidden text and icon by parent ConstraintLayout padding. Is there better solution to make such dynamic layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/addressWrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="2dp"
android:paddingBottom="3dp"
android:background="#drawable/address_background_themed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<ImageView
android:id="#+id/iconImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:src="#drawable/round_person_18px"
android:tint="#color/grey"
app:layout_constraintWidth_default="wrap"
app:layout_constraintEnd_toStartOf="#+id/txtAddress"
app:layout_constraintTop_toTopOf="#+id/txtAddress"
app:layout_constraintBottom_toBottomOf="#+id/txtAddress"
/>
<TextView
android:id="#+id/txtAddress"
style="#style/Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:includeFontPadding="false"
android:singleLine="true"
android:textAlignment="textStart"
android:textColor="?TransactionDetailValueTextColor"
app:layout_constraintWidth_default="wrap"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:text="rgergrgergergrververewfewfweenknknknknkgk8f7xxau"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Your wrapper is wrapping content, so it's best to provide all constraints for the Views inside of it. Now, app:layout_constraintWidth_default is deprecated and for Views that are wrap_content app:layout_constrainedWidth should be used instead.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/addressWrapper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="2dp"
android:paddingBottom="3dp"
android:background="#drawable/address_background_themed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:id="#+id/iconImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:src="#drawable/round_person_18px"
android:tint="#color/grey"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txtAddress"
app:layout_constraintTop_toTopOf="#+id/txtAddress"
app:layout_constraintBottom_toBottomOf="#+id/txtAddress" />
<TextView
android:id="#+id/txtAddress"
style="#style/Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="middle"
android:includeFontPadding="false"
android:singleLine="true"
android:textAlignment="textStart"
android:textColor="?TransactionDetailValueTextColor"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iconImage"
tools:text="rgergrgergergrververewfewfweenknknknknkgk8f7xxau"
android:layout_marginBottom="8dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have to make a layout with following image using Constraint Layout (ver 1.1.2)
This is done, but there is an issue. When the value of any of the field is larger then the width available it get something like this:
I want to keep the alignments while warping the value text in consequent lines.
Here is the code for one row:
<android.support.constraint.ConstraintLayout
android:id="#+id/top_application_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintWidth_default="wrap"
android:padding="5dp"
android:background="#drawable/bg_white_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_client_container"
>
<TextView
android:id="#+id/top_application_label"
style="?gsTrafficHistoryClientDetailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:text="#string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/top_application"
style="?gsTrafficHistoryClientDetailValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/top_application_label"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Now I have tried Relative Layout but I want to do it using Constraint Layout. Really appreciate any pointers.
Add app:layout_constrainedWidth="true" attribute to the TextView which is going to expand (id/top_application) to allow for wrap_content and enforce constraints at the same time.
Change Your TextView Width to match_constraint, the problem is wrap_content.
<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/top_application_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_white_header"
android:padding="5dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_client_container"
app:layout_constraintWidth_default="wrap">
<TextView
android:id="#+id/top_application_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="?gsTrafficHistoryClientDetailValue"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="#string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/top_application"
android:layout_width="0dp"
android:layout_height="wrap_content"
style="?gsTrafficHistoryClientDetailValue"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/top_application_label"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Try using the concepts of chains in the constraint layouts using which I have achieved the layout you wanted as follows
<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="wrap_content">
<TextView
android:id="#+id/tv_left1"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_right1"
app:layout_constraintEnd_toStartOf="#+id/tv_right1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/tv_right1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_left1"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/tv_left2"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_right2"
app:layout_constraintEnd_toStartOf="#+id/tv_right2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_left1"
/>
<TextView
android:id="#+id/tv_right2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_left2"
app:layout_constraintTop_toBottomOf="#+id/tv_right1"
/>
<TextView
android:id="#+id/tv_left3"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:padding="20dp"
android:text="Most active client"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_right3"
app:layout_constraintEnd_toStartOf="#+id/tv_right3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_left2"
/>
<TextView
android:id="#+id/tv_right3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_left3"
app:layout_constraintTop_toBottomOf="#+id/tv_right2"
/>
</android.support.constraint.ConstraintLayout>
**Note:**Besides this you can use the concepts of the barrier which you can find here
replace with below code
<android.support.constraint.ConstraintLayout
android:id="#+id/top_application_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintWidth_default="wrap"
android:padding="5dp"
android:background="#drawable/bg_white_header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_client_container"
>
<TextView
android:id="#+id/top_application_label"
style="?gsTrafficHistoryClientDetailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:text="#string/top_application"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/top_application"
style="?gsTrafficHistoryClientDetailValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="YouTube.com YouTube.com YouTube.com"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#id/top_application_label"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Try using constraintWidth_default & constraintWidth_percent like:
<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">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="top_application"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".5" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".5" />
</android.support.constraint.ConstraintLayout>