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 ).
...
...
Related
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 :
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 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>
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: