Develop Reference

Strange constrained_width behaviour with TextView

basically I have an layout as shown in the image. I am using a Guideline to restrict the width of the blue box. This means the ConstraintLayout itself hase full screen width and the blue box has its layout_constraintEnd_toStartOf="#id/guideline".
The blue box is just the background color of the TextView with the text, there aren't any additional containers or anything.
In order for the blue box to respect the constraints for its width calculations I have to set layout_constrainedWidth="true" on the box. As you can see the width is then restricted but the problem is that wrap_content does not work correctly afterwards.
The first box shows that if the text is only a single line, then the behaviour is as expected but if the text spans multiple lines (as in the second box) wrap_content breaks and the box is always "full width" (start of screen until the guideline).
Did somebody experience something similar? Is this a bug or did I misunderstood something. The same broken behaviour can be observed with the grey box on the right side.
I assume this has to do with the breaking behaviour of the TextView but is there a fix or workaround? As far as I know outside of an ConstraintLayout the width would be equal to the text so I assume this is a bug.
Edit XML code:
This is the basice code of one of the "bubbles" and as already mentioned I would like the view to really be as wide as the text.
<?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">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chat_message_history_receiver_background"
android:fontFamily="#font/nunito_semibold"
android:includeFontPadding="false"
android:paddingStart="15dp"
android:paddingTop="10dp"
android:paddingEnd="15dp"
android:paddingBottom="10dp"
android:textColor="#FFFFFF"
android:textSize="17sp"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintStart_toEndOf="#id/profile_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
app:layout_constraintWidth_max="wrap"
tools:text="Just testing something, somehowthisisnotworking" />
<app.jooy.messenger.ui.components.generic.profile_image.ProfileImage
android:id="#+id/profile_image"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintVertical_bias="1"
app:backgroundColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/text"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is the output of this particular xml code:

Try with this, adjust margin and padding as per your need. and change the android:layout_marginBottom of the guide as per your need.
<?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:paddingStart="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:includeFontPadding="false"
android:paddingStart="15dp"
android:paddingTop="10dp"
android:paddingEnd="15dp"
android:paddingBottom="10dp"
android:textColor="#FFFFFF"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guide"
app:layout_constraintWidth_percent=".8"
tools:text="Just testing something, Some how this is not working" />
<app.jooy.messenger.ui.components.generic.profile_image.ProfileImage
android:id="#+id/profile_image"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="5dp"
app:backgroundColor="#color/colorPrimary"
app:layout_constraintStart_toStartOf="#id/text"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/guide"
android:layout_width="0dp"
android:layout_height="0.2dp"
android:layout_marginBottom="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/profile_image"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toTopOf="#id/profile_image" />
</androidx.constraintlayout.widget.ConstraintLayout>

TextView is ignoring its boundaries with longer text and second line. How to fix that?

So here's the code of a simple ConstraintLayout containing two textviews.
Classic Chat Bubble. As I expand the text length of "message_body" Textview everything works as expected until the parent reaches its left border (marginLeft=100dp).
Instead of adding further text to a second line the "message-body" Textview keeps expanding for a while beyond its boundaries and messes up my layout before finally going to next line. How can I fix this it really drives me crazy.
Thanks in advance to this great community!
<?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:id="#+id/myMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="100dp"
android:layout_marginTop="4dp"
android:layout_marginRight="4dp"
android:background="#drawable/my_message">
<TextView
android:id="#+id/message_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:elevation="0dp"
android:gravity="left"
android:padding="10dp"
android:text="try make this text than one line"
android:textColor="#fff"
android:textSize="12dp"
app:layout_constraintEnd_toStartOf="#+id/timestamp"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/message_body"
android:elevation="0dp"
android:padding="5dp"
android:text="10:00"
android:textColor="#fff"
android:textSize="8dp"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshots:
short_text
medium_still_good
now it chrashes left and right border
tried your advice but looks like this now
dmitris solution looks like this on my side atm

Your TextView was missing these:
android:layout_width="0dp"
android:textAlignment="textEnd"
.
<TextView
android:id="#+id/message_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:elevation="0dp"
android:padding="10dp"
android:text="try make this text than one line"
android:textColor="#fff"
android:textSize="12dp"
android:textAlignment="textEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/timestamp" />
The above code should fix your problem, but I would also suggest you fixing all the warnings that Android Studio highlighted for you - add 1 vertical constraint to the TextViews

Try use android:layout_width="0dp" so that the system will apply constraint properly.

How to use very small size button (24dp) android

Iam designing a food ordering page, so i need to use small button to add the food on cart.The problem was when i giving 24dp width and height the button size reduces but i cant able to add the text("+" "-").
I have tried
android:minWidth="0dp"
android:minHeight="0dp"
style="?android:attr/negativeButtonText"
<android.support.design.button.MaterialButton
android:id="#+id/incrementButtton"
style="?android:attr/buttonStyleSmall"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical"
android:gravity="center"
android:minWidth="0dp"
android:minHeight="0dp"
android:text="+"
android:textColor="#color/ash"
android:textSize="#dimen/fm_food_price_text_size" />
I want to know how to set button 24dp and show "+" text. as like below image.
In this image i used textView, so text is visibile. I want this by using button.

