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>
Related
I have a small TextView inside CardView like design. It used with as Firebase Recycler View to display content. Here its code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/main_design">
<ImageView
android:id="#+id/rycImage"
android:layout_width="100dp"
android:layout_height="180dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/rycName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:lines="1"
android:text="Name"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/rycDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:inputType="textMultiLine"
android:maxLines="4"
android:lines="4"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />
<TextView
android:id="#+id/rycMail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:text="e-mail"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage" />
<TextView
android:id="#+id/rycPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="phone"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycMail"
app:layout_constraintEnd_toEndOf="#+id/rycMail"
app:layout_constraintStart_toStartOf="#+id/rycMail" />
</androidx.constraintlayout.widget.ConstraintLayout>
TextView called rycDesc is a long text and i want it to break into new line if it reached its margin left and right. Right now its going beyond its constrains and over ImageView. How can i make it break line after it reaches his contrains?
<TextView
android:id="#+id/rycDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:inputType="textMultiLine"
android:maxLines="2"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />
Since rycDesc's left and right edges are constrained you can give it a width of 0dp so that these constraints are honored instead of wrap_content
Just change:
<TextView
android:id="#+id/rycDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
to
<TextView
android:id="#+id/rycDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
This is how it looks now:
If you are using a newer version of ConstraintLayout you can keep wrap_content and add this to rycDesc:
app:layout_constrainedWidth="true"
replace with
<TextView
android:id="#+id/rycDesc"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:ellipsize="end"
android:maxLines="4"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />
you can use 2 LinearLayout(Horizental) instead ,one for your picture and one for all your text
Use this line inside Your TextView in xml
android:singleLine="false"
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.
I am using a constrainedLayout with some TextViews. When the text in the textViews covers two lines it looks okay. But when the text only convers one line the text does not start in the first line. I added a screenhot:
So basically what I want is to shift the yellow marked textlines one level above such that the margin between the label words (Nose, Finish) and the text is not as high. It should look like the "Taste" textViews. Here is the XML code of the TextViews:
<TextView
android:id="#+id/tvNoseLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="16sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.36"
android:textStyle="bold"
android:text="#string/Nose"
/>
<TextView
android:id="#+id/tvNoseDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity= "fill_vertical"
android:textSize="14sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.41"
/>
<TextView
android:id="#+id/tvTasteLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="16sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.47"
android:textStyle="bold"
android:text="#string/Taste"
/>
<TextView
android:id="#+id/tvTasteDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.52"
/>
<TextView
android:id="#+id/tvFinishLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="16sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.58"
android:textStyle="bold"
android:text="#string/Finish"
/>
<TextView
android:id="#+id/tvFinishDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="14sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63"
/>
Do you have an idea how I can do that? I tried different gravities (start, fill_vertical) but it did not help. I'd appreciate every comment.
Your layout relies too much on app:layout_constraintVertical_bias. To get the vertical distribution you want, it is better to use ConstraintLayout chains. For your layout, I suggest using a vertical packed chain and removing the vertical bias and the gravities. Something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/tvNoseLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/Nose"
android:textSize="16sp"
android:textStyle="bold"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toTopOf="#+id/tvNoseDescription"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/tvNoseDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="fill_vertical"
android:text="Soft and rounded with fruity notes of red apple"
android:textSize="14sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toTopOf="#+id/tvTasteLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvNoseLabel" />
<TextView
android:id="#+id/tvTasteLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/Taste"
android:textSize="16sp"
android:textStyle="bold"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toTopOf="#+id/tvTasteDescription"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvNoseDescription" />
<TextView
android:id="#+id/tvTasteDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="A fine Sherried character, fruity aromas balanced with rich chovolate"
android:textSize="14sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toTopOf="#+id/tvFinishLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvTasteLabel" />
<TextView
android:id="#+id/tvFinishLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/Finish"
android:textSize="16sp"
android:textStyle="bold"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toTopOf="#+id/tvFinishDescription"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTasteDescription" />
<TextView
android:id="#+id/tvFinishDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Warm and lingering. Sweet and spoicy"
android:textSize="14sp"
app:fontFamily="#font/paprika"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvFinishLabel" />
</androidx.constraintlayout.widget.ConstraintLayout>
which gives this appearance:
you should write this in your TextView :
android:gravity="start"
or
android:gravity="start|center"
you can use the textAlignment to get what you want and change the android:layout_width to be match_parent.
<TextView
android:id="#+id/tvNoseDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center" // change the value to whatever you want ( ctrl + space ).
...
...
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 am new to android and working on a simple app. I have a forms page and would like the user to fill out when signing up for the app. My editext for the age and the dollarValue jumps up even though I have constrained it. I will post the xml down below.
provider_signup.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="78dp"
android:layout_height="22dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="8dp"
android:text="Fixed"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/radioButton3"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.076" />
<ImageView
android:id="#+id/faceImage"
android:layout_width="91dp"
android:layout_height="66dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.038"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<Spinner
android:id="#+id/my_spinner"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.577" />
<TextView
android:id="#+id/insured"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_marginBottom="64dp"
android:layout_marginStart="76dp"
android:text="Insured"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:background="#color/colorAccent"
android:id="#+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="SAVE"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/ageTextView"
android:layout_width="37dp"
android:layout_height="24dp"
android:layout_marginBottom="116dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text="Age"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.047"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.98" />
<TextView
android:id="#+id/dollarTextView"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:layout_marginBottom="124dp"
android:layout_marginEnd="104dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Dollar Value"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton3"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Rate"
android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/insured"
app:layout_constraintEnd_toStartOf="#+id/radioButton4"
app:layout_constraintHorizontal_bias="0.621"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.189" />
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="81dp"
android:layout_height="19dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="52dp"
android:layout_marginTop="8dp"
android:text="Hourly"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_spinner"
app:layout_constraintVertical_bias="0.07999998" />
<EditText
android:id="#+id/firstName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="First Name"
app:layout_constraintBottom_toTopOf="#+id/lastName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/faceImage" />
<EditText
android:id="#+id/lastName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Last Name"
app:layout_constraintBottom_toTopOf="#+id/Address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.948" />
<EditText
android:id="#+id/Address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Address"
app:layout_constraintBottom_toTopOf="#+id/my_spinner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent" />
<RadioButton
android:id="#+id/yesRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="YES"
app:layout_constraintBottom_toTopOf="#+id/saveButton"
app:layout_constraintEnd_toStartOf="#+id/noRadioButton"
app:layout_constraintHorizontal_bias="0.513"
app:layout_constraintStart_toEndOf="#+id/insured"
app:layout_constraintTop_toBottomOf="#+id/dollarTextView"
app:layout_constraintVertical_bias="0.894" />
<RadioButton
android:id="#+id/noRadioButton"
android:layout_width="wrap_content"
android:layout_height="29dp"
android:layout_marginBottom="68dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="NO"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.516"
app:layout_constraintStart_toEndOf="#+id/insured" />
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/dollarTextView"
app:layout_constraintHorizontal_bias="0.81"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioButton4"
app:layout_constraintVertical_bias="0.088" />
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.666"
app:layout_constraintStart_toEndOf="#+id/dollarTextView"
app:layout_constraintTop_toBottomOf="#+id/radioButton3"
app:layout_constraintVertical_bias="0.088" />
</android.support.constraint.ConstraintLayout>
First of all, you don't need to constraint all 4 constraints on every single view. You can connect views with only 2 constraints.
Onto your problem, constraint your editTexts to the TextViews that they should be right to.
I will paste the fixed code for your #+id/ageEditText and #+id/dollarEditText
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#+id/ageTextView"
app:layout_constraintTop_toTopOf="#+id/ageTextView" />
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#+id/dollarTextView"
app:layout_constraintTop_toTopOf="#+id/dollarTextView" />
I copied your layout to android studio just to see what you were getting. You're having this issue because your views aren't aligned to one another yet you try to constrain them as using different references, so they end up moving independently. My advice to you is to organise the views that belong in the same line in layouts of their own and then constraint those layouts instead. You'll end up with the parent constraint layout that includes many embedded child layouts.
For example, add your 4 views for age and dollar value in one constraint layout like so:
<android.support.constraint.ConstraintLayout
android:id="#+id/your_layout_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<TextView
android:id="#+id/ageTextView"
android:layout_width="37dp"
android:layout_height="24dp"
android:text="Age"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/ageEditText"
/>
<TextView
android:id="#+id/dollarTextView"
android:layout_width="wrap_content"
android:layout_height="21dp"
android:text="Dollar Value"
android:textAlignment="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ageEditText"
app:layout_constraintEnd_toStartOf="#id/dollarEditText"
/>
<EditText
android:id="#+id/dollarEditText"
android:layout_width="64dp"
android:layout_height="25dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/dollarTextView"
app:layout_constraintEnd_toEndOf="parent"
/>
<EditText
android:id="#+id/ageEditText"
android:layout_width="94dp"
android:layout_height="25dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ageTextView"
app:layout_constraintEnd_toStartOf="#id/dollarTextView"
/>
</android.support.constraint.ConstraintLayout>
You see how I added the padding to the parent and not the individual views. Since the parent is set to wrap around the children, and the children are set to expand to fit the parent, you end up with a clear layout where 4 views are perfectly aligned horizontally. Now do the same for every line in your screen that includes multiple views and add the constraints between those layouts instead of doing it for every view independently. You'll end up with a file that has the following structure:
<android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout1 constraint start, end and top to parent-->
<!--constraint bottom to top of layout 2 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout2 constraint start and end to parent-->
<!--constraint top to bottom of layout 1 and bottom to top of layout 3 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout3 constraint start and end to parent-->
<!--constraint top to bottom of layout 2 and bottom to top of layout 4 below-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout>
<!--layout3 constraint start, end and bottom to parent-->
<!--constraint top to bottom of layout 3 above-->
<!--views to align horizontally-->
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>