Develop Reference

Constraintlayout(in RelativeLayout) layout_alignParentBottom cuts from bottom(in default mode of app)

I have added ConstraintLayout in RelativeLayout and I want that at the bottom of my RelativeLayout.So, it's proper when the app opens in full-screen mode but in default mode constraint layout cuts from the bottom.
I have checked this thing in the different scenario like if I put it on top it comes proper even in the default mode but when I align it to bottom it gets cut.
<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"
tools:context="org.cocos2dx.cpp.AppActivity"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:paddingBottom="0dp"
android:layout_alignParentBottom="true"
android:background="#color/control_background">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/close"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/capture"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/reverse_cam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.508" />
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
So, here in ConstraintLayout when I keep
android:layout_alignParentTop="true"
It doesn't get cut from top like in the image
but when I give it to android:layout_alignParentBottom="true" it gets cut only in default mode of the app and I want this constraintLayout at bottom of the RelativeLayout

You can also use Constraint layout as Rootview like below.
<?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"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorPrimary">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.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.

Android Constraint Layout not working / not responsive

I'm trying to create the following layout. I've read that constraint layout is what I should to make my layout responsive. I've tried containing my constraint layout inside a linear layout hoping that the alignment would be fixed but to no avail. (not sure if what I'm doing is right)
Any help is much appreciated.
Here's how it looks in android studio:
Here's my xml code:
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_rightwashed"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/menu_btn"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#drawable/burger_btn" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/calendar_btn"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/transparent"
android:layoutDirection="inherit"
android:src="#drawable/calendartrain"
android:visibility="visible"
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"
app:layout_constraintVertical_bias="0.48000002" />
<ImageView
android:id="#+id/skillstree_btn"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layoutDirection="inherit"
android:src="#drawable/skillstreetrain"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.58000004" />
<ImageView
android:id="#+id/completed_btn"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layoutDirection="inherit"
android:src="#drawable/completedtrain"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.22"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.24000001" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/leftDrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light" />
<include
layout="#layout/drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>

Your layout is dependent upon the dimensions of whatever device you are emulating in the designer. When the screen size or dimensions change, you are getting a mismatch in how you puzzle pieces are lining up.
If you want to stay with the three separate then I suggest that you modify your images to fit together along the horizontal and vertical axes such that the rounded corners of the pieces fit into the corner of an enclosing ConstraintLayout. Once that is done, you can rotate the ConstraintLayout to show your tilted puzzle.
Here is an image of a quick mock-up. I have used squares instead of puzzle pieces since I don't have your images. The concept is the same though.
Here is the XML:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:rotation="45"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_orange_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

How to tie a BottomSheet at the bottom view of the layout

Through ConstraintLayout, I am using a BottomSheet to show content of a map detail. My idea is the same used in GoogleMaps, but without the image carousel at the top.
I need to find some property to tie the BottomSheet in the bottom, using only the size from its layout, not the whole window, as below:
Here is my XML from parent view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/mapview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
mapbox:center_latitude="0"
mapbox:center_longitude="0"
mapbox:style_url="#string/style_mapbox_streets"
mapbox:zoom="12" />
<!--
<ImageView
android:id="#+id/bottom_sheet_backdrop"
android:layout_width="match_parent"
android:layout_height="#dimen/anchor_point"
android:fitsSystemWindows="true"
app:layout_behavior="#string/BackDropBottomSheetBehavior" />
-->
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:anchorPoint="#dimen/anchor_point"
app:behavior_hideable="true"
app:behavior_peekHeight="#dimen/bottom_sheet_peek_height"
app:layout_behavior="#string/BottomSheetBehaviorGoogleMapsLike">
<include
layout="#layout/places_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/places_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
android:src="#drawable/ic_directions"
app:elevation="3dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|right|end"
app:layout_behavior="#string/ScrollAwareFABBehavior" />
</android.support.design.widget.CoordinatorLayout>
Here is the design from BottomSheet "layout/places_bottom_sheet"
<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="#android:color/white"
android:orientation="vertical"
android:paddingBottom="16dp">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/bottom_sheet_place_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:src="#drawable/watchmen" />
<TextView
android:id="#+id/bottom_sheet_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:text="Bottom Sheet Title"
android:textSize="20sp" />
</LinearLayout>
<!-- line separator -->
<include
android:id="#+id/include2"
layout="#layout/line_separator"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
<!-- street address-->
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="0dp"
android:orientation="horizontal"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include2">
<ImageView
android:id="#+id/bottom_sheet_address_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="8dp"
android:scaleType="center"
android:src="#drawable/ic_location_on_black_24dp" />
<TextView
android:id="#+id/bottom_sheet_address_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:text="Rua tal, Nº 1234"
android:textSize="14sp" />
</LinearLayout>
<!-- phone -->
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<ImageView
android:id="#+id/bottom_sheet_phone_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="8dp"
android:scaleType="center"
android:src="#drawable/ic_phone_black_24dp" />
<TextView
android:id="#+id/bottom_sheet_phone_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:text="(62) 983 234 544"
android:textSize="14sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

BottomSheet works only inside Coordinator Layout or as BottomSheetDialogFragment popup.
Because: app:layout_behavior is part of Coordinator Layout
It seems like at the moment there is no way of putting BottomSheet inside ConstraintsLayout, which would be awesome.
They both extend view group so maybe one day, we will see capabilities of Coordinator Layout inside ConstraintsLayout or some mix of two.

Set the gravity of the layout to bottom.

In places_bottom_sheet.xml, change the layout_height of the root ConstraintLayout to "match_parent".

Add this to bottom sheet. This will work like a charm!!!
android:layout_gravity="center_horizontal"

Can NestedScrollview and ConstraintLayout work together?

I'm trying the new ConstraintLayout and it's really cool and simple.
I tried to apply it in a NestedScrollview inside coordinate layout where ConstraintLayout is the parent of the NestedScrollView.
But it didn't work, and all views collapsed vertically. How can I solve this?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="#+id/button2"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
app:layout_constraintTop_toTopOf="#+id/textView2"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
<android.support.constraint.Guideline
android:layout_width="411dp"
android:layout_height="0dp"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="367dp"
android:orientation="horizontal"
tools:layout_editor_absoluteY="367dp"
tools:layout_editor_absoluteX="0dp" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/progressBar2"
app:layout_constraintTop_toTopOf="#+id/guideline"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
android:layout_marginTop="40dp"
app:layout_constraintHorizontal_bias="0.25"
android:max="100"
android:progress="76" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I might be late but adding android:fillViewport="true"in NestedScrollView should resolve the issue.

As per this link,This has already been fixed in constraint-layout 1.0.0-alpha2 (available with Android Studio 2.2 Preview 2).

Your constraint layout takes the whole space and thus your nested scrollview will not be scrollable. use wrap_content for the width instead.
...
<android.support.constraint.ConstraintLayout
android:orientation="vertical"
android:layout_width="wrap_content" <---here
android:layout_height="match_parent">
...