Develop Reference

Add Divider to AlertDialog with CustomView

I'd like to add a divider to an alert dialog at the bottom, similar to the one it shows when there are long list views (see image).
However, I've added a customized view, because I want to be able to use a generic layout for all my AlertDialogs in the whole app. Now there is a very huge space between view and buttons. Additionally the listview, which used to have the divider (from the original AlertDialog view), is not available anymore and my layout has it's own recyclerview. (Because they are recommended nowadays.)
I tried adding a divider in my custom view, but this divider is bound to the padding of it's parent and therefore doesn't fill the whole dialog (and is still heavily spaced from the buttons).
So I'd basically like to access the area of the buttons in the alertdialog to add a divider at the top of this view. (Which then would be full width and below the padding of the custom view.) It would be great, if this was possible with the Builder, because I sometimes use positive and negative buttons and sometimes only negative or only positive and customizing all that in a generic layout as well would be a huge effort.
Here's my custom layout (with divider). I'm using the MaterialAlertDialogBuilder. Note: I could remove the padding at the bottom to remove the space, but then it looks smashed and the problem with the width of the divider still isn't fixed.
<?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"
style="#style/AppCompatAlertDialogTheme"
android:padding="?dialogPreferredPadding"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textAppearance="#style/TFAlertDialogStyle"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/alert_explanation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
android:text="#string/lorem"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alert_title"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alert_explanation">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/alertDivider"
style="#style/Divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Goal:
Edit 1: It should also work with the recyclerview being filled, so it has to scroll, where the current solutions let the recyclerview disappear in the padding. There's 1 1/2 items left, but I can't scroll any further. (Image is without marginTop on Divider, with margin it actually disappears as well)
Solution:
If you don't have a scrolling recyclerview with many items, #shraddha patel s approach works just fine. However, if you have one, to avoid cutting off the last items, you need to use a LinearLayout instead of a ConstraintLayout for the contentview, as shown in this somewhat related bug report: https://github.com/material-components/material-components-android/issues/1336
However, if you have items below the recyclerview, the parent layout still needs to stay a constraint layout or the divider will disappear in scrolling lists.
So the working solution for me now is:
<?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">
<!--Don't ever refactor that to constraint layout.
There's some weird magic making it work only with a LinearLayout.-->
<androidx.appcompat.widget.LinearLayoutCompat
android:orientation="vertical"
android:id="#+id/alert_content_view"
style="#style/AppCompatAlertDialogTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="?dialogPreferredPadding">
<TextView
android:id="#+id/alert_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="#style/TFAlertDialogStyle"
android:textColor="#color/black"/>
<TextView
android:id="#+id/alert_explanation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
android:text="#string/desc"
android:textColor="#color/black"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
//Some views set to visibility = gone
</androidx.appcompat.widget.LinearLayoutCompat>
<View
android:id="#+id/alertDivider"
style="#style/Divider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

If you have to implement the above UI using the ConstraintLayout layout then you can use the below code,
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
style="#style/AppCompatAlertDialogTheme"
android:padding="?dialogPreferredPadding"
android:layout_width="match_parent"
android:id="#+id/csLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Title"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/alert_explanation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/desc"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alert_title"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alert_explanation">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/csLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/black" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try using linear layout(Copy this code and try).
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/alert_explanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="loremfgdgdfgdgdgdgdgdgdgdgdgdgdgdgdgdgloremfgdgdfgdgdgdgdgdgdgdgdgdgdgdgdgdg"
android:textColor="#color/black"
android:textSize="16sp"
tools:visibility="visible" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="20dp"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="Cancel"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:padding="2dp"
android:text="Ok"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold"
tools:visibility="visible" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>

Why does a white border in a card view appears when load an image?

I created a component for my app which I use like a card. It has some textviews and an end image, but the image always appears with some withe border liek in the image bellow:
I tried everything to fix it but I can figure out how and it's important because the component it's used in almost all the app and in all of them the all the images appear with some withe border.
Component code:
<androidx.cardview.widget.CardView 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="106dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/image_card_end"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/txt_card_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dp"
app:textType="semibold"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/second_description_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:visibility="gone"
tools:visibility="visible">
<TextView
android:id="#+id/txt_card_second_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:textSize="14dp"
app:textType="regular"
/>
</LinearLayout>
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card_end"
android:layout_width="98dp"
android:layout_height="106dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/card_appointment_image" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
And this is how I use it:
<com.univer.components.card.BasicCard
android:id="#+id/home_card_auto_evaluation_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="8dp"
app:cardDescription="#string/home_card_selfdiagnosis_description"
app:cardEndImage="#string/image_home_card_symptomchecker"
app:cardHeader="#string/home_card_selfdiagnosis_header" />

Set a background which is easily visible(eg: red) to your cardview and run the app.
If the red section gets visible it means the inner constraint layout isn't wrapping the cardview completely . If that is the case I would suggest experimenting with scale type as so
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_card_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center-crop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/card_appointment_image" />

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"/>

