In ConstraintLayout, if we want to align a TextView, to another TextView's baseline, we can simply apply layout_constraintBaseline_toBaselineOf
Align to the baseline of 1st line
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:background="#FFEB3B"
android:text="Wed, Nov 11"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textColor="?attr/primaryTextColor"
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" />
<TextView
android:background="#CDDC39"
android:text="This is text with 1 line"
android:ellipsize="end"
android:scrollHorizontally="true"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:textColor="?attr/secondaryTextColor"
android:maxLines="2"
android:textSize="10sp"
android:id="#+id/tiny_title_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:breakStrategy="simple"
app:layout_constraintBaseline_toBaselineOf="#+id/title_text_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/title_text_view"
app:layout_constraintStart_toEndOf="#+id/title_text_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
But, what if, there is 2 lines in the TextView, and we want to align to the baseline of 2nd line?
How can we align to the baseline of 2nd line
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:background="#FFEB3B"
android:text="Wed, Nov 11"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textColor="?attr/primaryTextColor"
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" />
<TextView
android:background="#CDDC39"
android:text="This is text with 1 line"
android:ellipsize="end"
android:scrollHorizontally="true"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:textColor="?attr/secondaryTextColor"
android:maxLines="2"
android:textSize="10sp"
android:id="#+id/tiny_title_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:breakStrategy="simple"
app:layout_constraintBaseline_toBaselineOf="#+id/title_text_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/title_text_view"
app:layout_constraintStart_toEndOf="#+id/title_text_view" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see in the above screenshot, app:layout_constraintBaseline_toBaselineOf is always align to the baseline of 1st line. Is there a way, for us to align to the baseline of 2nd line?
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFEB3B"
android:text="Wed, Nov 11"
android:textColor="#color/purple_700"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tiny_title_text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:background="#CDDC39"
android:breakStrategy="simple"
android:ellipsize="end"
android:maxLines="2"
android:scrollHorizontally="true"
android:text="This is text with 1 line and this is line 2"
android:textColor="#color/purple_700"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="#+id/title_text_view"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/title_text_view"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Simply Go For :
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"
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 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 need to manage items below main text in next way.
if we have a lot of place, "RIGHT" text should be aligned to right of left text. If we have no place, "RIGHT" text should be at right of parent and left text should be elipsized. Right text should not be at the right corner if we have a lot of place.
Thanks.
<?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="wrap_content"
android:paddingBottom="12dp"
android:paddingEnd="25dp"
android:paddingStart="14dp"
android:paddingTop="12dp"
android:background="#drawable/event_item_bg">
<ImageButton
android:id="#+id/iv_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_more"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="16dp"
android:textColor="#4a4a4a"
android:textSize="22sp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toStartOf="#id/iv_more"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is some title text. Can be long. And take several lines"/>
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="#9b9b9b"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
tools:text="This text can be long too. In should not shift view at right"/>
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:paddingStart="12dp"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/iv_more"
app:layout_constraintHorizontal_bias="0.0"
tools:text="LIVE"
/>
</android.support.constraint.ConstraintLayout>
I have resolved your issue refer below codes:
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="#9b9b9b"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
tools:text="This text can be long too. In should not shift view at rights"/>
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:paddingStart="12dp"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/textView3"
app:layout_constraintHorizontal_bias="0.0"
tools:text="LIVE" />
Updated code:
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="#9b9b9b"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_status"
tools:text="This text can be long too. In should not shift view at rights" />
<TextView
android:id="#+id/tv_status"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3"
tools:text="LIVE" />
You can try it by nesting another layout that has flexible children
placement like the RelativeLayout
`<?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="wrap_content"
android:paddingBottom="12dp"
android:paddingEnd="25dp"
android:paddingStart="14dp"
android:paddingTop="12dp"
android:background="#drawable/event_item_bg">
<ImageButton
android:id="#+id/iv_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_more"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="16dp"
android:textColor="#4a4a4a"
android:textSize="22sp"
app:layout_constraintEnd_toStartOf="#id/iv_more"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is some title text. Can be long. And take
several lines"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintTop_toBottomOf="#+id/textView"
>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="#9b9b9b"
android:textSize="14sp"
tools:text="This text can be long too. In "/>
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/textView3"
android:textColor="#android:color/black"
android:textSize="12sp"
tools:text="LIVE" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>`
I am creating a layout where i need to create 2 rows of three elements each. For the middle elements (Qty and 4901) of both rows I want the text to left align.
I have created 2 horizontal chains with chainStyle as spread_inside.
Here is the layout xml:
https://gist.github.com/asheshb/cb2effdbb92e34d897672eb730339896
Any idea how to do that?
Try the layout below although I don't recommend this approach, because if you insert a value in the TextView (for example that Curr. Value) that is too long, only the element attached (in this case the TextView containing this number 15,13,184) will adapt to these changes and the than the layout will be corrupted.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/nse_item_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:id="#+id/tvStockName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="ICICI BANK LIMITED" />
<TextView
android:id="#+id/tvStockSymbol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/tvStockName"
app:layout_constraintTop_toBottomOf="#+id/tvStockName"
tools:text="ICICIBANK" />
<TextView
android:id="#+id/tvStockValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="306.75" />
<TextView
android:id="#+id/tvStockPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="(1.44%)"
/>
<TextView
android:id="#+id/tvStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/tvStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvStockValue"
tools:text="-4.50"
/>
<TextView
android:id="#+id/tvAvgPriceTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Avg. Price"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQtyTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvQtyTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="16sp"
tools:text="Qty"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvCurrentValueTitle"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvAvgPriceTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvCurrentValueTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Curr. Value"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQtyTitle"
app:layout_constraintTop_toBottomOf="#+id/tvStockDifference" />
<TextView
android:id="#+id/tvAvgPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="50"
app:layout_constraintEnd_toStartOf="#+id/tvQty"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAvgPriceTitle"
tools:text="241.83" />
<TextView
android:id="#+id/tvQty"
android:layout_width="0dp"
android:layout_height="20dp"
app:layout_constraintHorizontal_weight="10"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockInvestment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvAvgPrice"
app:layout_constraintTop_toBottomOf="#+id/tvQtyTitle"
tools:text="4901" />
<TextView
android:id="#+id/tvTotalStockInvestment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
app:layout_constraintHorizontal_weight="20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/tvQty"
app:layout_constraintTop_toBottomOf="#+id/tvCurrentValueTitle"
tools:text="15,13,184" />
<TextView
android:id="#+id/tvTotalStockPercent"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="(+27.69%)"
/>
<TextView
android:id="#+id/tvTotalStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvTotalStockPercent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockInvestment"
tools:text="+3,28,234"
/>
<TextView
android:id="#+id/tvDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textSize="14sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference"
tools:text="-24,015"
/>
<TextView
android:id="#+id/tvTitleDayStockDifference"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
tools:text="Today's Gain"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/tvDayStockDifference"
app:layout_constraintTop_toBottomOf="#+id/tvTotalStockDifference" />
Output of the layout above: