I am trying to create a textview so that if the number of characters goes above 22, an ellipses " . . ." would appear. However this does not work with maxLength.
<TextView
android:id="#+id/vh_fragnotifications_postedby"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginTop="8dp"
android:text="zz12345678901234567890aaaaaaaa"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_body"
app:layout_constraintLeft_toLeftOf="#+id/vh_fragnotifications_body"
app:layout_constraintRight_toLeftOf="#+id/vh_fragnotifications_dateposted"
android:maxLines="1"
android:ellipsize="end"
android:maxLength="22"/>
How can I get the ellipses to appear while keeping the max digits of 22?
Here is the full layout:___________________________________________________
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/colorWhite">
<ImageView
android:id="#+id/vh_fragnotifications_imagepreview"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignTop="#+id/vh_fragnotifications_body"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0"/>
<TextView
android:id="#+id/vh_fragnotifications_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:textColor="#color/colorBlackFont"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintLeft_toRightOf="#+id/vh_fragnotifications_imagepreview"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/vh_fragnotifications_imagepreview"/>
<TextView
android:id="#+id/vh_fragnotifications_postedby"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginTop="8dp"
android:text="zz12345678901234567890aaa"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_body"
app:layout_constraintLeft_toLeftOf="#+id/vh_fragnotifications_body"
app:layout_constraintRight_toLeftOf="#+id/vh_fragnotifications_dateposted"
android:ellipsize="end"
android:maxLength="22"
android:maxLines="1"/>
<TextView
android:id="#+id/vh_fragnotifications_dateposted"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_below="#+id/vh_fragnotifications_body"
android:layout_marginTop="8dp"
android:text=" • 18 hours ago"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_body"
app:layout_constraintLeft_toRightOf="#+id/vh_fragnotifications_postedby"
app:layout_constraintRight_toRightOf="#+id/vh_fragnotifications_body"
android:maxLines="1"
android:ellipsize="end" />
<View
android:id="#+id/vh_fragnotifications_divider"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:background="?android:attr/dividerVertical"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="#+id/vh_fragnotifications_body"
app:layout_constraintRight_toRightOf="#+id/vh_fragnotifications_body"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_dateposted"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try this
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginTop="8dp"
android:text="zz12345678901234567890aaaaaaaa"
android:maxLines="1"
android:ellipsize="end"
android:maxEms="11"
/>
According to Android Documentation
If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle.
Your view width is wrap_content, that means that unless the text goes to another line, it will fit in the view size.
Unfortunately, this means that you need to replace your string at the 22nd digit with ... by yourself.
This code might work for you, but I haven't tested it yet.
var text = "Text that is longer than 22 digit"
text = text.replaceRange(22, text.length, "...")
Another solution is to set the width to a fixed number, but then you will have to measure how long is 22 digits, which is not easy considering that you need to also add the "..." width into the equation as well.
You missed those lines:
android:lines="1"
android:singleLine="true"
I don't know why you are trying to fix the length size 22. I will suggest you make it a single line Like this
<TextView
android:id="#+id/vh_fragnotifications_postedby"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginTop="8dp"
android:text="zz12345678901234567890aaaaaaaa"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_body"
app:layout_constraintLeft_toLeftOf="#+id/vh_fragnotifications_body"
app:layout_constraintRight_toLeftOf="#+id/vh_fragnotifications_dateposted"
android:maxLines="1"
android:ellipsize="end"/>
The reason for not using the android:maxLength is that when you have space on left side of the view it will not showing ... in the end. It will be the only 22 character nothing else.
You have to change width of TextView (vh_fragnotifications_postedby) to 0dp and your problem solved.
<ImageView
android:id="#+id/vh_fragnotifications_imagepreview"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignTop="#+id/vh_fragnotifications_body"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0"/>
<TextView
android:id="#+id/vh_fragnotifications_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
android:textColor="#color/black"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintLeft_toRightOf="#+id/vh_fragnotifications_imagepreview"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/vh_fragnotifications_imagepreview"/>
<TextView
android:id="#+id/vh_fragnotifications_postedby"
android:layout_width="149dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLength="22"
android:maxLines="1"
android:text="zz12345678901234567890aaa"
android:textSize="12sp"
app:layout_constraintLeft_toLeftOf="#+id/vh_fragnotifications_body"
app:layout_constraintRight_toLeftOf="#+id/vh_fragnotifications_dateposted"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_body" />
<TextView
android:id="#+id/vh_fragnotifications_dateposted"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/vh_fragnotifications_body"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="1"
android:text=" • 18 hours ago"
android:textSize="12sp"
app:layout_constraintLeft_toRightOf="#+id/vh_fragnotifications_postedby"
app:layout_constraintRight_toRightOf="#+id/vh_fragnotifications_body"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_body" />
<View
android:id="#+id/vh_fragnotifications_divider"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:background="?android:attr/dividerVertical"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="#+id/vh_fragnotifications_body"
app:layout_constraintRight_toRightOf="#+id/vh_fragnotifications_body"
app:layout_constraintTop_toBottomOf="#+id/vh_fragnotifications_dateposted"/>
Hope this will really help.
Related
I am trying to learn constraint layout by converting a list item from a linear + relative layout. I have a checkbox and 3 text views arranged in a line followed by a recyclerview underneath.
Phone preview:
Tablet preview:
Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_qty"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/line_item_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="8dp"
android:textAppearance="?attr/textAppearanceBody2"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintStart_toEndOf="#+id/checkBox"
tools:text="5 x" />
<TextView
android:id="#+id/line_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody2"
app:layout_constraintEnd_toStartOf="#+id/line_item_price"
app:layout_constraintStart_toEndOf="#+id/line_item_qty"
app:layout_constraintTop_toTopOf="parent"
tools:text="Club sandwich with ranch dressing and extra mustard" />
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
tools:text="€4.50" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/item_mods_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line_item_name"
tools:itemCount="3"
tools:listitem="#layout/item_line_modifier"
tools:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see the preview renders fine but when I run the code, the name of the item is gone (it's width needs to be 0dp, if it's wrap_content then on phones it just previews as one line of text and overlaps the qty and price text views).
Image from device (tablet):
Is it because I am aligning baselines to the name and the name itself has no bottom constraint?
Add app:layout_constraintStart_toEndOf="line_item_name" to your line_item_price, so your price will be always come after your item name
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="line_item_name" //Add this
tools:text="€4.50" />
It's good that you are learning new things and trying to implement them.
Below is the code that will give you your desired output.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/line_item_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="8dp"
app:layout_constraintTop_toTopOf="#+id/checkBox"
app:layout_constraintBottom_toBottomOf="#+id/checkBox"
app:layout_constraintStart_toEndOf="#+id/checkBox"
android:textAppearance="?attr/textAppearanceBody2"
android:textStyle="bold"
tools:text="5 x" />
<TextView
android:id="#+id/line_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody2"
app:layout_constraintEnd_toStartOf="#+id/line_item_price"
app:layout_constraintStart_toEndOf="#+id/line_item_qty"
app:layout_constraintTop_toTopOf="#+id/line_item_qty"
app:layout_constraintBottom_toBottomOf="#+id/line_item_qty"
tools:text="Club sandwich with ranch dressing and extra mustard" />
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintTop_toTopOf="#+id/line_item_name"
app:layout_constraintBottom_toBottomOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
tools:text="€4.50" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/item_mods_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/checkBox"
tools:itemCount="3"
tools:listitem="#layout/item_line_modifier"
tools:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>
Do let me know if you have any queries on this.
Output :
This is the recyclerview item layout file:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:paddingHorizontal="16dp"
android:paddingVertical="12dp">
<com.paypal.android.p2pmobile.common.widgets.BubbleView
android:id="#+id/activity_list_item_contact_image"
android:layout_width="#dimen/ui_size_xl_2"
android:layout_height="#dimen/ui_size_xl_2"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
tools:ignore="ContentDescription"
app:initialsTextSize="#dimen/text_size_primary"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/activity_list_item_name"
style="#style/activity_list_item_name"
android:layout_width="0dp"
android:layout_height="#dimen/ui_size_sm"
android:gravity="center|start"
android:text="Abc India Pvt. Ltd."
tools:ignore="HardcodedText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#id/activity_list_item_contact_image"
app:layout_constraintEnd_toStartOf="#id/activity_list_item_amount"
android:layout_marginHorizontal="16dp"/>
<LinearLayout
android:id="#+id/activity_list_item_status_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintTop_toBottomOf="#+id/activity_list_item_name"
app:layout_constraintStart_toEndOf="#id/activity_list_item_contact_image"
app:layout_constraintEnd_toStartOf="#id/activity_list_item_amount"
android:layout_marginHorizontal="16dp" >
<com.paypal.uicomponents.UiBadge
android:id="#+id/activity_list_item_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
android:layout_marginEnd="6dp"
android:text="Due"
app:uiStrokeWidth="0dp"
style="#style/UiBadge.Warning"
tools:ignore="HardcodedText" />
<TextView
android:id="#+id/activity_list_item_date"
style="#style/activity_list_item_details"
android:layout_width="wrap_content"
android:layout_height="#dimen/ui_size_xs"
android:gravity="center|start"
android:text="Yesterday"
tools:ignore="HardcodedText" />
<ImageView
android:id="#+id/activity_list_item_status_icon"
android:layout_width="#dimen/ui_size_xs"
android:layout_height="#dimen/ui_size_xs"
android:layout_marginEnd="6dp"
android:scaleType="fitXY"
tools:ignore="ContentDescription"
app:srcCompat="#drawable/ui_purchase_protection_alt" />
<TextView
android:id="#+id/activity_list_item_status_text"
style="#style/activity_list_item_details"
android:layout_width="match_parent"
android:layout_height="18dp"
android:gravity="center|start"
android:text="Request Received"
tools:ignore="HardcodedText" />
</LinearLayout>
<TextView
android:id="#+id/activity_list_item_notes"
style="#style/activity_list_item_details"
android:layout_width="0dp"
android:maxHeight="#dimen/ui_size_lg"
android:layout_marginTop="4dp"
android:maxLines="2"
android:text="Personal notes - My checks haven't cleared yet hope u could loan me some money say around $40."
tools:ignore="HardcodedText"
app:layout_constraintTop_toBottomOf="#+id/activity_list_item_status_container"
app:layout_constraintStart_toEndOf="#id/activity_list_item_contact_image"
app:layout_constraintEnd_toStartOf="#id/activity_list_item_amount"
android:layout_marginHorizontal="16dp" />
<TextView
android:id="#+id/activity_list_item_status_desc"
style="#style/activity_list_item_details"
android:layout_width="0dp"
android:maxHeight="#dimen/ui_size_lg"
android:layout_marginTop="6dp"
android:ellipsize="end"
android:maxLines="2"
android:text="Abc notes - Waiting for your request to be accepted. Please allow us some time to do this."
tools:ignore="HardcodedText"
app:layout_constraintTop_toBottomOf="#+id/activity_list_item_notes"
app:layout_constraintStart_toEndOf="#id/activity_list_item_contact_image"
app:layout_constraintEnd_toStartOf="#id/activity_list_item_amount"
android:layout_marginHorizontal="16dp" />
<TextView
android:id="#+id/activity_list_item_amount"
style="#style/UiTextView.Xl.Regular"
android:layout_width="wrap_content"
android:layout_height="#dimen/ui_size_sm"
android:layout_alignParentEnd="true"
android:gravity="center|end"
android:text="$149.99"
android:textColor="#737C7F"
android:textSize="18sp"
tools:ignore="HardcodedText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
And this layout looks like this:
This layout looks fine when I implement the recyclerview adpater in normal way. But, When use View Binding in the recyclerview adapter, only those elements whose layout_width not set to 0dp is visible. UI elements with 0dp is not visible.
This problem will be solved if I use RelativeLayout instead of ConstarintLayout. But, I want to use ConstraintLayout`.
So, what could be the problem? How can I solve this?
I solved the problem. I replaced the code in the onCreateViewHolder() from this
ActivitySummaryListTxnItemV2Binding.inflate(LayoutInflater.from(container.getContext()));
to this:
ActivitySummaryListTxnItemV2Binding.inflate(LayoutInflater.from(container.getContext()), container, false);
I have the following configuration in my view using ConstraintLayout:
I want that "Admin" view was always on the right side of username view, but when username is too large admin view should always be visible. How to achieve it?
Currently:
EDIT:
Current code
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="#dimen/dp0"
android:layout_height="match_parent"
android:layout_weight="0.8">
<TextView
android:id="#+id/name"
style="#style/Text.Black"
android:layout_width="wrap_content"
android:layout_marginTop="12dp"
android:ellipsize="marquee"
android:paddingBottom="#dimen/dp6"
android:singleLine="true"
android:textSize="#dimen/sp16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="veryveryveryverylongvervrusername" />
<TextView
android:id="#+id/mail"
style="#style/Text.Grey"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/name"
android:ellipsize="marquee"
android:singleLine="true"
tools:text="fjfdjdf"
android:textSize="#dimen/sp12" />
<TextView
android:id="#+id/status"
style="#style/Text.White"
android:layout_height="#dimen/dp18"
android:layout_marginLeft="#dimen/dp9"
android:layout_marginStart="#dimen/dp9"
android:layout_marginTop="#dimen/dp2"
app:layout_constraintStart_toEndOf="#id/name"
app:layout_constraintTop_toTopOf="#+id/name"
android:ellipsize="marquee"
android:paddingLeft="#dimen/dp5"
android:paddingRight="#dimen/dp5"
android:singleLine="true"
tools:text="Admin"
tools:background="#drawable/bg_text_round_corners_blue"
android:textSize="#dimen/sp12" />
First on Admin Textview (#id+id/status) you have to add
app:layout_constraintEnd_toEndOf="parent"
Then on Username Textview (#+id/name) you can try add the following lines,
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/status"
which whould constrain the width to be max until admin TextView
update (since i didn't fully understand your constraints)
the only way I could figure out to get this work is to create another ConstraintLayout inside the one that's already there, like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:background="#color/colorPrimaryDark">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
app:layout_constrainedWidth="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/status"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="12dp"
tools:text="veryveryveryverylongvervrusername" />
<TextView
android:id="#+id/status"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/name"
tools:layout_editor_absoluteY="12dp"
tools:text="Admin" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The important point is to set
app:layout_constrainedWidth="true"
for both the username TextView and and the inner ConstraintLayout
You can try to set the layout_witdh of your Admin textview to 0dp like this:
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/name"
app:layout_constraintEnd_toStartOf="#+id/settings_icon"
The name textview needs to have something like this:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#+id/status"
For the field with id #+id/name, add below line:
app:layout_constraintEnd_toStartOf="#id/status"
android:layout_height="wrap_content"
and change it's layout_width to
android:layout_width="0dp"
try this :
<TextView
android:id="#+id/status"
style="#style/Text.White"
android:layout_height="#dimen/dp18"
android:layout_marginLeft="#dimen/dp9"
android:layout_marginStart="#dimen/dp9"
android:layout_marginTop="#dimen/dp2"
app:layout_constraintStart_toEndOf="#id/name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:ellipsize="marquee"
android:paddingLeft="#dimen/dp5"
android:paddingRight="#dimen/dp5"
android:singleLine="true"
tools:text="Admin"
tools:background="#drawable/bg_text_round_corners_blue"
android:textSize="#dimen/sp12" />
#bvk256
You can achieve the behavior with the following xml code, maybe slight bit cleanup.
<?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:minHeight="90dp"
android:padding="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/startIcon"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#android:drawable/ic_btn_speak_now"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/firstEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:padding="0dp"
app:layout_constraintEnd_toStartOf="#id/admin"
app:layout_constraintStart_toEndOf="#+id/startIcon"
app:layout_constraintTop_toTopOf="parent"
tools:text="hello world to this long and very very very very long text" />
<TextView
android:id="#+id/admin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
android:text="Admin"
app:layout_constraintEnd_toStartOf="#+id/endIcon"
app:layout_constraintTop_toTopOf="#+id/firstEditText" />
<EditText
android:id="#+id/secondEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:padding="0dp"
app:layout_constraintEnd_toStartOf="#id/admin"
app:layout_constraintStart_toEndOf="#+id/startIcon"
app:layout_constraintTop_toBottomOf="#+id/firstEditText"
tools:text="hello world to this long and very very very very long text" />
<ImageView
android:id="#+id/endIcon"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#android:drawable/ic_menu_delete"
android:tint="#android:color/holo_blue_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Thank you all for the responses. I tried all of the solutions, but they either pushed "Admin" text out of the visibility when "username" is too large or made "admin" textview be glued to the right side without accounting the "username" size.
I was able to solve my problem to some extend by adding this percentage constraint to the "username" textview:
android:layout_width="0dp"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.75"
So it behaves like this:
I'm trying to implememnt the following layout in Android using ConstraintLayout.
However, the two username TextViews need to expand until they reach the max width, which depends on each phone's screen.
The first username should be visible, as much as possible, it should have an 8dp margin and then the "reply arrow" which has a fixed width, and then, if it fits, as much of the "reply to username" TextView should be visible.
The dot separator, date and likes TexViews should awlays be visible, at wrap_content.
In iOS we have managed to implement such a layout by using content hugging and content compression resistance priorities. Are there similar features in Android?
Here's my XML layout for reference:
<?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:id="#+id/newspaperLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:id="#+id/commentDepthView"
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/default_margin"
android:background="#color/blueDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/commentAuthorTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/blue"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/commentTextView"
app:layout_constraintEnd_toStartOf="#id/replyToArrowImageView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/commentDepthView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Username"/>
<ImageView
android:id="#+id/replyToArrowImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#id/commentReplyToTextView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/commentAuthorTextView"
app:layout_constraintTop_toTopOf="#id/commentAuthorTextView"
app:srcCompat="#drawable/reply_to_arrow"/>
<TextView
android:id="#+id/commentReplyToTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/blue"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#+id/dotSeparatorTextView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#id/replyToArrowImageView"
app:layout_constraintTop_toTopOf="#id/commentAuthorTextView"
tools:text="Reply To Username"
/>
<TextView
android:id="#+id/dotSeparatorTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:text="#string/dot_separator"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#+id/commentDateTextView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/commentReplyToTextView"
app:layout_constraintTop_toTopOf="#id/commentAuthorTextView"/>
<TextView
android:id="#+id/commentDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintBottom_toBottomOf="#+id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#id/commentLikesTextView"
app:layout_constraintStart_toEndOf="#id/dotSeparatorTextView"
app:layout_constraintTop_toTopOf="#+id/commentAuthorTextView"
tools:text="1/1/1970"/>
<TextView
android:id="#+id/commentLikesTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintBottom_toBottomOf="#+id/commentAuthorTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/commentDateTextView"
app:layout_constraintTop_toTopOf="#+id/commentAuthorTextView"
tools:text="0 Likes"/>
<TextView
android:id="#+id/commentTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/commentDepthView"
app:layout_constraintTop_toBottomOf="#+id/commentAuthorTextView"
tools:text="This is test comment that is really relly long. Well not that long, but it's long enough, don't you think?"/>
<View
android:id="#+id/separatorView"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
android:background="#color/grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/commentDepthView"
app:layout_constraintTop_toBottomOf="#+id/commentTextView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Any suggestion is welcome, even using a different layout than ConstraintLayout. Thank you very much.
Give first username
android:layout_width="0dp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintWidth_default="wrap"
and to second
android:layout_width="0dp"
rest is wrap_content and chain them
I am attempting to set up what I thought should be a simple layout with a ConstraintLayout I have a series of text entries, with labels whose size can change from language to language. There is a barrier to the right side of the labels so the text entries stay aligned even when the label lengths change.
I want the text entries to be a nominal size (200dp for the top one and 150dp for the others in this example) but to be able to shrink as needed to fit the screen if the labels are long and the screen is small. In landscape mode, or on a larger screen, the entries should be their max size and aligned left against the barrier.
After a lot of trial and error, I got the layout below to work, by setting two of the chains to "spread_inside" and the last one to "packed". Setting them all to spread_inside messes up the layout (entry_2 shrinks to its minimum size).
This smells like something that will stop working this way in a future ConstraintLayout update (this is using com.android.support.constraint:constraint-layout:1.1.0-beta5). The behavior of this layout is different using beta4 (also wrong, but differently wrong, beta4 aligns them all on the right side of the screen).
Am I missing something here? Does anyone else have similar chain patterns that have worked? Is there a better way of doing this?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context="com.mypackage.testapp.MainActivity">
<TextView
android:text="Label 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_1"
app:layout_constraintBottom_toBottomOf="#+id/entry_1"
android:id="#+id/label_1" />
<EditText
android:id="#+id/entry_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:inputType="text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="100.0"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/space_1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="200sp"
app:layout_constraintWidth_min="100sp" />
<Space
android:id="#+id/space_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/entry_1"
app:layout_constraintHorizontal_weight="0.01"
app:layout_constraintTop_toTopOf="#+id/entry_1"
app:layout_constraintBottom_toBottomOf="#+id/entry_1"/>
<TextView
android:text="Label 2 Is very very long"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_2"
app:layout_constraintBottom_toBottomOf="#+id/entry_2"
android:id="#+id/label_2" />
<EditText
android:id="#+id/entry_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:inputType="text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="100.0"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/space_2"
app:layout_constraintTop_toBottomOf="#+id/entry_1"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<Space
android:id="#+id/space_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/entry_2"
app:layout_constraintHorizontal_weight="0.01"
app:layout_constraintTop_toTopOf="#+id/entry_2"
app:layout_constraintBottom_toBottomOf="#+id/entry_2"/>
<TextView
android:text="Label Three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_3"
app:layout_constraintBottom_toBottomOf="#+id/entry_3"
android:id="#+id/label_3" />
<EditText
android:id="#+id/entry_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:inputType="text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="100.0"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/space_3"
app:layout_constraintTop_toBottomOf="#+id/entry_2"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<Space
android:id="#+id/space_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/entry_3"
app:layout_constraintHorizontal_weight="0.01"
app:layout_constraintTop_toTopOf="#+id/entry_3"
app:layout_constraintBottom_toBottomOf="#+id/entry_3"/>
<android.support.constraint.Barrier
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:barrierDirection="right"
app:constraint_referenced_ids="label_1,label_2,label_3" />
</android.support.constraint.ConstraintLayout>
Edit:
I reported this issue to the ConstraintLayout team at Google and they confirmed that it is a bug. Once fixed, I should be able to do this without the complicated chains.
The Android dev team confirmed this is a bug, and it has been fixed in the beta6 release. The layout now works without the need for any chains or spaces (the solution below is what they suggested in the ticket).
https://issuetracker.google.com/issues/74469361
<TextView
android:id="#+id/label_1"
android:tag="48,103,136,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1"
app:layout_constraintBottom_toBottomOf="#+id/entry_1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_1" />
<EditText
android:id="#+id/entry_1"
android:tag="505,63,512,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="200sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="#+id/label_2"
android:tag="48,254,442,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 2 Is very very long"
app:layout_constraintBottom_toBottomOf="#+id/entry_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_2" />
<EditText
android:id="#+id/entry_2"
android:tag="505,214,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/entry_1"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="#+id/label_3"
android:tag="48,405,218,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label Three"
app:layout_constraintBottom_toBottomOf="#+id/entry_3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_3" />
<EditText
android:id="#+id/entry_3"
android:tag="505,365,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/entry_2"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<android.support.constraint.Barrier
android:id="#+id/guideline"
android:tag="490,48,0,0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:barrierDirection="right"
app:constraint_referenced_ids="label_1,label_2,label_3" />
My guess would be the fact that you're not really setting up a chain.
https://developer.android.com/training/constraint-layout/index.html
A chain works properly only if each end of the chain is constrained to another object on the same axis
For a proper chain, your labels would need to be part of it as well. You can probably just ditch the chain attributes and constrain the edit texts to the barrier and the parent rights.
Hope that helps.
Try it with Relative Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:padding="16dp">
<TextView
android:id="#+id/label_1"
android:text="Label 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
<EditText
android:id="#+id/entry_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_alignBaseline="#+id/label_1"
android:layout_toEndOf="#+id/label_1"
android:maxLength="20"
android:textSize="20sp"
android:inputType="text" />
<TextView
android:id="#+id/label_2"
android:text="Label 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:layout_below="#+id/label_1"/>
<EditText
android:id="#+id/entry_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_alignBaseline="#+id/label_2"
android:layout_toEndOf="#+id/label_2"
android:maxLength="20"
android:textSize="20sp"
android:inputType="text" />
<TextView
android:id="#+id/label_3"
android:text="Label 3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:layout_below="#+id/label_2"/>
<MultiAutoCompleteTextView
android:id="#+id/entry_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_alignBaseline="#+id/label_3"
android:layout_toEndOf="#+id/label_3"
android:maxLength="200"
android:textSize="20sp"/>
</RelativeLayout>
Edit: This should be your basic structure for form, provided if ConstraintLayout is not the only option.
Just use Relative Layout, Table Layout is not necessary here
Set value for android:maxLength
For including more text-characters use MultiAutoCompleteTextView