Develop Reference

Convert children to proper way in parent constraint layout Android

Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.xml
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.

There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.

You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews

How to align TextView in two lines between images in ConstraintLayout

I'm doing some design in constraintlayout that is give me a pain. I have an image at the left, two text in a vertical orientation that is align at the end of this image and I have other constraints at right with an image and text.
If I type a long text in the two text that i have in a vertical orientation the text cover the constraint that I have at right of my view. That I want to do is if this text is long can't cover this constraint, have to expand to other line.
This is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="8dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_error" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textColor="#color/app_primary_medium"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/image_slider"
app:layout_constraintTop_toTopOf="#+id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraint_undo_button"
android:layout_width="31dp"
android:layout_height="match_parent"
android:layout_marginEnd="24dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="14dp"
android:layout_height="16dp"
android:src="#drawable/icon_loop"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/icon_loop"
tools:visibility="visible" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center"
android:text="Ree"
android:textColor="#color/app_primary_medium"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_undo" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

I recommend you use only one parent view and read about Guideline view, Constraints Chains and Barriers. So a possible solution could be the next:
And the 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:padding="16dp">
<!-- In the parent constraint group add your custom background -->
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_80_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.85" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_slider"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_title_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="#id/guideline_80_percent"
app:layout_constraintStart_toEndOf="#id/image_slider"
app:layout_constraintTop_toTopOf="#id/image_slider"
tools:text="Title" />
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="#id/image_slider"
app:layout_constraintEnd_toEndOf="#id/txt_title_animation_native_cart"
app:layout_constraintStart_toStartOf="#id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#id/txt_title_animation_native_cart"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t adfadf adflkjadfkj adlkjadflk" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_undo"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#id/text_undo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline_80_percent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/text_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/image_undo"
app:layout_constraintStart_toStartOf="#id/image_undo"
app:layout_constraintTop_toBottomOf="#id/image_undo"
tools:text="Ree" />
</androidx.constraintlayout.widget.ConstraintLayout>

First, you don't need two nested constraint layouts, one is enough.
Then just set the text with endToStartoOf image_undo and set the width to 0dp instead of wrap_content

Just do this:
<TextView
android:id="#+id/txt_subtitle_animation_native_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:maxLines="2"
android:textColor="#color/app_grey_medium"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#+id/txt_title_animation_native_cart"
app:layout_constraintTop_toBottomOf="#+id/txt_title_animation_native_cart"
app:layout_constraintEnd_toStartOf="#+id/constraint_undo_button"
tools:text="Subtitle asfda sdfowei oiwue rpoweiru oiwue twoeiu t oiweu t" />

How to fit listview inside constraint layout which has max height limit?

I want the layout to be visible based on the content till max 80% of the device height.
Listview which is inside the constraint layout needs to fit (with scroll) between the above text and below button.
Problem:
ListView is overlapping with the above and below views.
<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/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_max="wrap"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="#drawable/primary_button"
android:fontFamily="#font/poppins_medium"
android:minWidth="180dp"
android:text="#string/error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:fontFamily="#font/poppins_medium"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:fontFamily="#font/poppins_bold"
android:text="#string/instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Draw TextView1 (instruction_title) at the top of parent, then draw TextView 2 (instruction_subtitle) below TextView1 (top_toBottomOf).
Then draw Button at the bottom of parent.
Finally draw ListView top_toBottomOf TextView 2 (instruction_subtitle) and bottom_toTopOf Button (error_instruction_again) and set height of listview to 0dp to make sure that ListView will expand all height.
<?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/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"
android:id="#+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideLine"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:text="instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#+id/instruction_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:minWidth="180dp"
android:background="#drawable/background_button_highlight"
android:text="error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintTop_toBottomOf="#id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

You have two issues from what I can see, one is the chaining: when you want to order elements with a constraint layout you have to define both the top and bottom relationship for everything (or start and end if you're stacking them horizontally).
For example your instruction_subtitle is missing the top constraint. You can read about chains here. You can add them automatically selecting elements in the component tree of the design view, right clicking them and choosing chains -> create/modify existing chains. For small layouts like this you can simply write them.
Another thing about chaining, if you want your widgets layout to be stretched according to the constraints, you need to use 0dp for the layout_width or layout_height. Change your list layout_height to 0dp.
After that, remove app:layout_constraintHeight_max="wrap" from your contraintlayout
Some notes:
you can use tools:listitem="#layout/your_list_item_layout" to show a preview of your items in the list
why use a listview instead of a recyclerview?
Keep your widget in the same order as they appear on the screen, you have button - list - text - text but what you need is text - text - list - button
Final code:
<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/error_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.8"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/instruction_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="6dp"
android:fontFamily="#font/poppins_bold"
android:text="#string/instruction_title"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/instruction_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:fontFamily="#font/poppins_medium"
android:text="Please read the instructions below and try again to get accurate results"
android:textAlignment="center"
android:textColor="#FEFEFE"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/instruction_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_title" />
<ListView
android:id="#+id/instruction_list"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/error_instruction_again"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_subtitle" />
<Button
android:id="#+id/error_instruction_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:background="#drawable/primary_button"
android:fontFamily="#font/poppins_medium"
android:minWidth="180dp"
android:text="#string/error_try_again"
android:textAlignment="center"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/instruction_list" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Problem placing TextView on ImageView using ConstraintLayout

I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.

It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.

Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.

Take all free space between elements in ConstraintLayout

I need layout with three elements:
TextView1 with fixed width
TextView2 with dynamic width
One more TextView3 with fixed width
All elements must be visible on the screen at the same time.
If TextView2 contains a lot of text, the layout should be like this:
If TextView2 contains contains little text, the layout should be like this:
How can I create it using ConstraintLayout ?

Put your TextViews in a horitzontal packed chain with a bias of 1 to align them to parent's end. To make sure that the middle TextView doesn't overlap other Views and satisfies its constraints you need to set app:layout_constrainedWidth="true" attribute for it.
<?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/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="view1"/>
<TextView
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view3"
app:layout_constraintStart_toEndOf="#id/view1"
app:layout_constraintTop_toTopOf="parent"
android:text="view2"/>
<TextView
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view2"
app:layout_constraintTop_toTopOf="parent"
android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Here is the sample code:
Take a look:
Design.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#63f542"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
Output:

You can create the view with the code below, but the only constraint is you have to give max width to centered text view
<?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/linearLayout17"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/hint_color">
<TextView
android:id="#+id/txt1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text1"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintEnd_toStartOf="#+id/txt2"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/txt2" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:maxWidth="200dp"
android:text="text2asdadadasdaasdasdddadadadaddadadasdasdasdasdasdasddadasdasdadasdasdasdasdasdasdasdasdasddadadadadadada"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt3"
app:layout_constraintEnd_toStartOf="#+id/txt3"
app:layout_constraintTop_toTopOf="#+id/txt3" />
<TextView
android:id="#+id/txt3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text3"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>