View with minHeight in ConstraintLayout

I have a ConstraintLayout inside a NestedScrollView. The ConstraintLayout contains a bunch of views but the last View can have a dynamic height to fill up the bottom space if there is any but it also needs to be a minimum height if there is not enough space.
For arguments sake, here is an example.
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_min="1500dp"
android:background="#color/red"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
As you can see I have put the ConstraintLayout version in but it doesn't work. Obviously the values are ridiculously large but this is just for testing.
If I don't set fillViewport="true" on the NestedScrollView then ConstraintLayout has a height of 0. When I do set the fillViewport, the ConstraintLayout does not scroll but just fills the screen.
How can I set the View so that it expands to the bottom of the ConstraintLayout which should be as big as the Viewport but if my View is not of the minHeight then we allow scrolling?
I am using version 1.0.2 of the ConstraintLayout library.
What I expect to see is the being all the way to the bottom of the parent but if that size is less than 1500dp then the view scrolls.
I have entered 1500dp like so android:layout_height="1500dp" and the view scrolls accordingly.
UPDATE 1
Seems to be once I put the layout within a FragmentViewPager. The app:layout_constraintHeight_min property isn't respected and it only matches the height of the viewport.
I also tried taking the NestedScrollView out of the fragment and putting the ViewPager inside it but again didn't work.

Add this attribute to the view you'd like to have stretch:
app:layout_constraintHeight_default="spread"
I made a tiny app to demonstrate. No java logic to speak of, but here's the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#caf">
<TextView
android:id="#+id/one"
android:layout_width="0dp"
android:layout_height="48dp"
android:gravity="center"
android:text="hello world"
android:background="#fff"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/two"/>
<TextView
android:id="#+id/two"
android:layout_width="0dp"
android:layout_height="48dp"
android:gravity="center"
android:text="hello world"
android:background="#eee"
app:layout_constraintTop_toBottomOf="#+id/one"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/three"/>
<TextView
android:id="#+id/three"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="hello world"
android:background="#ddd"
app:layout_constraintHeight_default="spread"
app:layout_constraintHeight_min="300dp"
app:layout_constraintTop_toBottomOf="#+id/two"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
The bottom view stretches to fill the viewport when it is smaller than the remaining available space, and scrolling is impossible:
The bottom view maintains a fixed height when it is larger than the remaining available space, which makes scrolling possible:

I am using com.android.support.constraint:constraint-layout:1.0.2 and this works for me:
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/gradient"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_min="1500dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

As the first thing is we have to specify the fixed height to each text view or used wrap content as another option.Secondary inside constraint layout the property app:layout_constraintHeight_default="spread" helps the last view to get the remaining complete space left and if no space left then automatically synced to scroll view.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#caf"
android:padding="16dp">
<TextView
android:id="#+id/one"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#fff"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/two"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/two"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#eee"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/three"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/one" />
<TextView
android:id="#+id/three"
android:layout_width="0dp"
android:layout_height="48dp"
android:background="#eee"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/four"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/two" />
<TextView
android:id="#+id/four"
android:layout_width="0dp"
anroid:layout_height="48dp"
android:background="#eee"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toTopOf="#+id/five"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/three" />
<TextView
android:id="#+id/five"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ddd"
android:gravity="center"
android:text="hello world"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintHeight_min="300dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/three" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

Constraint Layout display another screen on preview and on practice

I use the follow code to display buttons and ViewPager. I want to display ViewPager above of buttons but that it have wrap_content height and width.
<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/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/buttons_bottom_layout"
android:layout_width="0dp"
android:layout_height="#dimen/hd_preview_buttons_height"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginRight="#dimen/basic_keyline"
android:orientation="horizontal"
android:layout_marginBottom="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_pager"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="invisible" />
<View
android:id="#+id/stubBottom"
android:layout_width="#dimen/basic_keyline"
android:layout_height="wrap_content" />
<Button
android:id="#+id/send_button"
style="#style/HDPreviewButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent"
android:text="#string/send"
android:textAllCaps="true" />
</LinearLayout>
What I see on preview.
But on practice on emulator I get this screen.
What I do incorrect?

From the XML code you posted there are several issues that ConstraintLayout might have problem with.
Also ConstraintLayout can help you with nesting layout, which you also mentioned in comments you want to avoid.
I am not sure you want the view pager to behave as wrap rather than match it's constraints.
I created what I think is what you want using what ConstraintLayout has to offer to ease pain of previous layouts.
<android.support.constraint.ConstraintLayout android:id="#+id/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:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/barrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/send_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:textAllCaps="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/view_pager"
tools:text="Send" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="send_button, button"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Bottom buttons are chained horizontally together - this is basically replacement of the previous LinearLayout and the weight usage.
Also added barrier for height of the bottom buttons - this will make sure the height of the view pager will always accomodate to the height of any of them.
If you will actually want to the view pager to have wrap content add these
app:layout_constraintWidth_max="wrap"
app:layout_constraintHeight_max="wrap"