Develop Reference

Android constraint layout barrier causing button cut at the end

I am using constraint layout Barrier and this is my layout -
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="abcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjkly"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintStart_toEndOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is what the resulting image looks like -

Based on the conversation on what exactly what the OP needs, constraint guideline will produce the intended result:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="abcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjklyabcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjklyabcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjklyabcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjkly"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/guideline"
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.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
The above code produces the following if the text keeps growing, it ensures the button stays on the screen like the following:
If you don't want the button to be cut at the end & wrap instead, add an End constraint:
app:layout_constraintEnd_toEndOf="parent"
So your button xml should be like the following:
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent" />
The resulting output will be like this:
Now if you want otherwise, like the button would remain/retain its own size and the textview will not, then set the barrier direction to start instead of end & pass button as constraint referenced ids instead of textview like the following:
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="button" />

I tried this way blow,and it works.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="abcdefghijklkkkkkkkkkkkfghjqwertzuiopasdfghhjkly"
app:layout_constraintEnd_toEndOf="#+id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
like this

Creating a group box layout, trying to overlay the titles of the outer border

Android 4.0.1
I can trying to create a group box that will contain some details. But the problem I am having is with the titles that should display over the groupbox's border lines as in the diagram.
I have used the CoordinatorLayout as I think this would be better for overlaying the border lines and I can anchor on the top start and end.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clGroupBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/bg_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvStandardDeliver"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Standard Delivery FREE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvExpressDelivery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="Express Deliver"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvStandardDeliver" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/tvHomeDeliver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:translationZ="10dp"
android:text="Home Delivery"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|start"/>
<TextView
android:id="#+id/tvViewDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:padding="8dp"
app:drawableEndCompat="#android:drawable/arrow_down_float"
android:gravity="center"
android:translationZ="20dp"
android:text="View Details"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
However, when I run on a device the border lines are always displayed over the text titles. I have tried using translationZ and elevation to bring them forward. But it doesn't work.
This with what I can getting when I run:

Use This Code and you will get a result like below image
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clGroupBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/stroke"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvStandardDeliver"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Standard Delivery FREE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvExpressDelivery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="Express Deliver"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvStandardDeliver" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/tvHomeDeliver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="Home Delivery"
android:background="#ffffff"
android:padding="10dp"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|start" />
<TextView
android:id="#+id/tvViewDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:gravity="center"
android:background="#FFFFFF"
android:padding="10dp"
android:text="View Details"
app:drawableEndCompat="#android:drawable/arrow_down_float"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

for others who have the same problem, you can use this library:
https://github.com/homayoonahmadi/GroupBoxLayout
It doesn't use any white or other color backgrounds for hiding border under the label
Also it supports rtl and ltr directions

Android Studio xml object over object

how can a put a TextView befor a Button in xml file? My textview always behind the button. I am in a constraintlayout. I want to make a little number in the top right corner of the button. I made a drawable for that, hat it looks nice.
It would be nice if someone could help! Thanks!!!
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:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>
here a picture

Please use this layout to put the TextView on top of Button view:
You need to add android:translationZ="10dp" in TextView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationZ="10dp"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to keep my Right item right when the constraints item on the left is gone (Constraint Layout)

I have a code as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
android:fontFamily="serif-monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
It looks like below.
However, at times I need to set left_text to gone. But I still want my Right to be at the right side of the screen. How could I achieve that?
(Currently when left_text is gone, my Right went to middle as per picture below)

I manage to solve it by setting my width="0dp" and android:textAlignment="viewStart" or android:textAlignment="viewEnd"
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:textAlignment="viewStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/right_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
android:textAlignment="viewEnd"
android:fontFamily="serif-monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
The width="0dp" will take up the entire space

You need to use Barriers
Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="left_text"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:barrierDirection="end" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT When both textview is Visible
OUTPUT When Visibility Gone of left_text
UPDATE
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="left_text"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:barrierDirection="end" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#3F51B5"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT When both textview is Visible
OUTPUT When Visibility Gone of left_text

You can achieve this using Guideline. check example below
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline10"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline10"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50" />

My answer is similar to #Basi but I want to give extra information from my perspective:
When you work with guidelines and put your view width to wrap_content what may happen is that your view will overlap your guideline like this :
So my recommendation is to constraint both side of your view and set its width to 0dp (match_constraints ) and by doing it your view will fit into its bounds and your guideline won't overlap your view, then this will look like this now :
So if you want to use guidelines as in #Basi you better use 0dp on your width:
<?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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Right"
android:textColor="#F40"
android:textAlignment="textEnd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Left"
android:textColor="#F40"
android:textAlignment="textStart"
app:layout_constraintEnd_toStartOf="#+id/guideline10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this :

You can also use SequenceLayout to make it work.
<Sequences>
<Horizontal>
<Span id="#id/left_text" size="wrap"/>
<Span size="1w"/>
<Span id="#id/right_text" size="wrap"/>
</Horizontal>
</Sequences>

I tried your code and I am curious, why do you use constraint from Left to Right and from Right to Left?
There is no need for them. If you delete those constraints you have no problem.
Just to make things clear for setting view's position you need just one horizontal and one vertical constraint.

You need bias for both TextView in Constraint Layout and app:layout_constraintStart_toStartOf="parent" of another TextView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Align layout at the bottom of the screen

I would like to have the same as on the enclosed image with the scanning information widgets (progressbar, textview and button) to stay at the bottom of the screen. However when I run my app they go at the top of the screen when the ListView is empty.
I tried a lot of methods described in other topics, but I still could not make it work.
Do you have some suggestions about which layout I should use in this case?
<?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">
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ListViewDevices">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="#string/scan_in_progress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/pause_scan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
</android.support.constraint.ConstraintLayout>

This is the way I did it an app I worked on previously. Using a RelativeLayout as the main shell we are able to position elements in any way inside it.
<?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:layout_weight="10"
android:background="#color/white"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:background="#color/grey_font">
<ProgressBar
android:id="#+id/progressBarDevice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="12dp" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="24dp"
android:layout_toRightOf="#id/progressBarDevice"
android:text="Scanning" />
<Button
android:layout_marginRight="16dp"
android:layout_centerVertical="true"
android:background="#color/orange_pay"
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="8dp"
android:text="PAUSE" />
</RelativeLayout>
</RelativeLayout>

I would first simplify the layout by flattening it slightly. Removed the FrameLayout that holds the bottom Constraint.. Then made the listViewDevices constrain bottom to top of the bottom contraint layout (which i have called scanner)..
Looks correct in my layout editor.
<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">
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toTopOf="#id/scanner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.ConstraintLayout
android:id="#+id/scanner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ListViewDevices"
app:layout_constraintBottom_toBottomOf="parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="SCANNING FOR NEW DEVICES..."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="PAUSE"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>

I would rather prefer to add LinearLayout as root layout.
So when you scroll down or up then it will not scroll with your layout when its empty.
So when your listview is empty then also it will be in the bottom of the screen only.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/ListViewDevices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ListViewDevices">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBarDevice"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/lblScanningStatus"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/lblScanningStatus"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="20dp"
android:text="#string/scan_in_progress"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/progressBarDevice" />
<Button
android:id="#+id/btnPauseScan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="#string/pause_scan"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
</FrameLayout>
</LinearLayout>

Thank you for your answers but none of them works. Sometimes it looks fine in Android Studio but when I test my application on a real phone the widgets are displayed on top of the screen.
If I will find a working solution I will post it here.