Develop Reference

Is there a possibility to change the position of the textView if the text goes out of the screen frame?

The situation is: I have a constraint layout with 3 TextViews in a row
<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_marginBottom="10dp"
android:id="#+id/constraint"
tools:context=".MainActivity">
<TextView
android:id="#+id/small"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text, not too long"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#id/small"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text, that can be extremely long, but can be also short"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#id/medium"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The last textView can be very long and when it is, I would like to move this textView under textView with id medium, so that the text in the text view is not separated. That means, I do not want to display text within a textView on two lines, I want to have text displayed in one line. If the text is short: on the same level as other textViews(picture 1), if the text is too big to fit the screen, the whole textView should be displayed under the second textView(#+id/medium) - picture 2.
Is it in general possible to do so? If yes, I would appreciate it, if you give me some hints.
With what I tried to do I can only move the rest of the text to a new line and display the textView in two lines, but that is not what I really want to see.
Standard situation, when text is not too big:
What I would like to have if the text is too big:

You can use Flow (no not that one) which is a flexbox-style layout helper for ConstraintLayout
<?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/constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
tools:context=".MainActivity"
tools:ignore="MissingConstraints">
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:constraint_referenced_ids="small, medium, big"
app:flow_horizontalBias="0"
app:flow_horizontalGap="10dp"
app:flow_horizontalStyle="packed"
app:flow_wrapMode="chain"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/small"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="5" />
<TextView
android:id="#+id/medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text, not too long" />
<TextView
android:id="#+id/big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text, that can be extremely long, but can be also short" />
</androidx.constraintlayout.widget.ConstraintLayout>
It basically just lets you define a chain of elements and handles their constraints (note the tools:ignore="MissingConstraints" in the main layout, you don't put them on the views themselves) and then you can set it to wrap when things go off the screen, etc. There are a bunch of tweaks you can do, like setting a max number of elements on a line, forming an aligned grid, etc
There's a pretty good visual guide here:
https://proandroiddev.com/awesomeness-of-constraintlayout-flow-aa0b5edd5df

Wrap right-aligned view when there is no space

I have 2 views in a layout - TextView and Button. TextView is aligned/anchored to the left side and the button is to the right side.
What I'm trying to achieve is the natural "wrap behavior" of the Button. When TextView will be wide enough so that there won't be space for the button (in the same line), it should move below the TextView, while still anchored to the right.
Here are 3 scenarios for the layout which I want to achieve:
I was trying to make this with FlexBoxLayout, but the button appears on the left side after wrapping.
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="space_between"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text text"
android:gravity="start"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Button"
/>
</com.google.android.flexbox.FlexboxLayout>
So how can I do that? It doesn't need to be FlexBox, I can use any layout, even 3rd party.

Use justifyContent="flex_end" in the parent and set layout_flexGrow to the children like this works for me.
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="wrap_content"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_end">
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="blah blah"
app:layout_flexGrow="1" />
<TextView
android:id="#+id/textview3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="( . )( . )"
app:layout_flexGrow="0" />
</com.google.android.flexbox.FlexboxLayout>

No need for a 3rd party layout.
ConstraintLayout should be more than enough - with a small tweak in code.
Your TextView will have straightforward constraints, set to parent layout (start, top, end).
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text text text text text text" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text" />
</android.support.constraint.ConstraintLayout>
In the code, just check the width of the TextView and compare it with the width of the parent (basically check it should overlap with the button).
If it does change(you will have to do this in code but this is the principle):
app:layout_constraintTop_toTopOf="#+id/text"
to
app:layout_constraintTop_toBottomOf="#+id/text"
If you need to do this dynamically ConstraintLayout has neat feature "Keyframe animations" that creates awesome looking animations when you are changing constraints.

Doesn't seem like there is a way to do it with Flexbox. I would just do it programmatically when you've inflated the resource (in onCreateView() or something like that). The parent of both of the views would be a RelativeLayout, with the Button aligned to the TextView top when the widths combined don't exceed the width of the RelativeLayout, and aligned to the bottom of the TextView when the widths are larger than that.

Can't keep views from overlapping even when I use layout_margin

I can't figure out how to render my listItems correctly. Everything seems fine until the text title is too long. Looking at the pics below, I have the Title anchored on the left side of the listItem View and to the right of the imageView. I've even tried anchoring the right side to the right edge of the entire view but with no success. If the user enters a title too long the views overlap.
I want the title to be centered between the imageview and the left side of the entire listItem view. I have provided pics of how this all renders. Any help would be greatly appreciated. When the title gets long enough, it wraps the text which is fine. At this point I'd even settle for the trailing ... but I would prefer to have the text wrap. I just don't want to overlap the imageview. I have also posted the xml code
<?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:orientation="vertical"
android:padding="5dp"
android:id="#+id/list_item_container">
<TextView
android:id="#+id/match_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textSize="16sp"
tools:text="Match Name"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintRight_toLeftOf="#+id/imageView"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/match_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Match Date"
android:textAlignment="center"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintRight_toLeftOf="#+id/imageView"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/match_name"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="60dp"
android:layout_height="45dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="8dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_more_vert_black_24dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:layout_marginRight="68dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.484"/>
<TextView
android:id="#+id/match_id_hidden"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="invisible"
tools:layout_editor_absoluteY="67dp"
tools:layout_editor_absoluteX="24dp"/>
</android.support.constraint.ConstraintLayout>

Inside the ConstraintLayout try to always use "0dp" for your heights and widths and always set the app:layout_constraint..._to...Of for all 4 sides for all your views. Examine the outcome and then fine tune to get the expected result. Do this in the XML instead of in the visual editor; in my experience it is quicker and it avoids the layout_editor_absolute... settings.

Set android:layout_width="0dp" for both your TextViews. In a ConstraintLayout, a value of "0dp" basically means match the constraints. A value of "wrap_content" doesn't take constraints into account when measuring the views, just when positioning them.

Constraint Layout not working, maybe a bug in design editor?

I am creating my first app with android studio and this is my first problem:
I want to try the ConstraintLayout. I have built the layout with a ConstraintLayout with the Design Editor (clicking it together). When i try the layout in Android Emulator, all Buttons have moved in the left upper corner :(
Except the "Hello World" Label which was generated automatically when i created my first project.
The difference between the Label and the Button is, that some code lines beginning with app:layout_constraint.... are missing. You can see it in Code.
What am I doing wrong, or is it a bug?
I would be glad for an answer! :)
<?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"
tools:context="com.example.u0017007.coffeecounter.MainActivity">
<TextView
android:layout_width="136dp"
android:layout_height="30dp"
android:text="Hello World!"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.234" />
<Button
android:id="#+id/buttonAddCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:freezesText="false"
android:text="#string/add_coffee"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="231dp" />
<Button
android:id="#+id/buttonRemoveCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/remove_coffee"
tools:layout_editor_absoluteX="236dp"
tools:layout_editor_absoluteY="231dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_editor_absoluteX and tools:layout_editor_absoluteY are only used for preview, like all tools:XXXX.
You need to add constraints to your view. You can add in the XML or you can do it with the visual editor.
There is a very good website that explain all about ConstraintsLayout.
By the way, Android Studio warm you with a error This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints if you don't set constraints.

It seems from the above code that, you didn't added any constraints to buttons thats why they moved to left upper corner.
<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">
<TextView
android:layout_width="136dp"
android:layout_height="30dp"
android:text="Hello World!"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.234" />
<Button
android:id="#+id/buttonAddCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:freezesText="false"
android:text="ADD coffee"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="276dp"
app:layout_constraintRight_toLeftOf="#+id/buttonRemoveCoffee"
android:layout_marginRight="82dp"
android:layout_marginLeft="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="1.0" />
<Button
android:id="#+id/buttonRemoveCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="remove coffee"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="276dp"
android:layout_marginRight="24dp"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Please refer to bellow link -
https://www.youtube.com/watch?v=z53Ed0ddxgM

tools:layout_editor_absoluteX="236dp"
tools:layout_editor_absoluteY="231dp"
These are used by studio to render in Graphic editor only. During run time,
as constraints are not set, the views take default position(0,0).
Try setting some constraints on buttons and procedd

Nested Constraint Layout not showing if using Match_Constraints

I'm trying to create a nested ConstraintLayout in Android.
The objective is to have an Image to the left, and another constraint layout to the right, inside a constraint layout, as the following image:
It correctly shows on the preview, but inside the application, it bugs and doesn't show at all
Layout File:
<?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:id="#+id/box_npcs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/npcImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/layoutInformation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/layoutInformation"
app:srcCompat="#color/colorBlueishGreen" />
<android.support.constraint.ConstraintLayout
android:id="#+id/layoutInformation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:maxWidth="250dp"
app:layout_constraintHorizontal_bias="0.021"
app:layout_constraintLeft_toRightOf="#+id/npcImage"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/top_priority"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="start"
android:text="DummyTextIsDummy"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/common_google_signin_btn_text_light_default"
android:textSize="24sp"
android:textStyle="bold"
android:typeface="normal"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
The layout is being added to another ConstraintLayout using the code
parent.addChild(inflater.inflate(R.layout.box_npc);
How should I fix this? And even, what is the issue?

The situation faced was that OP was trying to add the created ConstraintLayout to another ConstraintLayout programatically. That was being made using
inflater.inflate(R.layout.box, null)
It was an incorrect approach, as this ignores the layout parameters from the box. What was made to fix it was
inflater.inflate(R.layout.box, PARENT_LAYOUT/* One that box was being added to*/)
This fixes some issues due to the fact that the layout parameters were now being respected by the parent layout.
More information: Understaing Android's Layout Inflater.inflate()

For child views of each inner ConstraintLayout, use the id of parent layout instead of "parent".
For example instead of:
app:layout_constraintTop_toTopOf="parent"
Use
app:layout_constraintTop_toTopOf="#+id/parent_id"