Try this way. This is much more efficient
<android.support.constraint.ConstraintLayout
android:layout_width="#dimen/_dp_85"
android:layout_height="#dimen/_dp_35"
android:id="#+id/quantityviewer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/productName"
android:background="#drawable/quantity"
app:layout_constraintBottom_toBottomOf="#+id/productName">
<TextView
android:textColor="#color/black"
android:text="#string/_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/quantity"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="#+id/increase"
app:layout_constraintStart_toEndOf="#+id/decrease"
/>
<ImageView
app:layout_constraintStart_toStartOf="#id/quantityviewer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/decrease"
app:layout_constraintEnd_toStartOf="#id/quantity"
android:src="#drawable/ic_minus"
app:layout_constraintTop_toTopOf="#id/quantityviewer"
app:layout_constraintBottom_toBottomOf="#id/quantityviewer"
android:contentDescription="#string/todo"
/>
<ImageView
app:layout_constraintEnd_toEndOf="#id/quantityviewer"
android:layout_width="wrap_content"
android:src="#drawable/ic_plus"
android:layout_height="wrap_content"
android:id="#+id/increase"
app:layout_constraintTop_toTopOf="#id/quantityviewer"
app:layout_constraintBottom_toBottomOf="#id/quantityviewer"
android:contentDescription="#string/todo" app:layout_constraintStart_toEndOf="#+id/quantity"
/>
</android.support.constraint.ConstraintLayout>
quantitiy.xml(shape of the layout)
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<corners android:radius="#dimen/_dp_5" />
<stroke
android:width="#dimen/_dp_1"
android:color="#color/quantitystokecolor" />
</shape>

I have solved by using ImageButton instead of button.
<ImageButton
android:id="#+id/incrementButtton"
android:layout_width="24dp"
android:layout_height="24dp"
android:padding="8dp"
android:layout_gravity="center"
android:gravity="center"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_minus_symbol"
android:scaleType="centerInside"
/>
for ripple effect i used
android:background="?attr/selectableItemBackgroundBorderless"

ConstraintLayout Flow helper example

I have read in a blog entry that in ConstraintLayout 2.0.0, a way was introduced to create a flow of views. What I exactly want to achieve:
I have several TextViews with a fixed size next to each other. Depending on screen size, some TextViews should be pushed into the next line.
Example on big screen with six TextViews:
[AAA] [BBB] [CCC] [DDD]
[EEE] [FFF]
Example on small screen with six TextViews:
[AAA] [BBB]
[CCC] [DDD]
[EEE] [FFF]
I already saw this Stackoverflow question proposing to use a FlexboxLayout, but there is a comment saying that the same thing now can be achieved using ConstraintLayout.
Anybody can give me an example on how to achieve the desired behavior using ConstraintLayout? I was not able to find any instructions about this. Thanks in advance.

You can achieve this by adding a androidx.constraintlayout.helper.widget.Flow virtual view inside the androidx.constraintlayout.widget.ConstraintLayout and by referencing all your textviews with app:constraint_referenced_ids attribute.
Example below shows how I've achieved it.
<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:orientation="vertical">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[AAAAAAAA]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[BBBBBBBB]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[CCCCCCCC]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[DDDDDDDD]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[EEEEEEEE]"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/text6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="[FFFFFFFF]"
tools:ignore="MissingConstraints" />
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/flow1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dp"
app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_horizontalStyle="packed"
app:flow_verticalBias="0"
app:flow_wrapMode="chain"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Play around with app:flow_ attributes to change the arrangement of the textviews such as alignment, margin, etc.
https://developer.android.com/reference/androidx/constraintlayout/helper/widget/Flow
Final result should look like below depending on your screen size.

ImageView don't match in cardView - Android

I have bellow xml :
<RelativeLayout
android:id="#+id/relative_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relative_two"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_product_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
<TextView
android:id="#+id/status_product_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:layout_marginTop="20dp"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:visibility="invisible" />
</RelativeLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/relative_three"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/relative_two">
<Spinner
android:id="#+id/select_spinner"
android:layout_width="15dp"
android:layout_height="0dp"
android:layout_marginRight="5dp"
android:dropDownVerticalOffset="40dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name_product_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:ellipsize="marquee"
android:gravity="right"
android:maxLines="1"
android:text="TEXT"
app:layout_constraintRight_toLeftOf="#+id/select_spinner"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/count_products_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:gravity="right"
android:text="TEXT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/select_spinner"
app:layout_constraintTop_toBottomOf="#+id/name_product_textview" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
In above xml I have bellow ImageView :
<ImageView
android:id="#+id/image_product_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
Problem: My ImageView don't match in cardView (left and right and top).It has 2 or 3 space around ImageView(left and right and top).
In my source code I am setting Image like bellow :
Picasso.with(context)
.load(productsModelList.getPictureUrl())
.placeholder(AppCompatDrawableManager.get().getDrawable(context, R.drawable.placeholder_pictures))
.fit()
.into(image_product_imageview);

This space is the result of that CardView supports for system older than L (API 20). To make your layouts look the same either on the pre-Lollipop (and pre-CardView widget) or Lollipop and newer, Android introduced some additional attributes.
Because overlapping (rounding the corners) the content was difficult for older Android versions, the cardPreventCornerOverlap has been added and has been set by default as true. That is why there're white stripes around your ImageView - you can check by yourself that their width is closely related to the cardCornerRadius value.
To remove this padding turn off cardPreventCornerOverlap. You can do it:
via xml by card_view:cardPreventCornerOverlap="false"
or programatically by yourCardView.setPreventCornerOverlap(false).
Keep in mind that this gives you the effect you want only for API 20+.
On devices with older versions of a system, your rounded corners will be invisible (hidden under not-rounded image).
To know more check the CardView doc. In the first paragraph you can find the official note about your issue.