TextView break long text into new lines - android

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"

Related

adjust TextView size to new text

I have a textview between 2 other views inside a ConstraintLayout.
I set the text of the second one in the onViewCreated of my Fragment and later change it after some user input.
The first text works fine, but when i change it later i would expect its size to change with it, which of course would cause the view on its right to move a bit.
Instead the new text breaks down into 2 lines, when it's longer than the original...
How can i achieve that?
Here are the 3 Views:
<TextView
android:id="#+id/label"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:fontFamily="#font/hevetica_font"
android:gravity="center_vertical"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:text="#string/lbl"
android:textColor="#color/FlatWhite"
android:textSize="19sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topView" />
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:fontFamily="#font/hevetica_font"
android:gravity="center_vertical"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:text=""
android:textColor="#color/FlatWhite"
android:textSize="19sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#id/label"
app:layout_constraintTop_toBottomOf="#id/topView" />
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
app:layout_constraintStart_toEndOf="#id/label"
app:layout_constraintTop_toBottomOf="#id/topView"
android:text="change"
/>
and in the java code i change text using textView.setText(text);

If I understood you correctly, you want the text in the second view not to be split into 2 lines, you need to make the following changes:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/label"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:gravity="center_vertical"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:textSize="19sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:gravity="center_vertical"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:maxLines="1"
android:textSize="19sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#id/label"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
app:layout_constraintStart_toEndOf="#id/text"
app:layout_constraintTop_toTopOf="parent"
android:text="change" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

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

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

Android ConstraintLayout - Top constraint for two layout

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

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

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

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

Android right aligned view restricted by view on the left

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>

Avoid binding of child view to right corner if left view is large

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>`

Categories

Resources