Develop Reference

Layout gets cropped on round chin

The layout below gets cropped on a round chin Wear device. The round chin Wear device only displays the first TextView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/lytLoginMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxedEdges="all">
<TextView
android:id="#+id/lblDlgLogoutTitle"
style="#style/Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Hi Employee #1" />
<TextView
android:id="#+id/lblDlgLogoutMessage"
style="#style/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#color/colorAccent"
android:gravity="center_horizontal"
android:text="#string/logout_msg"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutTitle" />
</android.support.constraint.ConstraintLayout>
</android.support.wear.widget.BoxInsetLayout>
But my layout which got a ScrollView that contains a ConstraintLayout that contains 3 TextView and 2 EditText is displayed properly.
Both layouts are used for an AlertDialog and I don't know what is wrong with my layout.
UPDATE:
I tried to insert a new TextView under the second TextView and the second TextView got displayed now but the new TextView is not visible though.
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/lytLogoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxedEdges="all">
<TextView
android:id="#+id/lblDlgLogoutTitle"
style="#style/Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Hi Ricky Manalo" />
<TextView
android:id="#+id/lblDlgLogoutMessage"
style="#style/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center_horizontal"
android:text="#string/logout_msg"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutTitle" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutMessage" />
</android.support.constraint.ConstraintLayout>
</android.support.wear.widget.BoxInsetLayout>

Have you tried android:fitsSystemWindows="true" ?
More here:
https://developer.android.com/training/wearables/ui/layouts

Using #promanowicz's answer and increasing the marginTop and marginBottom of the message's TextView, I was able to display the full message TextView.
This is my final code.
<TextView
android:id="#+id/lblDlgLogoutMessage"
style="#style/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="32dp"
android:fitsSystemWindows="true"
android:gravity="center_horizontal"
android:text="#string/logout_msg"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutTitle" />

ConstraintLayout TextView cutting text off

I have a strange problem where the text in a TextView is not being displayed if it's wrapping to a new line.
This screenshot shows my issue:
The bold text is causing a word to wrap to the next line but it's not being shown. This is what it looks like without the bold:
And this is what it looks like if I force two lines using android:lines="2":
This is the code I'm using:
<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:breakStrategy="simple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried setting the width to wrap_content and changing the padding and margins but nothing works.
I should mention this layout is a row in a RecyclerView if that makes a difference.

<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:textStyle="bold"
android:text="Episode 1010 Christina Hendericks"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/episode_row_item_title_thumbnail"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginRight="8dp"/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
android:text="Yesterday"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="01:02:24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_download"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using the above layout with correct drawables

ConstraintLayout how to pack keeping the same ratios of distance

I have a layout that exceeds the view boundaries after applying all the margins I'm looking for. I read that applying a chain will make it keep the same ratios while packing all the elements inside the view boundaries.
<?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">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tut_first_img"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
This is what's happening without margins after all margins applied it will exceed the view screen. How can I compact it while keeping the ratios? Also, how can I center all views in a vertical line?

Here is the code as per your use case, pls. check:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#+id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintBottom_toTopOf="#+id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/common_full_open_on_phone"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
</android.support.constraint.ConstraintLayout>
I hope it helps you, looking forward if any further help is required from my end.
Screenshot:

Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="dsadsadsadsadasd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/texto1" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="gggggg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/botao"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Texto2" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="ggggggggggggggggggggg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Just copy paste it and let me know if it works.

I hope that the below mentioned code helps you in achieving your desired layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/Texto2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsadsadsadsadasd"
app:layout_constraintBottom_toTopOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<TextView
android:id="#+id/texto1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="gggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/Texto2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/img" />
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/sym_def_app_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/texto1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/botao" />
<Button
android:id="#+id/botao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ggggggggggggggggggggg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Screenshot (of the UI achieved by the above code):
The chain symbol (right most symbol; below the first view in the layout) can be used to toggle and thus apply different chain styles (as per your need), if you aren't familiar with 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.

Constraint layout with wrap_content clips it's content

Recently I've bumped into a strange ConstraintLayout behavior. What I tried to do was a simple layout with ImageView, Button and a TextView. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null"
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_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="#id/image" />
<Button
android:id="#id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
The ImageView content is loaded using Glide like this:
Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);
Here is how I wanted it to look like:
And here's what I actually got:
My intent was to make the text align relative to the button, not the image, how do I make this happen? Why did the ConstraintLayout clip itself to the ImageView? On the other hand, if I align the text relative to the image everything works great and nothing is clipped.
The full source is available here:
https://github.com/satorikomeiji/ConstraintLayoutBug

Use this for your Button:
#+id/button
instead of
android:id="#id/button"
You'll be able to design urself.
I would suggest you to add loading image:
.placeholder(R.drawable.ic_error_black_48px)
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Preview:

You need to align something to the bottom of the parent
Align TEST TEXT TextView bottom to the bottom of parent like this:
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
And add plus sign in button id
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />

Try this :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>