Constraint Layout display another screen on preview and on practice

Question

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?

Answer 1

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"