Develop Reference

Android. ConstraintLayout: constraint end not working

I need to create chain with ConstraintLayout.I want the TextView to be attached to the left side, the text is immediately followed by a ImageView, and another ImageView is attached to the right side of the screen. See an example.
If the TextView contains long text, I need the text to go to another line. That is, so that the TextView does not overlap with the image view on the right, but is limited to margin. See an example.
Here is my code:
<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"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_first"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the text is not long, then everything works well, but if the text is long, then it is superimposed on the ImageView and goes beyond the screen. I tried to use chain but nothing worked. Please, help me.

You can achieve this by fixing ivSecond to the end of the parent and then creating a horizontal chain of tvTitle and ivFirst, so long as you apply a packed chain style and a bias of 0 to the chain and use constrainedWidth on the text view.
<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/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivFirst"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="hello world"/>
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When the text is short, the first image is right up against it:
When the text is long, the first image stops at the edge of the second image and the text wraps to another line:

you can do it with layout_constrainedWidth . For this your text view needs to be constrained horizontally . try the layout below i have made few changes in 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="wrap_content"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#+id/ivFirst"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

You can use FlexboxLayout to wrap the tvTitle TextView & the ivFirst ImageView; So that it controls to wrap the content of the TextView to the next line and avoid pushing the ivFirst to the right/end.
<?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="wrap_content">
<com.google.android.flexbox.FlexboxLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
app:alignContent="center"
app:alignItems="center"
app:flexDirection="row"
app:flexWrap="nowrap"
app:layout_constraintBottom_toBottomOf="#+id/ivSecond"
app:layout_constraintEnd_toStartOf="#+id/ivSecond"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_flexShrink="10000" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_first"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"/>
</com.google.android.flexbox.FlexboxLayout>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Also make sure to add the gradle dependency at module level:
implementation 'com.google.android.flexbox:flexbox:3.0.0'
Preview:

I am struggling to control the gravity of a textView inside my CardView items once I put it inside a GridView

Below is a screenshot of my gridView currently:
Even though I have centered the TextField inside the card, they are still pinned to the left. How do I fix this so that the Text is centered in the middle? It seems like once I add an item to a gridView, the gridView attributes overrule their children.
Here is my layout code:
CARDVIEW
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
layout_height=""
android:layout_width="120dp"
android:layout_height="120dp"
app:cardBackgroundColor="#E73737"
app:cardElevation="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCategoryIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/tvCategoryTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/btn_translation_panel_loading" />
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Fragment
<?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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.fragments.CategoryViewFragment">
<GridView
android:id="#+id/gvCategories"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:clickable="true"
android:clipChildren="false"
android:gravity="center"
android:horizontalSpacing="8dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>

Add android:gravity="center" in your textview like following.
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:gravity="center"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"/>

use relative layout insists of ConstraintLayout.
use center_horizontal to the text view=true

Can you please try this and change your constraint layout ?
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivCategoryIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/btn_translation_panel_loading" />
<TextView
android:id="#+id/tvCategoryTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivCategoryIcon"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Recyclerview listitem layout gravity issue

This is the chat bot. Some messages are left aligned and some are right aligned. Left aligned messages are working fine but right aligned messages also get left aligned. This is the required listitem. layout_gravity to be on the right. But when added to the recycledview, the list item moves to the left as depicted in another photo. I don't know what could be the culprit. Is it constraint_layout or linearlayoutmanager or something else.
`<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="300dp"
android:layout_height="wrap_content"
android:padding="#dimen/paddingBig"
android:background="#drawable/balloon_outgoing_normal"
android:layout_gravity="right"
app:layout_constraintRight_toRightOf="parent"
android:layout_margin="8dp">
<TextView
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/text"
android:layout_width="0dp"
android:paddingRight="#dimen/paddingSmall"
android:layout_height="wrap_content"
tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#id/status"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
tools:text="21/04/2016, 2:30 P.M."/>
<ImageView
android:id="#+id/status"
tools:visibility="visible"
android:src="#drawable/baseline_schedule_black_18"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content" tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.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/chat_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<ImageView
android:id="#+id/sendMessage"
android:layout_width="52dp"
android:layout_height="52dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="?android:attr/selectableItemBackground"
android:padding="#dimen/paddingMedium"
android:src="#drawable/send_disable" tools:ignore="ContentDescription"/>
<EditText
android:id="#+id/input"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/type_message"
app:layout_constraintRight_toLeftOf="#id/sendMessage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:inputType="textCapSentences|textMultiLine"
android:maxLines="2"
android:padding="#dimen/paddingMedium" tools:ignore="Autofill"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingBottom="20dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/input"
tools:listitem="#layout/me_message"
app:layout_constraintTop_toTopOf="parent">
</androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:visibility="visible"
android:visibility="gone"/>
</androidx.constraintlayout.widget.ConstraintLayout>`
I have tried many things. Actually earlier I have used relativelayout for the same and using alignParentBottom that is working but I am amazed why constraintlayout is not working.

You need to use a nested constraintlayout to achieve that view. Also in in your recyclerview set the width to match_parent
android:layout_width="match_parent"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="#dimen/paddingBig"
android:background="#drawable/balloon_outgoing_normal"
android:layout_margin="8dp">
<TextView
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/text"
android:layout_width="0dp"
android:paddingRight="#dimen/paddingSmall"
android:layout_height="wrap_content"
tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#id/status"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
tools:text="21/04/2016, 2:30 P.M."/>
<ImageView
android:id="#+id/status"
tools:visibility="visible"
android:src="#drawable/baseline_schedule_black_18"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content" tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Set your RecyclerView's layout_width to match_parent and set right gravity for it. That should work.

Try this
<TextView
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/text"
android:layout_width="match_parent"
android:paddingRight="#dimen/paddingSmall"
android:layout_height="wrap_content"
tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>

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.

How do I make two textviews in a ConstraintLayout in a CardView be flush?

I'm a bit new to Android development, so I apologize if this question is simple. I have two textviews stacked vertically that I would like to get flush with each other. There's too much whitespace between the two elements:
I have the following activity layout in which I've tried to make the TextViews flush by using a constraint view and setting the margin between the bottom and top to 0dp:
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PackageService">
<android.support.v7.widget.CardView
android:id="#+id/card_inventory"
android:layout_width="match_parent"
android:layout_height="101dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.048"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.49" />
<TextView
android:id="#+id/text_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginStart="32dp"
android:text="Button Title"
android:textAppearance="#android:style/TextAppearance.Material.Large"
app:layout_constraintBottom_toTopOf="#id/text_last_scan"
app:layout_constraintStart_toEndOf="#+id/image_inventory"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_last_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Subtitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/text_inventory"
app:layout_constraintTop_toBottomOf="#+id/text_inventory" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Any help would be appreciated.